AI game creator

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

No:27429

←

Prev Next

→

Tetris
Developer User13247｜Date and time 23/12/7 1:45:50
Build time 117.52 sec｜Game capacity 7.599KB｜

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>
        * { box-sizing: border-box; }

body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

#canvas {
            display: block;
            background: #000;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

h1 {
            color: #FFF;
            text-align: center;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="300" height="600"></canvas>

const shapeI = [
            [0, 0, 0, 0],
            [1, 1, 1, 1],
            [0, 0, 0, 0],
            [0, 0, 0, 0]
        ];

const shapeJ = [
            [2, 0, 0],
            [2, 2, 2],
            [0, 0, 0]
        ];

const shapeL = [
            [0, 0, 3],
            [3, 3, 3],
            [0, 0, 0]
        ];

const shapeO = [
            [4, 4],
            [4, 4]
        ];

const shapeS = [
            [0, 5, 5],
            [5, 5, 0],
            [0, 0, 0]
        ];

const shapeT = [
            [0, 6, 0],
            [6, 6, 6],
            [0, 0, 0]
        ];

const shapeZ = [
            [7, 7, 0],
            [0, 7, 7],
            [0, 0, 0]
        ];

const shapes = [shapeI, shapeJ, shapeL, shapeO, shapeS, shapeT, shapeZ];

const colors = ['cyan', 'blue', 'orange', 'yellow', 'green', 'purple', 'red'];

let score = 0;

// Create grid for tetris game
        const createGrid = () => {
            let grid = []

for (let row = 0; row < rows; row++) {
                grid[row] = [];
                for (let column = 0; column < columns; column++) {
                    grid[row][column] = 0;
                }
            }

return grid;
        }

let grid = createGrid();

// Draw grid
        const drawGrid = () => {
            for (let row = 0; row < rows; row++) {
                for (let column = 0; column < columns; column++) {
                    drawSquare(column, row, grid[row][column]);
                }
            }
        }

// Draw square
        const drawSquare = (x, y, colorIndex) => {
            ctx.fillStyle = colors[colorIndex];
            ctx.fillRect(x * scale, y * scale, scale, scale);
            ctx.strokeStyle = '#000';
            ctx.strokeRect(x * scale, y * scale, scale, scale);
        }

// Create random tetromino shape
        const getRandomShape = () => {
            const shapeIndex = Math.floor(Math.random() * shapes.length);
            return shapes[shapeIndex];
        }

let tetromino = getRandomShape();
        let tetrominoX = Math.floor(columns / 2) - Math.floor(tetromino[0].length / 2);
        let tetrominoY = 0;

// Draw tetromino
        const drawTetromino = () => {
            for (let row = 0; row < tetromino.length; row++) {
                for (let column = 0; column < tetromino[row].length; column++) {
                    if (tetromino[row][column]) {
                        drawSquare(tetrominoX + column, tetrominoY + row, tetromino[row][column]);
                    }
                }
            }
        }

// Check collision
        const checkCollision = (x, y, shape) => {
            for (let row = 0; row < shape.length; row++) {
                for (let column = 0; column < shape[row].length; column++) {
                    if (!shape[row][column]) {
                        continue;
                    }

let newX = tetrominoX + column + x;
                    let newY = tetrominoY + row + y;

if (newX < 0 || newX >= columns || newY >= rows) {
                        return true;
                    }

if (newY < 0) {
                        continue;
                    }

if (grid[newY][newX]) {
                        return true;
                    }
                }
            }

return false;
        }

// Merge tetromino with grid
        const mergeTetromino = () => {
            for (let row = 0; row < tetromino.length; row++) {
                for (let column = 0; column < tetromino[row].length; column++) {
                    if (tetromino[row][column]) {
                        grid[tetrominoY + row][tetrominoX + column] = tetromino[row][column];
                    }
                }
            }
        }

// Clear rows
        const clearRows = () => {
            for (let row = rows - 1; row >= 0; row--) {
                let rowFull = true;

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

if (rowFull) {
                    grid.splice(row, 1);
                    grid.unshift(Array(columns).fill(0));
                    score += 10;
                }
            }
        }

// Handle key events
        const handleKeyEvents = (event) => {
            if (event.key === 'ArrowRight') {
                if (!checkCollision(1, 0, tetromino)) {
                    tetrominoX++;
                }
            } else if (event.key === 'ArrowLeft') {
                if (!checkCollision(-1, 0, tetromino)) {
                    tetrominoX--;
                }
            } else if (event.key === 'ArrowDown') {
                if (!checkCollision(0, 1, tetromino)) {
                    tetrominoY++;
                }
            } else if (event.key === 'ArrowUp') {
                rotateTetromino();
            }
        }

// Rotate tetromino
        const rotateTetromino = () => {
            const previousTetromino = tetromino;
            tetromino = tetromino[0].map((_, index) => tetromino.map(row => row[index])).reverse();

if (checkCollision(0, 0, tetromino)) {
                tetromino = previousTetromino;
            }
        }

// Game loop
        const gameLoop = () => {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

if (!checkCollision(0, 1, tetromino)) {
                tetrominoY++;
            } else {
                mergeTetromino();
                clearRows();
                tetromino = getRandomShape();
                tetrominoX = Math.floor(columns / 2) - Math.floor(tetromino[0].length / 2);
                tetrominoY = 0;

if (checkCollision(0, 0, tetromino)) {
                    // Game over
                    ctx.fillStyle = '#FFF';
                    ctx.font = '30px Arial';
                    ctx.fillText("Game Over", 80, canvas.height / 2);
                    clearInterval(interval);
                }
            }

drawGrid();
            drawTetromino();

ctx.fillStyle = '#FFF';
            ctx.font = '20px Arial';
            ctx.fillText(`Score: ${score}`, 10, 30);
        }

// Start the game loop
        const interval = setInterval(gameLoop, 500);

// Event listener for keydown
        window.addEventListener('keydown', handleKeyEvents);
    </script>
</body>
</html>