フラッピーバード's game

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

No:39496

←

Prev Next

→

フラッピーバード
Developer User17654｜Date and time 24/1/28 15:29:18
Build time 15.832 sec｜Game capacity 3.85KB｜

Script

了解です。以下にフラッピーバード風のゲームを実装したプログラムを記述します。

上記のコードをHTMLファイルに保存し、ウェブブラウザで開くとフラッピーバード風のゲームが遊べます。スマートフォンでの操作を前提としており、画面をタップすることでバードがジャンプします。パイプを通過するたびにスコアが加算され、パイプや地面に衝突するとゲームオーバーになります。ゲームオーバー時にはアラートダイアログが表示され、再度ゲームが開始されます。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

了解です。以下にフラッピーバード風のゲームを実装したプログラムを記述します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>
    <script>
        // ゲームオブジェクトの初期化
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const gravity = 0.5;
        let bird = { x: 50, y: canvas.height / 2, vy: 0, size: 20 };
        let pipes = [];
        let score = 0;
        let isGameOver = false;

// ゲームのメインループ
        function gameLoop() {
            // 背景を描画
            ctx.fillStyle = 'skyblue';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

// パイプを生成
            if (frames % 100 === 0) {
                let pipeY = Math.random() * (canvas.height - 200) + 100;
                pipes.push({ x: canvas.width, y: pipeY });
            }

// パイプの移動と描画
            for (let i = 0; i < pipes.length; i++) {
                let pipe = pipes[i];
                pipe.x -= 2;

// 衝突判定
                if (bird.x < pipe.x + 50 && bird.x + bird.size > pipe.x &&
                    (bird.y < pipe.y || bird.y + bird.size > pipe.y + 100)) {
                    gameOver();
                }

// パイプを描画
                ctx.fillStyle = 'green';
                ctx.fillRect(pipe.x, 0, 50, pipe.y);
                ctx.fillRect(pipe.x, pipe.y + 100, 50, canvas.height - (pipe.y + 100));

// スコアの更新
                if (bird.x > pipe.x && !pipe.passed) {
                    pipe.passed = true;
                    score++;
                }

// パイプが画面外に出たら配列から削除
                if (pipe.x + 50 < 0) {
                    pipes.splice(i, 1);
                    i--;
                }
            }

// バードの移動と描画
            bird.vy += gravity;
            bird.y += bird.vy;
            ctx.fillStyle = 'yellow';
            ctx.fillRect(bird.x, bird.y, bird.size, bird.size);

// 衝突判定（地面）
            if (bird.y + bird.size > canvas.height) {
                gameOver();
            }

// スコアの表示
            ctx.fillStyle = 'black';
            ctx.font = '24px Arial';
            ctx.fillText(`Score: ${score}`, 10, 50);

if (!isGameOver) {
                requestAnimationFrame(gameLoop);
            }
        }

// ゲーム開始時の処理
        function startGame() {
            bird = { x: 50, y: canvas.height / 2, vy: 0, size: 20 };
            pipes = [];
            score = 0;
            isGameOver = false;
            requestAnimationFrame(gameLoop);
        }

// ゲーム終了時の処理
        function gameOver() {
            isGameOver = true;
            alert(`Game Over! Score: ${score}`);
            startGame();
        }

// タップ時の処理
        canvas.addEventListener('click', function () {
            bird.vy = -8;
        });

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