ひさしを不幸にするゲーム

操作方法:

スマホを傾けることでプレイヤーを移動させます。
プレイヤーはひさしに当たらないようにしながら、ひさしを動かします。

このゲームでは、プレイヤーをスマホの傾きに基づいて動かし、ひさしに当たらないようにします。ひさしは左右に移動し続けます。ひさしに当たるとゲームオーバーになります。

←

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>
</head>
<body>
    <h1>ひさしを不幸にするゲーム</h1>
    <h2>操作方法:</h2>
    <ul>
        <li>スマホを傾けることでプレイヤーを移動させます。</li>
        <li>プレイヤーはひさしに当たらないようにしながら、ひさしを動かします。</li>
    </ul>

// ゲームを初期化する
            initialize: function() {
                this.canvas = document.getElementById("gameCanvas");
                this.context = this.canvas.getContext("2d");
                this.player = { x: 200, y: 200, size: 40 };
                this.hizashi = { x: 300, y: 100, size: 60, speed: 4 };
            },

// ゲームを開始する
            start: function() {
                this.initialize();
                this.gameLoopInterval = setInterval(this.update.bind(this), 16);
            },

// ゲームを更新する
            update: function() {
                this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);

// プレイヤーを描画
                this.context.fillStyle = "blue";
                this.context.fillRect(this.player.x, this.player.y, this.player.size, this.player.size);

// ひさしを描画
                this.context.fillStyle = "yellow";
                this.context.fillRect(this.hizashi.x, this.hizashi.y, this.hizashi.size, this.hizashi.size);

// プレイヤーの移動
                var xAcceleration = -2 * (event.accelerationIncludingGravity.x) / 90;
                var yAcceleration = -2 * (event.accelerationIncludingGravity.y) / 90;
                this.player.x += xAcceleration;
                this.player.y += yAcceleration;

// ひさしの移動
                this.hizashi.x += this.hizashi.speed;
                if (this.hizashi.x + this.hizashi.size > this.canvas.width || this.hizashi.x < 0) {
                    this.hizashi.speed *= -1;
                }

// 当たり判定
                if (this.checkCollision(this.player, this.hizashi)) {
                    clearInterval(this.gameLoopInterval);
                    alert("Game Over! ひさしを不幸にしました！");
                }
            },

// オブジェクトの当たり判定
            checkCollision: function(a, b) {
                return a.x < b.x + b.size &&
                       a.x + a.size > b.x &&
                       a.y < b.y + b.size &&
                       a.y + a.size > b.y;
            }
        };

// ゲームの開始
        game.start();
    </script>
</body>
</html>
```