AI game creator

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

No:13269

←

Prev Next

→

Tetris
Developer User5841｜Date and time 23/8/27 18:48:46
Build time 32.839 sec｜Game capacity 6.9KB｜

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>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #000;
        }

canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="tetrisCanvas"></canvas>

const scale = 20;
            const rows = canvas.height / scale;
            const columns = canvas.width / scale;

let score = 0;

const colors = ["#000", "#f00", "#0f0", "#00f", "#f0f", "#ff0", "#ff8c00", "#0ff"];

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

function createMatrix(rows, columns) {
                const matrix = [];
                while (rows--) {
                    matrix.push(new Array(columns).fill(0));
                }
                return matrix;
            }

function rotate(matrix) {
                const transposedMatrix = matrix.map((_, index) =>
                    matrix.map(column => column[index])
                );
                return transposedMatrix.map(row => row.reverse());
            }

function clearLines() {
                outer: for (let rowIndex = playfield.length - 1; rowIndex >= 0; rowIndex--) {
                    for (let columnIndex = 0; columnIndex < playfield[rowIndex].length; columnIndex++) {
                        if (playfield[rowIndex][columnIndex] === 0) {
                            continue outer;
                        }
                    }

const removedRow = playfield.splice(rowIndex, 1)[0].fill(0);
                    playfield.unshift(removedRow);
                    score += 10;
                }
            }

function reset() {
                score = 0;
                playfield = createMatrix(rows, columns);
                gamePiece = createPiece();
                offset = { x: 0, y: 0 };

if (collide(playfield, gamePiece, offset)) {
                    playfield.forEach(row => row.fill(0));
                    alert("Game Over! Score: " + score);
                }
            }

function movePiece(offsetX) {
                offset.x += offsetX;
                if (collide(playfield, gamePiece, offset)) {
                    offset.x -= offsetX;
                }
            }

function dropPiece() {
                offset.y++;
                if (collide(playfield, gamePiece, offset)) {
                    offset.y--;
                    merge(playfield, gamePiece, offset);
                    reset();
                    clearLines();
                }
            }

function playerMoveDown() {
                dropPiece();
            }

function playerMoveLeft() {
                movePiece(-1);
            }

function playerMoveRight() {
                movePiece(1);
            }

function playerRotate() {
                const gamePieceCopy = JSON.parse(JSON.stringify(gamePiece));
                const rotatedPiece = rotate(gamePieceCopy);
                if (!collide(playfield, rotatedPiece, offset)) {
                    gamePiece = rotatedPiece;
                }
            }

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

let playfield = createMatrix(rows, columns);
            let gamePiece = createPiece();
            let offset = { x: 0, y: 0 };

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

drawMatrix(playfield, { x: 0, y: 0 });
                drawMatrix(gamePiece, offset);

context.fillStyle = "#fff";
                context.font = "18px Arial";
                context.fillText("Score: " + score, scale, scale * 2);
            }

function update() {
                dropPiece();
                draw();
                requestAnimationFrame(update);
            }

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