AI game creator

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

No:33668

←

Prev Next

→

Tetris
Developer User15234｜Date and time 24/1/6 2:02:23
Build time 50.108 sec｜Game capacity 6.44KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Tetris Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="tetrisCanvas" width="400" height="600"></canvas>

const ROWS = 20;
            const COLS = 10;
            const BLOCK_SIZE = 30;

const board = [];
            for (let row = 0; row < ROWS; row++) {
                board[row] = [];
                for (let col = 0; col < COLS; col++) {
                    board[row][col] = 0;
                }
            }

const shapes = [
                [[1, 1, 1, 1]],
                [[1, 1], [1, 1]],
                [[1, 1, 0], [0, 1, 1]],
                [[0, 1, 1], [1, 1, 0]],
                [[1, 1, 1], [0, 1, 0]],
                [[1, 1, 1], [1, 0, 0]],
                [[1, 1, 1], [0, 0, 1]]
            ];

const colors = ["#FF1919", "#FF8C00", "#FFFF00", "#00FF00", "#00FFFF", "#0000FF", "#8B00FF"];

let currentShape = getRandomShape();
            let currentShapeX = 4;
            let currentShapeY = 0;
            let score = 0;
            let gameOver = false;

function drawSquare(x, y, color) {
                context.fillStyle = color;
                context.fillRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
                context.strokeStyle = "#000";
                context.strokeRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
            }

function getRandomShape() {
                const shapeIndex = Math.floor(Math.random() * shapes.length);
                return shapes[shapeIndex];
            }

function rotateShape() {
                const copyShape = currentShape;
                currentShape = currentShape[0].map((_, index) => currentShape.map(row => row[index])).reverse();
                if (collide()) {
                    currentShape = copyShape;
                }
            }

function moveShape(dX, dY) {
                currentShapeX += dX;
                currentShapeY += dY;
                if (collide()) {
                    currentShapeX -= dX;
                    currentShapeY -= dY;
                }
            }

function removeCompletedRows() {
                let rowsToRemove = [];
                for (let row = 0; row < ROWS; row++) {
                    if (board[row].every(square => square !== 0)) {
                        rowsToRemove.push(row);
                    }
                }

if (rowsToRemove.length > 0) {
                    rowsToRemove.forEach(row => {
                        board.splice(row, 1);
                        board.unshift(new Array(COLS).fill(0));
                    });

score += rowsToRemove.length * 100;
                }
            }

function gameOverCheck() {
                if (board[0].some(square => square !== 0)) {
                    gameOver = true;
                }
            }

function drawScore() {
                context.fillStyle = "#000";
                context.font = "20px Arial";
                context.fillText("Score: " + score, 20, 40);
            }

function drawGameOver() {
                context.fillStyle = "#000";
                context.font = "40px Arial";
                context.fillText("Game Over", 90, canvas.height / 2);
            }

function gameLoop() {
                if (!gameOver) {
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    drawBoard();
                    drawShape();
                    removeCompletedRows();
                    drawScore();
                    moveShape(0, 1);
                    gameOverCheck();
                } else {
                    drawGameOver();
                }

requestAnimationFrame(gameLoop);
            }

gameLoop();