AI game creator

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

No:31560

←

Prev Next

→

Tetris
Developer User15177｜Date and time 23/12/27 13:50:52
Build time 53.332 sec｜Game capacity 7.773KB｜

Script

Sure! Here's a simple implementation of Tetris as a single HTML file using JavaScript:

You can copy this code into an HTML file and open it in your web browser to play Tetris. The game can be controlled using arrow keys for left, right, down movement, and the up arrow key to rotate the tetrominoes. The game ends when the stack of tetrominoes reaches the top of the screen. The tetrominoes are represented with simple blocks in different shapes. Enjoy playing!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

Sure! Here's a simple implementation of Tetris as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tetris</title>
    <style>
        canvas {
            border: 1px solid #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="tetrisCanvas"></canvas>

// Tetris grid
        const grid = [];
        for (let row = 0; row < rows; row++) {
            grid[row] = [];
            for (let column = 0; column < columns; column++) {
                grid[row][column] = { state: 0 };
            }
        }

// Initial tetromino position
        let tetromino = {
            x: columns / 2 - 1,
            y: 0,
            shape: [[1, 1, 1], [0, 1, 0]], // T-shaped tetromino
        };

// Draw tetromino
        function drawTetromino() {
            for (let row = 0; row < tetromino.shape.length; row++) {
                for (let column = 0; column < tetromino.shape[row].length; column++) {
                    if (tetromino.shape[row][column]) {
                        const x = tetromino.x + column;
                        const y = tetromino.y + row;
                        drawBlock(x, y, tetromino);
                    }
                }
            }
        }

// Draw grid
        function drawGrid() {
            for (let row = 0; row < grid.length; row++) {
                for (let column = 0; column < grid[row].length; column++) {
                    const block = grid[row][column];
                    drawBlock(column, row, block);
                }
            }
        }

// Draw single block
        function drawBlock(x, y, block) {
            context.fillStyle = block.state ? '#000' : '#FFF';
            context.fillRect(x * blockSize, y * blockSize, blockSize, blockSize);
            context.strokeStyle = '#000';
            context.strokeRect(x * blockSize, y * blockSize, blockSize, blockSize);
        }

// Check if tetromino collides with grid or borders
        function hasCollision() {
            for (let row = 0; row < tetromino.shape.length; row++) {
                for (let column = 0; column < tetromino.shape[row].length; column++) {
                    if (
                        tetromino.shape[row][column] &&
                        (tetromino.y + row >= rows ||
                        tetromino.x + column < 0 ||
                        tetromino.x + column >= columns ||
                        grid[tetromino.y + row][tetromino.x + column].state)
                    ) {
                        return true;
                    }
                }
            }
            
            return false;
        }

// Place tetromino in grid
        function placeTetromino() {
            for (let row = 0; row < tetromino.shape.length; row++) {
                for (let column = 0; column < tetromino.shape[row].length; column++) {
                    if (tetromino.shape[row][column]) {
                        const x = tetromino.x + column;
                        const y = tetromino.y + row;
                        grid[y][x].state = 1;
                    }
                }
            }
        }

// Remove filled rows
        function removeRows() {
            let rowsCleared = 0;
            for (let row = rows - 1; row >= 0; row--) {
                if (grid[row].every(block => block.state)) {
                    grid.splice(row, 1);
                    rowsCleared++;
                }
            }
            
            while (rowsCleared > 0) {
                grid.unshift(Array(columns).fill({ state: 0 }));
                rowsCleared--;
            }
        }

// Move tetromino down
        function moveDown() {
            tetromino.y++;
            if (hasCollision()) {
                tetromino.y--;
                placeTetromino();
                removeRows();
                tetromino = generateTetromino();
                if (hasCollision()) {
                    // Game over
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    context.fillStyle = '#000';
                    context.font = '48px Arial';
                    context.fillText('Game Over', canvas.width / 2 - 100, canvas.height / 2);
                    return;
                }
            }
            draw();
        }

// Move tetromino left
        function moveLeft() {
            tetromino.x--;
            if (hasCollision()) {
                tetromino.x++;
            }
            draw();
        }

// Move tetromino right
        function moveRight() {
            tetromino.x++;
            if (hasCollision()) {
                tetromino.x--;
            }
            draw();
        }

// Rotate tetromino
        function rotate() {
            const previousShape = tetromino.shape;
            tetromino.shape = tetromino.shape[0].map((_, index) => tetromino.shape.map(row => row[index])).reverse(); // Rotate clockwise
            if (hasCollision()) {
                tetromino.shape = previousShape;
            }
            draw();
        }

// Generate random tetromino
        function generateTetromino() {
            const shapes = [
                [[1, 1, 1, 1]], // I-shaped tetromino
                [[1, 1], [1, 1]], // O-shaped tetromino
                [[1, 1, 1], [0, 0, 1]], // L-shaped tetromino
                [[1, 1, 1], [1, 0, 0]], // J-shaped tetromino
                [[1, 1, 0], [0, 1, 1]], // Z-shaped tetromino
                [[0, 1, 1], [1, 1, 0]], // S-shaped tetromino
                [[1, 1, 1], [0, 1, 0]], // T-shaped tetromino
            ];
            const randomIndex = Math.floor(Math.random() * shapes.length);
            return {
                x: Math.floor(columns / 2 - shapes[randomIndex][0].length / 2),
                y: 0,
                shape: shapes[randomIndex],
            };
        }

// Game loop
        function gameLoop() {
            if (!hasCollision()) {
                moveDown();
            }
            setTimeout(gameLoop, 500); // Adjust the interval speed here
        }

// Handle keyboard input
        window.addEventListener('keydown', (event) => {
            switch (event.key) {
                case 'ArrowLeft':
                    moveLeft();
                    break;
                case 'ArrowRight':
                    moveRight();
                    break;
                case 'ArrowDown':
                    moveDown();
                    break;
                case 'ArrowUp':
                    rotate();
                    break;
            }
        });

// Start the game
        function startGame() {
            gameLoop();
        }

// Draw the game
        function draw() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawGrid();
            drawTetromino();
        }

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