AI game creator

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

No:50222

←

Prev Next

→

Tetris
Developer User21274｜Date and time 24/3/8 5:02:27
Build time 17.755 sec｜Game capacity 5.241KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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>
    canvas {
        display: block;
        margin: 0 auto;
        border: 2px solid black;
    }
</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 = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#00FFFF', '#FF00FF', '#FFA500'];

let board = Array.from({ length: ROWS }, () => Array(COLS).fill(''));
let currentPiece = generateRandomPiece();
let piecePosition = { x: 0, y: 0 };
let gameOver = false;

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBoard();
    drawPiece();
}

function generateRandomPiece() {
    const pieces = [
        {
            shape: [
                [1, 1],
                [1, 1]
            ],
            colorIndex: 0
        },
        {
            shape: [
                [1, 1, 1, 1]
            ],
            colorIndex: 1
        },
        {
            shape: [
                [1, 1, 1],
                [0, 1, 0]
            ],
            colorIndex: 2
        },
        {
            shape: [
                [1, 1],
                [1, 0],
                [1, 0]
            ],
            colorIndex: 3
        },
        {
            shape: [
                [1, 1],
                [0, 1],
                [0, 1]
            ],
            colorIndex: 4
        },
        {
            shape: [
                [1, 1, 1],
                [0, 0, 1]
            ],
            colorIndex: 5
        },
        {
            shape: [
                [1, 1, 1],
                [1, 0, 0]
            ],
            colorIndex: 6
        }
    ];
    return pieces[Math.floor(Math.random() * pieces.length)];
}

function moveLeft() {
    const newPiecePosition = { x: piecePosition.x - 1, y: piecePosition.y };
    if (isValidMove(newPiecePosition, currentPiece.shape)) {
        piecePosition = newPiecePosition;
    }
}

function moveRight() {
    const newPiecePosition = { x: piecePosition.x + 1, y: piecePosition.y };
    if (isValidMove(newPiecePosition, currentPiece.shape)) {
        piecePosition = newPiecePosition;
    }
}

function rotate() {
    const newPieceShape = currentPiece.shape[0].map((val, rowIndex) => currentPiece.shape.map(row => row[rowIndex]).reverse());
    if (isValidMove(piecePosition, newPieceShape)) {
        currentPiece.shape = newPieceShape;
    }
}

document.addEventListener('keydown', (e) => {
    if (gameOver) return;
    switch (e.key) {
        case 'ArrowDown':
            moveDown();
            break;
        case 'ArrowLeft':
            moveLeft();
            break;
        case 'ArrowRight':
            moveRight();
            break;
        case 'ArrowUp':
            rotate();
            break;
    }
    draw();
});

setInterval(() => {
    if (!gameOver) {
        moveDown();
        draw();
    }
}, 300);

draw();
</script>
</body>
</html>