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

No:9434

131

←

Prev Next

→

Tetris including tetromino and pentomino pieces al..ALL
Developer User4358｜Date and time 23/7/24 21:42:46
Build time 53.968 sec｜Game capacity 6.957KB｜

Script

Tetris Game

This HTML file implements the classic game Tetris, including tetromino (4-cell pieces) and pentomino (5-cell pieces) figures. It utilizes JavaScript for game mechanics such as piece rotation, movement, clearing of rows, and tracking the score. The game can be played on a smartphone by using touch controls or on a computer by using the keyboard arrows. The game is contained within a single HTML file and enclosed in script tags.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Tetris Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        canvas {
            border: 1px solid #999;
        }
    </style>
</head>
<body>
    <h1>Tetris Game</h1>
    <canvas id="tetrisCanvas" width="240" height="400"></canvas>
    <script>
        // Tetris Pieces
        const tetrominoes = [
            [[1, 1, 1, 1]],
            [[1, 1], [1, 1]],
            [[1, 1, 0], [0, 1, 1]],
            [[0, 1, 1], [1, 1, 0]],
            [[1, 0, 0], [1, 1, 1]],
            [[0, 0, 1], [1, 1, 1]],
            [[1, 1, 1], [1, 0, 0]],
            [[1, 1, 1], [0, 0, 1]],
            [[1]],
            [[1, 1, 1, 1, 1]]
        ];
        
        // Canvas and Context
        const canvas = document.getElementById("tetrisCanvas");
        const context = canvas.getContext("2d");
        const cellSize = 20;
        const rows = canvas.height / cellSize;
        const cols = canvas.width / cellSize;
        let score = 0;
        let gameOver = false;
        let tetromino, tetrominoType, tetrominoIndex, tetrominoX, tetrominoY;
        let board = createBoard();

// Initialize Game
        function startGame() {
            board = createBoard();
            gameOver = false;
            score = 0;
            tetrominoIndex = Math.floor(Math.random() * tetrominoes.length);
            tetrominoType = tetrominoes[tetrominoIndex];
            tetromino = createTetromino(tetrominoType);
            tetrominoX = Math.floor((cols - tetromino[0].length) / 2);
            tetrominoY = 0;
            draw();
            setInterval(update, 400); // Game loop
        }

// Create Empty Board
        function createBoard() {
            return Array(rows).fill().map(() => Array(cols).fill(0));
        }

// Create Tetromino piece
        function createTetromino(type) {
            return type.map(row => [...row]);
        }

// Draw the Tetromino piece on the board
        function drawTetromino() {
            tetromino.forEach((row, rowIndex) => {
                row.forEach((cell, cellIndex) => {
                    if (cell) {
                        drawCell(tetrominoX + cellIndex, tetrominoY + rowIndex, cell);
                    }
                });
            });
        }

// Draw a single cell
        function drawCell(x, y, cell) {
            context.fillStyle = cell ? "#000" : "#fff";
            context.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);

context.strokeStyle = "#999";
            context.strokeRect(x * cellSize, y * cellSize, cellSize, cellSize);
        }

// Clear the full row if all cells are filled
        function checkFullRow() {
            for (let row = 0; row < rows; row++) {
                if (board[row].every(cell => cell)) {
                    board.splice(row, 1);
                    board.unshift(Array(cols).fill(0));
                    score += 10;
                }
            }
        }

// Rotate the Tetromino piece
        function rotate() {
            const rotatedTetromino = tetromino[0].map((_, index) =>
                tetromino.map(row => row[index])
            );

tetromino = rotatedTetromino.reverse();
        }

// Move the Tetromino piece
        function move(direction) {
            tetrominoX += direction;

if (collision()) {
                tetrominoX -= direction;
            }
        }

// Drop the Tetromino piece
        function drop() {
            if (gameOver) return;

tetrominoY++;

if (collision()) {
                tetrominoY--;

mergeBoard();
                checkFullRow();
                tetrominoIndex = Math.floor(Math.random() * tetrominoes.length);
                tetrominoType = tetrominoes[tetrominoIndex];
                tetromino = createTetromino(tetrominoType);
                tetrominoX = Math.floor((cols - tetromino[0].length) / 2);
                tetrominoY = 0;

if (collision()) {
                    gameOver = true;
                    clearInterval(update);
                }
            }
        }

// Merge the Tetromino piece on the board
        function mergeBoard() {
            tetromino.forEach((row, rowIndex) => {
                row.forEach((cell, cellIndex) => {
                    if (cell) {
                        board[tetrominoY + rowIndex][tetrominoX + cellIndex] = cell;
                    }
                });
            });
        }

// Check for collision
        function collision() {
            for (let row = 0; row < tetromino.length; row++) {
                for (let col = 0; col < tetromino[row].length; col++) {
                    if (
                        tetromino[row][col] &&
                        (board[tetrominoY + row] && board[tetrominoY + row][tetrominoX + col]) !== 0
                    ) {
                        return true;
                    }
                }
            }
            return false;
        }

// Update the game state
        function update() {
            draw();
            drop();
        }

// Draw the game
        function draw() {
            context.fillStyle = "#fff";
            context.fillRect(0, 0, canvas.width, canvas.height);

board.forEach((row, rowIndex) => {
                row.forEach((cell, cellIndex) => {
                    drawCell(cellIndex, rowIndex, cell);
                });
            });

drawTetromino();
            context.fillStyle = "#000";
            context.fillText("Score: " + score, 20, 30);

if (gameOver) {
                context.fillStyle = "#000";
                context.font = "30px Arial";
                context.fillText("Game Over", 60, 200);
            }
        }

// Handle keyboard events
        document.addEventListener("keydown", event => {
            if (event.key === "ArrowRight") {
                move(1); // Move right
            } else if (event.key === "ArrowLeft") {
                move(-1); // Move left
            } else if (event.key === "ArrowDown") {
                drop(); // Drop piece
            } else if (event.key === "ArrowUp") {
                rotate(); // Rotate piece
            }
        });

// Start the game
        startGame();
    </script>
</body>
</html>
```