Tetris's game | AI game creator

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

No:49669

35

Tetris
Developer User21121｜Date and time 24/3/6 2:03:43
Build time 24.241 sec｜Game capacity 4.198KB｜

→ 　

0　

0　

　
　
　
　

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

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #0B132B;
    }
    canvas {
        border: 2px solid white;
    }
</style>
</head>
<body>
<canvas width="300" height="600"></canvas>

<script>
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const blockSize = 30;
const boardWidth = 10;
const boardHeight = 20;
const colors = ["#F53855", "#FFBD12", "#0EAD69", "#48BEFF", "#FE654F", "#FFCF44", "#ED4C67"];

canvas.width = blockSize * boardWidth;
canvas.height = blockSize * boardHeight;

const board = [];
for (let i = 0; i < boardHeight; i++) {
    board.push(new Array(boardWidth).fill(0));
}

const pieces = [
    [[1, 1, 1, 1]], // I
    [[1, 1, 1], [0, 1, 0]], // T
    [[1, 1, 0], [0, 1, 1]], // Z
    [[0, 1, 1], [1, 1, 0]], // S
    [[1, 1, 1], [0, 0, 1]], // L
    [[1, 1, 1], [1, 0, 0]], // J
    [[1, 1], [1, 1]] // O
];

function drawBlock(x, y, color) {
    ctx.fillStyle = color;
    ctx.fillRect(x * blockSize, y * blockSize, blockSize, blockSize);
    ctx.strokeStyle = "#2C3A47";
    ctx.strokeRect(x * blockSize, y * blockSize, blockSize, blockSize);
}

function drawBoard() {
    for (let y = 0; y < boardHeight; y++) {
        for (let x = 0; x < boardWidth; x++) {
            if (board[y][x]) {
                drawBlock(x, y, colors[board[y][x] - 1]);
            }
        }
    }
}

function drawPiece(piece, x, y) {
    piece.forEach((row, yy) => {
        row.forEach((block, xx) => {
            if (block) {
                drawBlock(x + xx, y + yy, colors[pieces.indexOf(piece)]);
            }
        });
    });
}

function collide(board, piece, posX, posY) {
    for (let y = 0; y < piece.length; y++) {
        for (let x = 0; x < piece[y].length; x++) {
            if (piece[y][x] && (board[y + posY] && board[y + posY][x + posX]) !== 0) {
                return true;
            }
        }
    }
    return false;
}

function rotate(piece) {
    return piece[0].map((val, index) => piece.map((row) => row[index])).reverse();
}

let currentPiece = pieces[Math.floor(Math.random() * pieces.length)];
let currentX = Math.floor(boardWidth / 2) - Math.floor(currentPiece[0].length / 2);
let currentY = 0;
let gameOver = false;

function drop() {
    currentY++;
    if (collide(board, currentPiece, currentX, currentY)) {
        currentY--;
        merge(board, currentPiece, currentX, currentY);
        currentY = 0;
        currentX = Math.floor(boardWidth / 2) - Math.floor(currentPiece[0].length / 2);
        currentPiece = pieces[Math.floor(Math.random() * pieces.length)];
        if (collide(board, currentPiece, currentX, currentY)) {
            gameOver = true;
        }
    }
}

function merge(board, piece, posX, posY) {
    piece.forEach((row, y) => {
        row.forEach((block, x) => {
            if (block) {
                board[y + posY][x + posX] = pieces.indexOf(piece) + 1;
            }
        });
    });
    clearLines();
}

function clearLines() {
    for (let y = boardHeight - 1; y >= 0; y--) {
        if (board[y].every((val) => val !== 0)) {
            const row = board.splice(y, 1)[0].fill(0);
            board.unshift(row);
            y++;
        }
    }
}

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

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

function keyDownHandler(event) {
    if (event.key === 'ArrowLeft' && !collide(board, currentPiece, currentX - 1, currentY)) {
        currentX--;
    } else if (event.key === 'ArrowRight' && !collide(board, currentPiece, currentX + 1, currentY)) {
        currentX++;
    } else if (event.key === 'ArrowDown') {
        drop();
    } else if (event.key === 'ArrowUp') {
        const rotatedPiece = rotate(currentPiece);
        if (!collide(board, rotatedPiece, currentX, currentY)) {
            currentPiece = rotatedPiece;
        }
    }
}

document.addEventListener('keydown', keyDownHandler);

setInterval(() => {
    update();
    draw();
}, 500);

</script>

</body>
</html>