AI game creator

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

No:45020

←

Prev Next

→

Tetris
Developer User19546｜Date and time 24/2/20 0:07:01
Build time 21.597 sec｜Game capacity 4.996KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html lang="zh">

<body>
    <canvas id="tetrisCanvas" width="320" height="480"></canvas>
    <script>
        const canvas = document.getElementById("tetrisCanvas");
        const ctx = canvas.getContext("2d");

const ROWS = 20;
        const COLS = 10;
        const BLOCK_SIZE = 24;
        const EMPTY = 'white';

const tetrominos = [
            { color: 'cyan', shape: [[1, 1, 1, 1]], },
            { color: 'blue', shape: [[1, 1, 1], [0, 1, 0]], },
            { color: 'orange', shape: [[1, 1, 1], [1, 0, 0]], },
            { color: 'yellow', shape: [[1, 1], [1, 1]], },
            { color: 'green', shape: [[0, 1, 1], [1, 1, 0]], },
            { color: 'purple', shape: [[1, 1, 0], [0, 1, 1]], },
            { color: 'red', shape: [[0, 1, 0], [1, 1, 1]], },
        ];

let board = Array.from({ length: ROWS }, () => Array(COLS).fill(EMPTY));
        let currentPiece = getRandomPiece();
        let currentX = 0;
        let currentY = 0;

function getRandomPiece() {
            const randomIdx = Math.floor(Math.random() * tetrominos.length);
            return tetrominos[randomIdx];
        }

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

drawBoard();
            drawPiece();
        }

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

function moveSide(dir) {
            if (isValidMove(dir, 0)) {
                currentX += dir;
                draw();
            }
        }

function rotatePiece() {
            const rotShape = currentPiece.shape[0].map((_, i) => currentPiece.shape.map(row => row[i]).reverse());
            if (isValidMove(0, 0, rotShape)) {
                currentPiece.shape = rotShape;
                draw();
            }
        }

function isValidMove(dx, dy, pieceShape = currentPiece.shape) {
            let newPieceX = currentX + dx;
            let newPieceY = currentY + dy;

for (let i = 0; i < pieceShape.length; i++) {
                for (let j = 0; j < pieceShape[i].length; j++) {
                    if (pieceShape[i][j] && (board[newPieceY + i] === undefined || board[newPieceY + i][newPieceX + j] !== EMPTY)) {
                        return false;
                    }
                }
            }

return true;
        }

document.addEventListener('keydown', (e) => {
            switch (e.keyCode) {
                case 37: // Left arrow
                    moveSide(-1);
                    break;
                case 39: // Right arrow
                    moveSide(1);
                    break;
                case 40: // Down arrow
                    moveDown();
                    break;
                case 32: // Space bar
                    rotatePiece();
                    break;
            }
        });

setInterval(moveDown, 1000);

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

</html>
```