AI game creator

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

No:51211

146

←

Prev Next

→

Tetris
Developer User21489｜Date and time 24/3/11 9:04:37
Build time 19.67 sec｜Game capacity 4.655KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tetris Game</title>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }
    canvas {
        border: 1px solid black;
    }
</style>
</head>
<body>
<canvas width="300" height="600"></canvas>

const ROWS = 20;
    const COLS = 10;
    const BLOCK_SIZE = canvas.width / COLS;
    const board = Array.from({ length: ROWS }, () => Array(COLS).fill(0));

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

const colors = [
        '#2C3E50',
        '#E74C3C',
        '#F39C12',
        '#FEFEFE',
        '#3498DB',
        '#9B59B6',
        '#1ABC9C'
    ];

let currentPiece = randomPiece();
    let pieceRow = 0;
    let pieceCol = Math.floor(COLS / 2) - 1;

let gameOver = false;

function randomPiece() {
        const idx = Math.floor(Math.random() * pieces.length);
        return {
            piece: pieces[idx],
            color: colors[idx]
        }
    }

function drawBlock(row, col, color) {
        ctx.fillStyle = color;
        ctx.fillRect(col * BLOCK_SIZE, row * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
        ctx.strokeRect(col * BLOCK_SIZE, row * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
    }

function moveDown() {
        pieceRow++;
        if (checkCollision()) {
            pieceRow--;
            mergePiece();
            clearLines();

currentPiece = randomPiece();
            pieceRow = 0;
            pieceCol = Math.floor(COLS / 2) - 1;

if (checkCollision()) {
                gameOver = true;
            }
        }
    }

function moveLeft() {
        pieceCol--;
        if (checkCollision()) {
            pieceCol++;
        }
    }

function moveRight() {
        pieceCol++;
        if (checkCollision()) {
            pieceCol--;
        }
    }

function update() {
        if (!gameOver) {
            moveDown();
        } else {
            alert("Game Over!");
        }
    }

function handleKeyPress(event) {
        switch (event.key) {
            case "ArrowLeft":
                moveLeft();
                break;
            case "ArrowRight":
                moveRight();
                break;
            case "ArrowUp":
                rotatePiece();
                break;
            case "ArrowDown":
                moveDown();
                break;
        }
    }

document.addEventListener('keydown', handleKeyPress);

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