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

No:19490

←

Prev Next

→

Tetris
Developer User8647｜Date and time 23/10/4 10:21:54
Build time 45.186 sec｜Game capacity 9.713KB｜

Script

Tetris

Use left and right arrows to move, up arrow to rotate, and down arrow to drop faster.

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
    <style>
        /* CSS styles for the game */
        body {
            background-color: #232323;
            font-family: Arial, sans-serif;
            text-align: center;
        }

#game-board {
            margin: 50px auto;
            width: 250px;
            height: 500px;
            background-color: #000;
            position: relative;
            border: solid 2px #FFF;
        }

.cell {
            width: 25px;
            height: 25px;
            background-color: #444;
            border: solid 1px #000;
            box-sizing: border-box;
            position: absolute;
        }

.filled-cell {
            background-color: #FFF;
        }

#info {
            color: #FFF;
            font-size: 18px;
            margin-bottom: 20px;
        }

#score {
            color: #FFF;
            font-size: 24px;
            margin-bottom: 10px;
        }

#start-button {
            font-size: 16px;
            background-color: #FFF;
            color: #000;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Tetris</h1>

<div id="info">Use left and right arrows to move, up arrow to rotate, and down arrow to drop faster.</div>

<div id="score">Score: 0</div>

<button id="start-button">Start Game</button>

// Game state variables
            let board = [];
            let activePiece = {
                shape: null,
                x: 0,
                y: 0
            };
            let score = 0;
            let timerId;

const gameBoard = document.getElementById('game-board');
            const startButton = document.getElementById('start-button');
            const scoreDisplay = document.getElementById('score');

// Generates the initial game board
            function createBoard() {
                for (let row = 0; row < boardHeight; row++) {
                    board[row] = [];
                    for (let col = 0; col < boardWidth; col++) {
                        board[row][col] = 0;
                    }
                }
            }

// Displays the game board on the screen
            function renderBoard() {
                let cellsHTML = '';
                for (let row = 0; row < boardHeight; row++) {
                    for (let col = 0; col < boardWidth; col++) {
                        let cellClass = board[row][col] === 1 ? 'cell filled-cell' : 'cell';
                        cellsHTML += `<div class="${cellClass}" style="top:${row * cellSize}px; left:${col * cellSize}px;"></div>`;
                    }
                }
                gameBoard.innerHTML = cellsHTML;
            }

// Starts a new game
            function startGame() {
                clearInterval(timerId); // Clear any existing game timer
                createBoard();
                score = 0;
                activePiece.shape = getRandomPiece();
                activePiece.x = Math.floor(boardWidth / 2) - Math.floor(activePiece.shape[0].length / 2);
                activePiece.y = 0;
                renderBoard();
                scoreDisplay.innerHTML = 'Score: 0';
                dropPiece();
            }

// Drops the active piece down by one row every game tick
            function dropPiece() {
                if (isCollision(activePiece.shape, activePiece.x, activePiece.y + 1)) {
                    // If collision detected, freeze the piece, clear full rows, and generate the next piece
                    freezePiece();
                    clearFullRows();
                    if (isGameOver()) {
                        clearInterval(timerId);
                        alert('Game Over!');
                        return;
                    }
                    activePiece.shape = getRandomPiece();
                    activePiece.x = Math.floor(boardWidth / 2) - Math.floor(activePiece.shape[0].length / 2);
                    activePiece.y = 0;
                } else {
                    // Move the piece down by one row
                    activePiece.y++;
                }
                renderBoard();
            }

// Freezes the active piece on the game board
            function freezePiece() {
                for (let row = 0; row < activePiece.shape.length; row++) {
                    for (let col = 0; col < activePiece.shape[row].length; col++) {
                        if (activePiece.shape[row][col]) {
                            if (activePiece.y + row >= 0) { // Ignore hidden rows
                                board[activePiece.y + row][activePiece.x + col] = 1;
                            }
                        }
                    }
                }
            }

// Clears the rows that are completely filled and updates score
            function clearFullRows() {
                let fullRows = [];
                for (let row = 0; row < boardHeight; row++) {
                    if (board[row].every(cell => cell === 1)) {
                        fullRows.push(row);
                    }
                }
                if (fullRows.length > 0) {
                    score += 10 * fullRows.length;
                    for (let row of fullRows) {
                        board.splice(row, 1);
                        board.unshift(Array(boardWidth).fill(0));
                    }
                    scoreDisplay.innerHTML = 'Score: ' + score;
                }
            }

// Checks if the active piece collides with the game board boundaries or other frozen pieces
            function isCollision(piece, x, y) {
                for (let row = 0; row < piece.length; row++) {
                    for (let col = 0; col < piece[row].length; col++) {
                        if (piece[row][col]) {
                            if (
                                x + col < 0 ||
                                x + col >= boardWidth ||
                                y + row >= boardHeight ||
                                board[y + row][x + col] === 1
                            ) {
                                return true;
                            }
                        }
                    }
                }
                return false;
            }

// Checks if the game is over (i.e., the active piece is already frozen at the top row)
            function isGameOver() {
                return board[0].some(cell => cell === 1);
            }

// Handles user input for moving and rotating the active piece
            function handleInput(event) {
                if (activePiece.shape) {
                    switch (event.key) {
                        case 'ArrowLeft':
                            if (!isCollision(activePiece.shape, activePiece.x - 1, activePiece.y)) {
                                activePiece.x--;
                                renderBoard();
                            }
                            break;
                        case 'ArrowRight':
                            if (!isCollision(activePiece.shape, activePiece.x + 1, activePiece.y)) {
                                activePiece.x++;
                                renderBoard();
                            }
                            break;
                        case 'ArrowDown':
                            clearInterval(timerId);
                            dropPiece();
                            break;
                        case 'ArrowUp':
                            const rotatedPiece = rotatePiece(activePiece.shape);
                            if (!isCollision(rotatedPiece, activePiece.x, activePiece.y)) {
                                activePiece.shape = rotatedPiece;
                                renderBoard();
                            }
                            break;
                    }
                }
            }

// Rotates a given piece clockwise by 90 degrees
            function rotatePiece(piece) {
                const rotatedPiece = [];
                const rows = piece.length;
                const cols = piece[0].length;
                for (let col = 0; col < cols; col++) {
                    rotatedPiece[col] = [];
                    for (let row = 0; row < rows; row++) {
                        rotatedPiece[col][row] = piece[row][cols - 1 - col];
                    }
                }
                return rotatedPiece;
            }

// Generates a random Tetris piece shape
            function getRandomPiece() {
                const pieces = [
                    [[1]],
                    [[1, 1]],
                    [[1, 1], [1, 1]],
                    [[1, 0], [1, 0], [1, 1]],
                    [[1, 0], [1, 1], [1, 0]],
                    [[1, 1, 0], [0, 1, 1]],
                    [[0, 1, 1], [1, 1, 0]]
                ];
                const randomIndex = Math.floor(Math.random() * pieces.length);
                return pieces[randomIndex];
            }

// Event listeners
            startButton.addEventListener('click', startGame);
            document.addEventListener('keydown', handleInput);

// Start the game when page loads
            startGame();
        });
    </script>
</body>
</html>