AI game creator

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

No:45816

←

Prev Next

→

make tetris
Developer User19412｜Date and time 24/2/21 11:11:23
Build time 17.758 sec｜Game capacity 5.595KB｜

Script

←

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>
        body { 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            height: 100vh; 
            margin: 0;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        canvas { 
            border: 3px solid #333;
        }
    </style>
</head>
<body>
    <canvas id="tetrisCanvas" width="300" height="600"></canvas>
    <script>
        const canvas = document.getElementById('tetrisCanvas');
        const ctx = canvas.getContext('2d');

const ROWS = 20;
        const COLS = 10;
        const BLOCK_SIZE = 30;
        const COLORS = [
            '#f00', '#0f0', '#00f', '#ff0', '#0ff', '#f0f', '#000'
        ];
        const SHAPES = [
            [[1, 1, 1, 1]],
            [[1, 1], [1, 1]],
            [[1, 1, 0], [0, 1, 1]],
            [[0, 1, 1], [1, 1, 0]],
            [[1, 1, 1], [0, 1, 0]],
            [[1, 1, 1], [1, 0, 0]],
            [[1, 1, 1], [0, 0, 1]]
        ];

let board = Array.from({ length: ROWS }, () => Array(COLS).fill(null));
        let current = randomShape();
        let score = 0;
        let gameOver = false;

function randomShape() {
            const idx = Math.floor(Math.random() * SHAPES.length);
            return {
                shape: SHAPES[idx],
                color: COLORS[idx],
                row: 0,
                col: Math.floor(COLS / 2) - Math.floor(SHAPES[idx][0].length / 2)
            };
        }

function drawBlock(x, y, color) {
            ctx.fillStyle = color;
            ctx.fillRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
            ctx.strokeStyle = '#333';
            ctx.strokeRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
        }

function rotateShape(shape) {
            return shape[0].map((_, i) => shape.map(row => row[i])).reverse();
        }

function update() {
            if (!gameOver) {
                drop();
            }
        }

function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawCurrent();
            drawBoard();
            ctx.fillStyle = '#333';
            ctx.fillText('Score: ' + score, 10, 20);
            if (gameOver) {
                ctx.fillText('Game Over!', 10, canvas.height / 2);
            }
        }

document.addEventListener('keydown', keyDownHandler);

setInterval(() => {
            update();
            draw();
        }, 500);
    </script>
</body>
</html>
```