AI game creator

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

No:37767

←

Prev Next

→

TETRIS
Developer User17126｜Date and time 24/1/21 15:47:32
Build time 25.185 sec｜Game capacity 8.052KB｜

Script

了解です。以下にHTMLファイルとして完成したTetrisゲームのプログラムを記述します。

このプログラムは、HTMLファイル内にTetrisのゲームを実装しています。プレイヤーはスマホを操作してゲームをプレイすることができます。詳細な実装内容やゲームのルールについては、プログラム内のコメントを参照してください。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

了解です。以下にHTMLファイルとして完成したTetrisゲームのプログラムを記述します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>Tetris</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        canvas {
            background: #111;
            display: block;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <canvas id="tetris" width="240" height="400"></canvas>

context.scale(20, 20);

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

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

drawMatrix(arena, { x: 0, y: 0 });
            drawMatrix(player.matrix, player.pos);
        }

function playerDrop() {
            player.pos.y++;
            if (collide(arena, player)) {
                player.pos.y--;
                merge(arena, player);
                playerReset();
                arenaSweep();
            }
            dropCounter = 0;
        }

function playerMove(dir) {
            player.pos.x += dir;
            if (collide(arena, player)) {
                player.pos.x -= dir;
            }
        }

function playerReset() {
            const pieces = "TJLOSZI";
            player.matrix = createPiece(pieces[pieces.length * Math.random() | 0]);
            player.pos.y = 0;
            player.pos.x = (arena[0].length / 2 | 0) -
                           (player.matrix[0].length / 2 | 0);

if (collide(arena, player)) {
                arena.forEach(row => row.fill(0));
            }
        }

function arenaSweep() {
            outer: for (let y = arena.length - 1; y > 0; --y) {
                for (let x = 0; x < arena[y].length; ++x) {
                    if (arena[y][x] === 0) {
                        continue outer;
                    }
                }
                const row = arena.splice(y, 1)[0].fill(0);
                arena.unshift(row);
                ++y;

player.score += 10 * player.level;
                player.lines++;
                if (player.lines % 10 === 0) {
                    player.level++;
                }
            }
        }

function update(time = 0) {
            const deltaTime = time - lastTime;

dropCounter += deltaTime;
            if (dropCounter > dropInterval) {
                playerDrop();
            }

lastTime = time;

draw();
            updateScore();
            requestAnimationFrame(update);
        }

const colors = [
            null,
            "#00ffff",
            "#0000ff",
            "#ffa500",
            "#ffff00",
            "#008000",
            "#ff0000",
            "#800080"
        ];

const arena = createMatrix(12, 20);

const player = {
            pos: { x: 0, y: 0 },
            matrix: null,
            score: 0,
            lines: 0,
            level: 1
        };

let dropCounter = 0;
        let lastTime = 0;
        const dropInterval = 1000;

playerReset();
        update();
    </script>
</body>
</html>
```