AI game creator

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

No:22902

←

Prev Next

→

Tetris
Developer User10588｜Date and time 23/10/26 13:25:48
Build time 172.266 sec｜Game capacity 9.787KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Tetris</title>
    <style>
        canvas {
            border: 1px solid #000;
            background: #fff;
            display: block;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <script>

// Set up the canvas
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        const blockSize = 30; // width and height of each block
        const width = 10; // number of columns
        const height = 20; // number of rows
        canvas.width = blockSize * width;
        canvas.height = blockSize * height;
        document.body.appendChild(canvas);

// Create the grid
        const grid = [];
        for (let row = 0; row < height; row++) {
            grid[row] = Array.from(Array(width).fill(0));
        }

// Colors for different shapes
        const colors = [
            '#000', // empty cells
            '#FF0D72', // I shape (cyan)
            '#0DC2FF', // J shape (blue)
            '#0DFF72', // L shape (green)
            '#F538FF', // O shape (purple)
            '#FF8E0D', // S shape (orange)
            '#FFE138', // T shape (yellow)
            '#3877FF'  // Z shape (red)
        ];

// Tetromino shapes
        const tetrominos = [
            // I shape
            [
                [0, 1, 0, 0],
                [0, 1, 0, 0],
                [0, 1, 0, 0],
                [0, 1, 0, 0]
            ],
            // J shape
            [
                [0, 2, 0],
                [0, 2, 0],
                [2, 2, 0]
            ],
            // L shape
            [
                [0, 3, 0],
                [0, 3, 0],
                [0, 3, 3]
            ],
            // O shape
            [
                [4, 4],
                [4, 4]
            ],
            // S shape
            [
                [0, 5, 5],
                [5, 5, 0],
                [0, 0, 0]
            ],
            // T shape
            [
                [0, 6, 0],
                [6, 6, 6],
                [0, 0, 0]
            ],
            // Z shape
            [
                [7, 7, 0],
                [0, 7, 7],
                [0, 0, 0]
            ]
        ];

// Initialize variables
        let currentTetromino;
        let currentTetrominoColor;
        let currentX;
        let currentY;
        let score = 0;
        let gameOver = false;

// Function to draw a block on the canvas
        function drawBlock(x, y, color) {
            ctx.fillStyle = color;
            ctx.fillRect(x * blockSize, y * blockSize, blockSize, blockSize);
            ctx.strokeStyle = '#000';
            ctx.strokeRect(x * blockSize, y * blockSize, blockSize, blockSize);
        }

// Function to draw the grid
        function drawGrid() {
            for (let row = 0; row < height; row++) {
                for (let col = 0; col < width; col++) {
                    const block = grid[row][col];
                    drawBlock(col, row, colors[block]);
                }
            }
        }

// Function to rotate a tetromino
        function rotateTetromino(tetromino) {
            const rotatedTetro = [];
            const rows = tetromino.length;
            const cols = tetromino[0].length;

for (let row = 0; row < rows; row++) {
                rotatedTetro[row] = [];
                for (let col = 0; col < cols; col++) {
                    rotatedTetro[row][col] = tetromino[cols - col - 1][row];
                }
            }

return rotatedTetro;
        }

// Function to check if a tetromino is valid (within bounds and no collisions)
        function isValidMove(tetromino, newX, newY) {
            const rows = tetromino.length;
            const cols = tetromino[0].length;

for (let row = 0; row < rows; row++) {
                for (let col = 0; col < cols; col++) {
                    // Check if block is outside the grid bounds
                    if (newX + col < 0 || newX + col >= width ||
                        newY + row >= height) {
                        if (tetromino[row][col] !== 0) {
                            return false;
                        }
                    }

// Check for collisions with filled blocks in the grid
                    if (newY + row >= 0 && tetromino[row][col] !== 0) {
                        if (grid[newY + row][newX + col] !== 0) {
                            return false;
                        }
                    }
                }
            }

return true;
        }

// Function to place a tetromino into the grid
        function placeTetromino() {
            const rows = currentTetromino.length;
            const cols = currentTetromino[0].length;

for (let row = 0; row < rows; row++) {
                for (let col = 0; col < cols; col++) {
                    if (currentTetromino[row][col] !== 0) {
                        grid[currentY + row][currentX + col] = currentTetromino[row][col];
                    }
                }
            }
        }

// Function to clear filled rows and update the score
        function clearRows() {
            let rowsCleared = 0;

for (let row = height - 1; row >= 0; row--) {
                let rowFull = true;

for (let col = 0; col < width; col++) {
                    if (grid[row][col] === 0) {
                        rowFull = false;
                        break;
                    }
                }

if (rowFull) {
                    for (let r = row; r > 0; r--) {
                        for (let col = 0; col < width; col++) {
                            grid[r] = grid[r - 1];
                        }
                    }

rowsCleared++;
                    row++;
                }
            }

if (rowsCleared > 0) {
                score += 10 * Math.pow(2, rowsCleared - 1);
            }
        }

// Function to update the game state
        function update() {
            if (gameOver) {
                return;
            }

if (isValidMove(currentTetromino, currentX, currentY + 1)) {
                currentY++;
            } else {
                placeTetromino();
                clearRows();

// Check if game over (if new tetromino overlaps with existing blocks)
                if (!isValidMove(currentTetromino, currentX, currentY)) {
                    gameOver = true;
                    return;
                }

// Generate a new tetromino
                const tetrominoIndex = Math.floor(Math.random() * tetrominos.length);
                currentTetromino = tetrominos[tetrominoIndex];
                currentTetrominoColor = colors[tetrominoIndex];
                currentX = Math.floor((width - currentTetromino[0].length) / 2);
                currentY = 0;
            }
        }

// Function to handle keyboard events
        function handleKeyPress(event) {
            if (gameOver) {
                return;
            }

switch (event.keyCode) {
                case 37: // Left arrow
                    if (isValidMove(currentTetromino, currentX - 1, currentY)) {
                        currentX--;
                    }
                    break;
                case 38: // Up arrow
                    const rotatedTetro = rotateTetromino(currentTetromino);
                    if (isValidMove(rotatedTetro, currentX, currentY)) {
                        currentTetromino = rotatedTetro;
                    }
                    break;
                case 39: // Right arrow
                    if (isValidMove(currentTetromino, currentX + 1, currentY)) {
                        currentX++;
                    }
                    break;
                case 40: // Down arrow
                    if (isValidMove(currentTetromino, currentX, currentY + 1)) {
                        currentY++;
                    }
                    break;
            }
        }

// Function to draw the game state
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

drawGrid();

// Draw the current tetromino
            const rows = currentTetromino.length;
            const cols = currentTetromino[0].length;
            for (let row = 0; row < rows; row++) {
                for (let col = 0; col < cols; col++) {
                    if (currentTetromino[row][col] !== 0) {
                        drawBlock(currentX + col, currentY + row, currentTetrominoColor);
                    }
                }
            }

// Draw the score
            ctx.fillStyle = '#000';
            ctx.font = '20px Arial';
            ctx.fillText('Score: ' + score, 20, 40);

if (gameOver) {
                ctx.fillStyle = '#f00';
                ctx.font = '40px Arial';
                ctx.fillText('GAME OVER', canvas.width / 2 - 100, canvas.height / 2);
            }
        }

// Start the game
        function startGame() {
            currentTetromino = tetrominos[Math.floor(Math.random() * tetrominos.length)];
            currentTetrominoColor = colors[Math.floor(Math.random() * colors.length)];
            currentX = Math.floor((width - currentTetromino[0].length) / 2);
            currentY = 0;

setInterval(function () {
                update();
                draw();
            }, 1000 / 2);

window.addEventListener('keydown', handleKeyPress);
        }

// Call the startGame function to begin the game
        startGame();

</script>
</body>
</html>