テトリス's game | AI game creator

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

No:51439

132

テトリス
Developer User21525｜Date and time 24/3/12 7:58:43
Build time 19.708 sec｜Game capacity 5.611KB｜

→ 　

0　

0　

　
　
　
　

[PR]現在の欲しいものランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
    <title>Tetris Game</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px 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 scale = 30; // Each block size

const board = Array.from({ length: 20 }, () => Array(10).fill(0));
        let score = 0;
        let gameOver = false;

const colors = [
            '#000000',
            '#FF8C00',
            '#FF1493',
            '#00BFFF',
            '#32CD32',
            '#800080',
            '#FFD700',
            '#A52A2A'
        ];

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

let currentPiece = getRandomPiece();
        let pieceX = 3;
        let pieceY = 0;

const moveDown = () => {
            pieceY++;
            if (collide()) {
                pieceY--;
                placePiece();
                currentPiece = getRandomPiece();
                pieceX = 3;
                pieceY = 0;
                if (collide()) {
                    gameOver = true;
                }
            }
            if (!gameOver) {
                update();
            }
        };

const moveLeft = () => {
            pieceX--;
            if (collide()) {
                pieceX++;
            }
            update();
        };

const moveRight = () => {
            pieceX++;
            if (collide()) {
                pieceX--;
            }
            update();
        };

const rotate = () => {
            const newPiece = [];
            for (let y = 0; y < currentPiece[0].length; y++) {
                newPiece.push(currentPiece.map(row => row[y]).reverse());
            }
            if (!collide(newPiece)) {
                currentPiece = newPiece;
            }
            update();
        };

const getRandomPiece = () => {
            const randomNumber = Math.floor(Math.random() * pieces.length);
            return pieces[randomNumber];
        };

const collide = (piece = currentPiece, x = pieceX, y = pieceY) => {
            for (let row = 0; row < piece.length; row++) {
                for (let col = 0; col < piece[0].length; col++) {
                    if (piece[row][col] && (board[y + row] && board[y + row][x + col]) !== 0) {
                        return true;
                    }
                }
            }
            return false;
        };

const placePiece = () => {
            for (let row = 0; row < currentPiece.length; row++) {
                for (let col = 0; col < currentPiece[0].length; col++) {
                    if (currentPiece[row][col]) {
                        board[pieceY + row][pieceX + col] = currentPiece[row][col];
                    }
                }
            }
            clearRows();
        };

const clearRows = () => {
            let rowCount = 0;
            for (let row = 0; row < board.length; row++) {
                if (board[row].every(cell => cell !== 0)) {
                    board.splice(row, 1);
                    board.unshift(Array(10).fill(0));
                    rowCount++;
                }
            }
            score += rowCount * 10;
        };

const update = () => {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

drawBoard();
            drawPiece();

if (!gameOver) {
                drawScore();
            }
        };

const drawBoard = () => {
            board.forEach((row, y) => {
                row.forEach((cell, x) => {
                    if (cell !== 0) {
                        ctx.fillStyle = colors[cell - 1];
                        ctx.fillRect(x * scale, y * scale, scale, scale);
                    }
                });
            });
        };

const drawPiece = () => {
            currentPiece.forEach((row, y) => {
                row.forEach((cell, x) => {
                    if (cell) {
                        ctx.fillStyle = colors[cell - 1];
                        ctx.fillRect((pieceX + x) * scale, (pieceY + y) * scale, scale, scale);
                    }
                });
            });
        };

const drawScore = () => {
            ctx.fillStyle = '#000';
            ctx.font = '20px Arial';
            ctx.fillText(`Score: ${score}`, 10, 30);
        };

document.addEventListener('keydown', event => {
            if (event.keyCode === 37) {
                moveLeft();
            } else if (event.keyCode === 39) {
                moveRight();
            } else if (event.keyCode === 40) {
                moveDown();
            } else if (event.keyCode === 38) {
                rotate();
            }
        });

const updateInterval = setInterval(moveDown, 1000);

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