AI game creator

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

No:26878

←

Prev Next

→

Tetris
Developer User13305｜Date and time 23/12/3 0:47:48
Build time 131.91 sec｜Game capacity 6.615KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Tetris</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="tetrisCanvas" width="200" height="400"></canvas>

let tetriminos = [
            [[1, 1, 1, 1]],  // I
            [[1, 1], [1, 1]],  // O
            [[1, 1, 0], [0, 1, 1]],  // Z
            [[0, 1, 1], [1, 1, 0]],  // S
            [[1, 1, 1], [0, 1, 0]],  // T
            [[1, 1], [0, 1], [0, 1]],  // L
            [[1, 1], [1, 0], [1, 0]]  // J
        ];
        const tetriminoCount = tetriminos.length;
        let currentTetrimino = generateNewTetrimino();
        let tetriminoX = 4;
        let tetriminoY = 0;
        let score = 0;
        let gameover = false;

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

function generateNewTetrimino() {
            const randomIndex = Math.floor(Math.random() * tetriminoCount);
            return tetriminos[randomIndex];
        }

function moveDown() {
            if (isMoveValid(tetriminoX, tetriminoY + 1, currentTetrimino)) {
                tetriminoY++;
            } else {
                mergeTetrimino();
                removeLines();
                currentTetrimino = generateNewTetrimino();
                tetriminoX = 4;
                tetriminoY = 0;

if (!isMoveValid(tetriminoX, tetriminoY, currentTetrimino)) {
                    gameover = true;
                }
            }
        }

function moveRight() {
            if (isMoveValid(tetriminoX + 1, tetriminoY, currentTetrimino)) {
                tetriminoX++;
            }
        }

function moveLeft() {
            if (isMoveValid(tetriminoX - 1, tetriminoY, currentTetrimino)) {
                tetriminoX--;
            }
        }

function removeLines() {
            for (let row = rowCount - 1; row >= 0; row--) {
                let isLineComplete = true;
                for (let col = 0; col < colCount; col++) {
                    if (grid[col][row] === 0) {
                        isLineComplete = false;
                        break;
                    }
                }

if (isLineComplete) {
                    for (let y = row; y > 0; y--) {
                        for (let col = 0; col < colCount; col++) {
                            grid[col][y] = grid[col][y - 1];
                        }
                    }
                    score += 10;
                }
            }
        }

function isMoveValid(x, y, tetrimino) {
            for (let row = 0; row < tetrimino.length; row++) {
                for (let col = 0; col < tetrimino[row].length; col++) {
                    if (tetrimino[row][col]) {
                        let newX = x + col;
                        let newY = y + row;

if (newX < 0 || newX >= colCount || newY >= rowCount ||
                            (newY >= 0 && grid[newX][newY])) {
                            return false;
                        }
                    }
                }
            }
            return true;
        }

function drawScore() {
            ctx.font = "20px Arial";
            ctx.fillStyle = "black";
            ctx.fillText("Score: " + score, 10, 30);
        }

function drawGameOver() {
            ctx.font = "30px Arial";
            ctx.fillStyle = "red";
            ctx.fillText("Game Over", 50, canvas.height / 2);
        }

setInterval(update, 1000/2);  // 0.5 second
        document.addEventListener("keydown", function (event) {
            if (event.key === "ArrowUp") {
                rotateTetrimino();
            } else if (event.key === "ArrowRight") {
                moveRight();
            } else if (event.key === "ArrowLeft") {
                moveLeft();
            } else if (event.key === "ArrowDown") {
                moveDown();
            }
        });
    </script>
</body>
</html>