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

No:1296

107

←

Prev Next

→

This is not that kind of game! Thats not the kind ..ALL
Developer User3025｜Date and time 23/6/18 10:07:30
Build time 63.538 sec｜Game capacity 6.654KB｜

Script

では、簡単なテトリス風の落ち物パズルゲームを作ってみましょう。以下が実際のプログラムになります（絵文字は省略しています）。

落ち物パズルゲーム

← →: 移動, ↑: 回転, ↓: 落下

スコア: 0

このゲームは、縦に並ぶブロックを回転・移動させて、一列ごとに揃えて消していくというルールです。スコアは消した列数によって計算されます。操作方法は、左右キーで移動、上キーで回転、下キーで落下です。落下は一定時間ごとに自動で行われます。ゲームオーバーは、新しく現れた落ち物を配置する場所が無くなったときに発生します。

←

Prev　Next

→ 　

Back　

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

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

では、簡単なテトリス風の落ち物パズルゲームを作ってみましょう。

以下が実際のプログラムになります（絵文字は省略しています）。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>落ち物パズルゲーム</title>
    <style>
        body {
            background-color: black;
            color: white;
            font-size: 2em;
            text-align: center;
        }
        div {
            display: inline-block;
            width: 2em;
            height: 2em;
            margin: 0.1em;
            border: 0.1em solid white;
        }
    </style>
</head>
<body>
    <h1>落ち物パズルゲーム</h1>
    <p>← →: 移動, ↑: 回転, ↓: 落下</p>
    <p>スコア: <span id="score">0</span></p>
    <div id="field"></div>
    <script>
        const WIDTH = 10;
        const HEIGHT = 20;
        const COLORS = ['#f00', '#0f0', '#00f', '#ff0', '#0ff', '#f0f', '#fff'];
        const SHAPES = [
            [
                [1, 1, 0],
                [0, 1, 1]
            ],
            [
                [1, 1],
                [1, 1]
            ],
            [
                [1, 1, 1, 1]
            ],
            [
                [1, 1, 1],
                [0, 1, 0]
            ],
            [
                [0, 1, 1],
                [1, 1, 0]
            ],
            [
                [1, 0, 0],
                [1, 1, 1]
            ],
            [
                [0, 0, 1],
                [1, 1, 1]
            ]
        ];

let field = [];
        let current = getRandomShape();
        let currentX = Math.floor((WIDTH - current[0].length) / 2);
        let currentY = 0;
        let score = 0;

function getRandomShape() {
            return SHAPES[Math.floor(Math.random() * SHAPES.length)];
        }

function move(dx, dy, dr) {
            if (canMove(dx, dy, dr)) {
                currentX += dx;
                currentY += dy;
                current = rotate(current, dr);
                drawField();
                drawCurrent();
            }
        }

field = new Array(HEIGHT).fill().map(() => new Array(WIDTH).fill(0));
        drawField();
        drawCurrent();
        setInterval(fall, 500);