フラッピーバード's game

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

No:31858

←

Prev Next

→

フラッピーバード
Developer User15254｜Date and time 23/12/28 17:14:25
Build time 38.676 sec｜Game capacity 3.538KB｜

Script

了解です。以下にフラッピーバードのゲームを実装したHTMLファイルのコードを示します。

このコードをHTMLファイルに保存し、ブラウザで開くとフラッピーバードのゲームがプレイできます。スマホでも操作可能です。障害物を避けながらバードを操作し、できるだけ多くの障害物を通過してスコアを競います。衝突した場合や地面に落ちた場合はゲームオーバーになります。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

了解です。以下にフラッピーバードのゲームを実装したHTMLファイルのコードを示します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>

let birdX = 50;
        let birdY = gameCanvas.height / 2;
        let birdDY = 0;
        const gravity = 0.5;
        const jumpHeight = 8;

let obstacles = [];
        const obstacleWidth = 50;
        const gapHeight = 150;
        const obstacleSpeed = 2;

let score = 0;

// イベントリスナーの設定
        document.addEventListener("keydown", jump);

// ゲームループの開始
        setInterval(update, 20);

// 障害物の生成
        setInterval(spawnObstacle, 3000);

function jump() {
            birdDY = -jumpHeight;
        }

function spawnObstacle() {
            const obstacleY = Math.random() * (gameCanvas.height - gapHeight);
            obstacles.push({ x: gameCanvas.width, y: obstacleY });
        }

function update() {
            // 背景の描画
            ctx.fillStyle = "#87ceeb";
            ctx.fillRect(0, 0, gameCanvas.width, gameCanvas.height);

// 障害物の描画と判定
            for (let i = 0; i < obstacles.length; i++) {
                const obstacle = obstacles[i];
                obstacle.x -= obstacleSpeed;

// 障害物の描画
                ctx.fillStyle = "#228b22";
                ctx.fillRect(obstacle.x, 0, obstacleWidth, obstacle.y);
                ctx.fillRect(obstacle.x, obstacle.y + gapHeight, obstacleWidth, gameCanvas.height - obstacle.y - gapHeight);

// 衝突判定
                if (birdX + 20 >= obstacle.x && birdX <= obstacle.x + obstacleWidth && 
                    (birdY <= obstacle.y || birdY + 20 >= obstacle.y + gapHeight)) {
                    gameOver();
                }

// 障害物が画面外に出たら削除
                if (obstacle.x + obstacleWidth < 0) {
                    obstacles.splice(i, 1);
                    i--;
                    score++;
                }
            }

// バードの描画と動き
            birdY += birdDY;
            birdDY += gravity;

ctx.fillStyle = "#ff4500";
            ctx.fillRect(birdX, birdY, 20, 20);

// 地面の判定
            if (birdY + 20 >= gameCanvas.height) {
                gameOver();
            }

// スコアの表示
            ctx.fillStyle = "#000000";
            ctx.font = "24px Arial";
            ctx.fillText("Score: " + score, 10, 30);
        }

function gameOver() {
            alert("Game Over");
            location.reload();
        }
    </script>
</body>
</html>
```