AI game creator

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

No:27430

←

Prev Next

→

Tetris
Developer User13648｜Date and time 23/12/7 2:31:48
Build time 65.888 sec｜Game capacity 7.426KB｜

Script

Sure! Here's a simple implementation of the classic game Tetris as a single HTML file using JavaScript. Please note that this is a simplified version and may not include all features of the original game:

This implementation uses the canvas element to draw the game grid and tetromino pieces. You can control the game using the arrow keys on the keyboard. Once you reach the top of the grid, the game will be over. The score increases as you clear rows. Enjoy playing Tetris on your smartphone browser!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Tetris</title>
    <style>
        canvas {
            border: 1px solid #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="tetris" width="240" height="400"></canvas>
    
    <script>
        // Tetris Constants
        const ROW = 20;
        const COL = 10;
        const SQ = 20;
        const VACANT = "#f2f2f2";

// Game variables
        let canvas = document.getElementById("tetris");
        let context = canvas.getContext("2d");
        let score = 0;
        let gameOver = false;

// Create the grid
        let grid = [];
        for (let r = 0; r < ROW; r++) {
            grid[r] = [];
            for (let c = 0; c < COL; c++) {
                grid[r][c] = VACANT;
            }
        }

// Helper function to draw a square
        function drawSquare(x, y, color) {
            context.fillStyle = color;
            context.fillRect(x * SQ, y * SQ, SQ, SQ);
            context.strokeStyle = "#ccc";
            context.strokeRect(x * SQ, y * SQ, SQ, SQ);
        }

// Draw the grid
        function drawGrid() {
            for (let r = 0; r < ROW; r++) {
                for (let c = 0; c < COL; c++) {
                    drawSquare(c, r, grid[r][c]);
                }
            }
        }

// Tetromino shapes and colors
        const PIECES = [
            [Z, "red"],
            [S, "green"],
            [T, "purple"],
            [O, "yellow"],
            [L, "blue"],
            [I, "cyan"],
            [J, "orange"]
        ];

// Initialize current piece and position
        let currentPiece = randomPiece();
        let currentX = 3;
        let currentY = -2;

// Generate random Tetromino piece
        function randomPiece() {
            return PIECES[Math.floor(Math.random() * PIECES.length)];
        }

// Draw the current piece on the grid
        function drawPiece() {
            for (let r = 0; r < currentPiece[0].length; r++) {
                for (let c = 0; c < currentPiece[0][r].length; c++) {
                    if (currentPiece[0][r][c]) {
                        drawSquare(currentX + c, currentY + r, currentPiece[1]);
                    }
                }
            }
        }

// Move the current piece down
        function moveDown() {
            if (!collision(0, 1, currentPiece[0])) {
                erasePiece();
                currentY++;
                drawPiece();
            } else {
                lockPiece();
                currentPiece = randomPiece();
                currentX = 3;
                currentY = -2;
            }
        }

// Move the current piece to the left
        function moveLeft() {
            if (!collision(-1, 0, currentPiece[0])) {
                erasePiece();
                currentX--;
                drawPiece();
            }
        }

// Move the current piece to the right
        function moveRight() {
            if (!collision(1, 0, currentPiece[0])) {
                erasePiece();
                currentX++;
                drawPiece();
            }
        }

// Rotate the current piece
        function rotate() {
            let rotatedPiece = rotatePiece(currentPiece[0]);
            if (!collision(0, 0, rotatedPiece)) {
                erasePiece();
                currentPiece[0] = rotatedPiece;
                drawPiece();
            }
        }

// Rotate a piece
        function rotatePiece(piece) {
            let newPiece = new Array(piece[0].length);
            for (let i = 0; i < piece.length; i++) {
                newPiece[i] = new Array(piece.length).fill(0);
            }
            for (let r = 0; r < piece.length; r++) {
                for (let c = 0; c < piece[0].length; c++) {
                    newPiece[c][piece.length - 1 - r] = piece[r][c];
                }
            }
            return newPiece;
        }

// Check if there is a collision
        function collision(x, y, piece) {
            for (let r = 0; r < piece.length; r++) {
                for (let c = 0; c < piece[0].length; c++) {
                    if (!piece[r][c]) {
                        continue;
                    }
                    let newX = currentX + c + x;
                    let newY = currentY + r + y;
                    if (newX < 0 || newX >= COL || newY >= ROW || grid[newY][newX] !== VACANT) {
                        return true;
                    }
                }
            }
            return false;
        }

// Lock the current piece in place
        function lockPiece() {
            for (let r = 0; r < currentPiece[0].length; r++) {
                for (let c = 0; c < currentPiece[0][r].length; c++) {
                    if (!currentPiece[0][r][c]) {
                        continue;
                    }
                    if (currentY + r < 0) {
                        gameOver = true;
                        break;
                    }
                    grid[currentY + r][currentX + c] = currentPiece[1];
                }
            }
            // Remove filled rows
            for (let r = 0; r < ROW; r++) {
                if (grid[r].every(cell => cell !== VACANT)) {
                    // Move all rows above down
                    for (let y = r; y > 1; y--) {
                        grid[y] = grid[y - 1];
                    }
                    grid[0] = new Array(COL).fill(VACANT);
                    score += 10;
                }
            }
        }

// Erase the current piece from the grid
        function erasePiece() {
            for (let r = 0; r < currentPiece[0].length; r++) {
                for (let c = 0; c < currentPiece[0][r].length; c++) {
                    if (currentPiece[0][r][c]) {
                        drawSquare(currentX + c, currentY + r, VACANT);
                    }
                }
            }
        }

// Game loop
        function draw() {
            context.clearRect(0, 0, canvas.width, canvas.height);

drawGrid();
            drawPiece();

if (gameOver) {
                context.fillStyle = "#000";
                context.font = "20px Arial";
                context.fillText("Game Over", 70, canvas.height / 2);
                return;
            }

requestAnimationFrame(draw);
        }

// Controls
        document.addEventListener("keydown", e => {
            if (e.keyCode === 37) {
                moveLeft();
            } else if (e.keyCode === 38) {
                rotate();
            } else if (e.keyCode === 39) {
                moveRight();
            } else if (e.keyCode === 40) {
                moveDown();
            }
        });

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