Un juego que sea un tetris divido en dos juegos's game

Click here for free DL of the app version that can save data.

No:12648

131

←

Prev Next

→

Un juego que sea un tetris divido en dos juegos
Developer User3408｜Date and time 23/8/21 10:00:42
Build time 31.215 sec｜Game capacity 9.166KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <title>Tetris Game</title>
    <style>
        #game-board {
            width: 300px;
            height: 600px;
            border: 1px solid black;
            margin: auto;
            position: relative;
            overflow: hidden;
        }
        
        .block {
            width: 30px;
            height: 30px;
            border: 1px solid black;
            position: absolute;
        }
        
        .tetromino {
            width: 30px;
            height: 30px;
            position: absolute;
        }
        
        .tetromino.blue {
            background-color: blue;
        }
        
        .tetromino.red {
            background-color: red;
        }
        
        .tetromino.green {
            background-color: green;
        }
        
        .tetromino.yellow {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

for (let y = 0; y < gameBoardHeight; y++) {
                for (let x = 0; x < gameBoardWidth; x++) {
                    const block = document.createElement('div');
                    block.classList.add('block');
                    block.style.left = (x * 30) + 'px';
                    block.style.top = (y * 30) + 'px';
                    gameBoard.appendChild(block);
                }
            }

// Tetrominos
            const tetrominos = [
                [[1, 1, 0], [0, 1, 1], [0, 0, 0]], // Blue L shape
                [[1, 1, 0], [1, 1, 0], [0, 0, 0]], // Red square
                [[0, 1, 0], [1, 1, 1], [0, 0, 0]], // Green T shape
                [[1, 1], [1, 1]] // Yellow square
            ];

// Initialize variables
            let currentTetromino;
            let currentX;
            let currentY;
            let gameInterval;

// Initialize game
            function initializeGame() {
                currentTetromino = getRandomTetromino();
                currentX = 3;
                currentY = 0;
                gameInterval = setInterval(moveTetrominoDown, 1000);
                drawTetromino();
            }

// Generate random tetromino
            function getRandomTetromino() {
                const randomIndex = Math.floor(Math.random() * tetrominos.length);
                return tetrominos[randomIndex];
            }

// Draw the tetromino on the game board
            function drawTetromino() {
                const blocks = document.getElementsByClassName('block');

for (let y = 0; y < currentTetromino.length; y++) {
                    for (let x = 0; x < currentTetromino[y].length; x++) {
                        if (currentTetromino[y][x]) {
                            const tetrominoBlock = document.createElement('div');
                            tetrominoBlock.classList.add('tetromino');
                            tetrominoBlock.classList.add(getTetrominoColor());
                            tetrominoBlock.style.left = ((currentX + x) * 30) + 'px';
                            tetrominoBlock.style.top = ((currentY + y) * 30) + 'px';
                            gameBoard.appendChild(tetrominoBlock);
                        }
                    }
                }
            }

// Get color for the current tetromino
            function getTetrominoColor() {
                if (currentTetromino === tetrominos[0]) {
                    return 'blue';
                } else if (currentTetromino === tetrominos[1]) {
                    return 'red';
                } else if (currentTetromino === tetrominos[2]) {
                    return 'green';
                } else if (currentTetromino === tetrominos[3]) {
                    return 'yellow';
                }
            }

// Move tetromino down
            function moveTetrominoDown() {
                const blocks = document.getElementsByClassName('block');

// Remove previous tetromino from the board
                const tetrominoBlocks = document.getElementsByClassName('tetromino');
                while (tetrominoBlocks[0]) {
                    tetrominoBlocks[0].parentNode.removeChild(tetrominoBlocks[0]);
                }

// Check if tetromino can move down
                if (canTetrominoMove(currentTetromino, currentX, currentY + 1)) {
                    currentY++;
                    drawTetromino();
                } else {
                    // Add current tetromino to the board as blocks
                    for (let y = 0; y < currentTetromino.length; y++) {
                        for (let x = 0; x < currentTetromino[y].length; x++) {
                            if (currentTetromino[y][x]) {
                                blocks[(currentY + y) * gameBoardWidth + (currentX + x)].classList.add('tetromino');
                                blocks[(currentY + y) * gameBoardWidth + (currentX + x)].classList.add(getTetrominoColor());
                            }
                        }
                    }

// Check for completed rows
                    checkRows();

// Check if game is over
                    if (currentY === 0) {
                        clearInterval(gameInterval);
                        alert('Game Over!');
                    } else {
                        // Initialize a new tetromino
                        currentTetromino = getRandomTetromino();
                        currentX = 3;
                        currentY = 0;
                        drawTetromino();
                    }
                }
            }

// Check if tetromino can move in the provided direction
            function canTetrominoMove(tetromino, x, y) {
                for (let row = 0; row < tetromino.length; row++) {
                    for (let col = 0; col < tetromino[row].length; col++) {
                        if (tetromino[row][col]) {
                            if (
                                y + row >= gameBoardHeight ||
                                x + col < 0 ||
                                x + col >= gameBoardWidth ||
                                blocks[(y + row) * gameBoardWidth + (x + col)].classList.contains('tetromino')
                            ) {
                                return false;
                            }
                        }
                    }
                }
                return true;
            }

// Check for completed rows and clear them
            function checkRows() {
                const blocks = document.getElementsByClassName('block');
                let rowsCleared = 0;

for (let y = 0; y < gameBoardHeight; y++) {
                    let rowFilled = true;

for (let x = 0; x < gameBoardWidth; x++) {
                        if (!blocks[y * gameBoardWidth + x].classList.contains('tetromino')) {
                            rowFilled = false;
                            break;
                        }
                    }

if (rowFilled) {
                        rowsCleared++;
                        for (let x = 0; x < gameBoardWidth; x++) {
                            blocks[y * gameBoardWidth + x].classList.remove('tetromino');
                            blocks[y * gameBoardWidth + x].classList.remove(getTetrominoColor());
                        }

// Move all rows above the cleared row down
                        for (let i = y - 1; i >= 0; i--) {
                            for (let x = 0; x < gameBoardWidth; x++) {
                                if (blocks[i * gameBoardWidth + x].classList.contains('tetromino')) {
                                    blocks[i * gameBoardWidth + x].classList.remove('tetromino');
                                    blocks[i * gameBoardWidth + x].classList.remove(getTetrominoColor());
                                    blocks[(i + 1) * gameBoardWidth + x].classList.add('tetromino');
                                    blocks[(i + 1) * gameBoardWidth + x].classList.add(getTetrominoColor());
                                }
                            }
                        }
                    }
                }

// Update score based on cleared rows
                if (rowsCleared > 0) {
                    updateScore(rowsCleared);
                }
            }

// Update the score
            function updateScore(rowsCleared) {
                const scoreElement = document.getElementById('score');
                const score = parseInt(scoreElement.innerHTML);
                scoreElement.innerHTML = score + (rowsCleared * 100);
            }

// Start the game
            initializeGame();
        });
    </script>
</body>
</html>