フラッピーバード's game

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

No:14464

←

Prev Next

→

フラッピーバード
Developer User6222｜Date and time 23/9/2 6:59:15
Build time 19.762 sec｜Game capacity 2.944KB｜

Script

了解しました。以下にプログラムを記述します。

このプログラムは、HTMLのcanvas要素を使用してフラッピーバードのゲームを実装しています。バードは画面上をタップすることで上方向に移動し、その間に画面の上端や下端に当たるとゲームオーバーになります。バードが移動すると同時に、スコアが加算され、画面に表示されます。スマートフォンで表示した場合、canvas要素をタップすることでバードの操作が可能です。ゲームオーバー時にはアラートでスコアが表示され、ページがリロードされます。以上が、1枚のHTMLファイルとして実装されたフラッピーバードのゲームです。

←

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>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="500"></canvas>

// 絵文字を描画する関数
        function drawBird() {
            ctx.font = "40px Arial";
            ctx.fillText("🐦", birdX, birdY);
        }

// ゲームが始まってからのフレームごとの処理
        function update() {
            // 背景をクリアして再描画
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBird();

// キャンバスの上端と下端に当たったらゲームオーバー
            if (birdY < 0 || birdY > canvas.height) {
                gameOver();
            }

// バードの位置を上下に移動させる
            birdY += gravity;

// スコアを表示する
            ctx.fillStyle = "#000";
            ctx.font = "20px Arial";
            ctx.fillText("Score: " + score, 10, 30);

// フレームごとに再描画
            requestAnimationFrame(update);
        }

// ゲームオーバー時の処理
        function gameOver() {
            alert("ゲームオーバー！\nScore: " + score);
            location.reload(); // ページをリロードして初期状態に戻す
        }

// タップ時の処理
        function onTap() {
            // バードを上方向に移動させる
            birdY -= 30;

// スコアを加算する
            score++;
        }

// タップイベントを検知して onTap 関数を呼び出す
        canvas.addEventListener("click", onTap);

// ゲームスタート
        update();
    </script>
</body>
</html>
```

このプログラムは、HTMLのcanvas要素を使用してフラッピーバードのゲームを実装しています。バードは画面上をタップすることで上方向に移動し、その間に画面の上端や下端に当たるとゲームオーバーになります。バードが移動すると同時に、スコアが加算され、画面に表示されます。

スマートフォンで表示した場合、canvas要素をタップすることでバードの操作が可能です。ゲームオーバー時にはアラートでスコアが表示され、ページがリロードされます。

以上が、1枚のHTMLファイルとして実装されたフラッピーバードのゲームです。