AI game creator

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

No:25706

116

←

Prev Next

→

Tetris
Developer User12635｜Date and time 23/11/24 3:18:08
Build time 233.995 sec｜Game capacity 9.8KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #000;
            overflow: hidden;
        }

canvas {
            border: 1px solid #fff;
        }
    </style>
</head>

<body>
    <canvas id="tetrisCanvas" width="240" height="400"></canvas>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const canvas = document.getElementById('tetrisCanvas');
            const context = canvas.getContext('2d');

const blockSize = 20;
            const columnCount = canvas.width / blockSize;
            const rowCount = canvas.height / blockSize;

const shapes = [
                [[1, 1, 1, 1]], // I - Line
                [[0, 1, 0], [1, 1, 1]], // T - T-Shape
                [[1, 1], [1, 1]], // O - Square
                [[0, 1, 1], [1, 1, 0]], // Z - Z-Shape
                [[1, 1, 0], [0, 1, 1]], // S - S-Shape
                [[1, 1, 1], [0, 0, 1]], // J - J-Shape
                [[1, 1, 1], [1, 0, 0]] // L - L-Shape
            ];

const colors = [
                '#008cff', // I - Line
                '#ff008c', // T - T-Shape
                '#ffd500', // O - Square
                '#00ff1e', // Z - Z-Shape
                '#ee00ff', // S - S-Shape
                '#ff9000', // J - J-Shape
                '#00f6ff' // L - L-Shape
            ];

let grid = new Array(rowCount).fill(null).map(() => new Array(columnCount).fill(0));
            let currentShape;
            let currentShapeIndex;
            let currentX;
            let currentY;

function draw() {
                context.fillStyle = '#000';
                context.fillRect(0, 0, canvas.width, canvas.height);

drawGrid();
                drawShape();

requestAnimationFrame(draw);
            }

function drawGrid() {
                for (let row = 0; row < rowCount; row++) {
                    for (let col = 0; col < columnCount; col++) {
                        if (grid[row][col]) {
                            const colorIndex = grid[row][col] - 1;
                            context.fillStyle = colors[colorIndex];
                            context.fillRect(col * blockSize, row * blockSize, blockSize, blockSize);

context.strokeStyle = '#000';
                            context.strokeRect(col * blockSize, row * blockSize, blockSize, blockSize);
                        }
                    }
                }
            }

function drawShape() {
                if (currentShape) {
                    for (let row = 0; row < currentShape.length; row++) {
                        for (let col = 0; col < currentShape[row].length; col++) {
                            if (currentShape[row][col]) {
                                const colorIndex = currentShapeIndex - 1;
                                const x = currentX + col;
                                const y = currentY + row;
                                context.fillStyle = colors[colorIndex];
                                context.fillRect(x * blockSize, y * blockSize, blockSize, blockSize);

context.strokeStyle = '#000';
                                context.strokeRect(x * blockSize, y * blockSize, blockSize, blockSize);
                            }
                        }
                    }
                }
            }

function collide() {
                for (let row = 0; row < currentShape.length; row++) {
                    for (let col = 0; col < currentShape[row].length; col++) {
                        // Skip if shape cell is empty
                        if (!currentShape[row][col]) {
                            continue;
                        }

const x = currentX + col;
                        const y = currentY + row;

// Check if shape cell is outside the canvas bounds
                        if (x < 0 || x >= columnCount || y >= rowCount) {
                            return true;
                        }

// Check if shape cell collides with existing grid cells
                        if (y >= 0 && grid[y][x]) {
                            return true;
                        }
                    }
                }

return false;
            }

function rotate() {
                const rotatedShape = new Array(currentShape[0].length).fill(null).map(() => new Array(currentShape.length).fill(0));

for (let row = 0; row < currentShape.length; row++) {
                    for (let col = 0; col < currentShape[row].length; col++) {
                        rotatedShape[col][currentShape.length - 1 - row] = currentShape[row][col];
                    }
                }

if (!collideWithRotatedShape(rotatedShape)) {
                    currentShape = rotatedShape;
                }
            }

function collideWithRotatedShape(rotatedShape) {
                for (let row = 0; row < rotatedShape.length; row++) {
                    for (let col = 0; col < rotatedShape[row].length; col++) {
                        // Skip if rotated shape cell is empty
                        if (!rotatedShape[row][col]) {
                            continue;
                        }

const x = currentX + col;
                        const y = currentY + row;

// Check if rotated shape cell is outside the canvas bounds
                        if (x < 0 || x >= columnCount || y >= rowCount) {
                            return true;
                        }

// Check if rotated shape cell collides with existing grid cells
                        if (y >= 0 && grid[y][x]) {
                            return true;
                        }
                    }
                }

return false;
            }

function moveLeft() {
                currentX--;

if (collide()) {
                    currentX++;
                }
            }

function moveRight() {
                currentX++;

if (collide()) {
                    currentX--;
                }
            }

function moveDown() {
                currentY++;

if (collide()) {
                    currentY--;

merge();

sweepRows();

if (gameOver()) {
                        reset();
                    } else {
                        spawnShape();
                    }
                }
            }

function sweepRows() {
                outer: for (let row = rowCount - 1; row >= 0; row--) {
                    for (let col = 0; col < columnCount; col++) {
                        if (!grid[row][col]) {
                            continue outer;
                        }
                    }

grid.splice(row, 1);
                    grid.unshift(new Array(columnCount).fill(0));
                }
            }

function gameOver() {
                for (let col = 0; col < columnCount; col++) {
                    if (grid[0][col]) {
                        return true;
                    }
                }

return false;
            }

function spawnShape() {
                const shapeIndex = Math.floor(Math.random() * shapes.length);
                const shape = shapes[shapeIndex];
                const x = Math.floor((columnCount - shape[0].length) / 2);
                const y = -shape.length;

currentShape = shape;
                currentShapeIndex = shapeIndex + 1;
                currentX = x;
                currentY = y;
            }

function reset() {
                grid = new Array(rowCount).fill(null).map(() => new Array(columnCount).fill(0));
                currentShape = null;
                currentShapeIndex = null;
                currentX = null;
                currentY = null;
            }

spawnShape();
            draw();

document.addEventListener('keydown', handleKeyDown);
        });
    </script>
</body>

</html>