フラッピーバード's game

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

No:13040

119

←

Prev Next

→

フラッピーバード
Developer User5753｜Date and time 23/8/26 13:38:44
Build time 33.538 sec｜Game capacity 5.545KB｜

Script

了解しました。以下にフラッピーバードのゲームを作成します。

🐦

上記のコードをコピーして、新しく作成したHTMLファイルに貼り付け、開いてみてください。スマホで操作しやすいように、画面タップやキーボードのスペースキーでもジャンプできるように設定してあります。パイプとバードの接触時にはゲームオーバーになり、スコアが表示されます。なお、このコードは完成したゲームとして遊べますが、デザインやゲームルールの追加など、さらなる改良が可能です。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下にフラッピーバードのゲームを作成します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>フラッピーバード</title>
    <style>
        #bird {
            position: absolute;
            top: 50%;
            left: 50px;
            font-size: 36px;
        }
        #pipeContainer {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .pipe {
            position: absolute;
            width: 80px;
            bottom: 0;
            background-color: lime;
        }
        #score {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div id="bird">🐦</div>
    <div id="pipeContainer"></div>
    <div id="score">0</div>

// バードの初期位置
        let birdTop = window.innerHeight / 2;

// ゲームオーバーフラグ
        let gameOver = false;

// バードの要素を取得
        const bird = document.getElementById("bird");

// スコアの要素を取得
        const scoreElement = document.getElementById("score");

// パイプのコンテナ要素を取得
        const pipeContainer = document.getElementById("pipeContainer");

// パイプを作成する関数
        function createPipe() {
            const pipeHeight = Math.random() * (window.innerHeight / 2);
            const pipe = document.createElement("div");
            pipe.className = "pipe";
            pipe.style.height = pipeHeight + "px";
            pipeContainer.appendChild(pipe);

// スコアを加算
            score++;
            scoreElement.textContent = score;

// パイプが画面外に出たら削除
            setTimeout(function() {
                pipe.remove();
            }, (window.innerWidth / pipeSpeed) * 1000);
        }

// バードをジャンプさせる関数
        function jump() {
            // ゲームオーバー時は処理をスキップ
            if (gameOver) {
                return;
            }

birdTop -= jumpForce;
            bird.style.top = birdTop + "px";
        }

// バードが地面に接触したか判定する関数
        function checkCollision() {
            const groundHeight = 100;
            const pipeWidth = 80;

// 地面との接触判定
            if (birdTop >= window.innerHeight - groundHeight) {
                endGame();
            }

// パイプとの接触判定
            const pipes = document.getElementsByClassName("pipe");
            for (let pipe of pipes) {
                // パイプの座標
                const pipeRect = pipe.getBoundingClientRect();
                const pipeTop = pipeRect.top;
                const pipeBottom = pipeRect.bottom;
                const pipeLeft = pipeRect.left;
                const pipeRight = pipeRect.right;

// バードの座標
                const birdRect = bird.getBoundingClientRect();
                const birdTop = birdRect.top;
                const birdBottom = birdRect.bottom;
                const birdLeft = birdRect.left;
                const birdRight = birdRect.right;

// パイプとバードが重なっているか判定
                if (
                    birdRight > pipeLeft &&
                    birdLeft < pipeRight &&
                    (birdBottom > pipeTop || birdTop < pipeBottom)
                ) {
                    endGame();
                    return;
                }
            }
        }

// ゲームオーバー処理
        function endGame() {
            gameOver = true;
            alert("Game Over! スコア：" + score);
            location.reload();
        }

// キーを押したときにジャンプさせる
        document.addEventListener("keydown", jump);

// ゲームループ（60fpsで実行）
        setInterval(function() {
            // 重力を適用
            birdTop += gravity;
            bird.style.top = birdTop + "px";

// パイプを作成
            if (Math.random() < 0.02) {
                createPipe();
            }

// パイプを移動
            const pipes = document.getElementsByClassName("pipe");
            for (let pipe of pipes) {
                const pipeLeft = parseInt(pipe.style.left) || 0;
                pipe.style.left = pipeLeft - pipeSpeed + "px";
            }

// 接触判定
            checkCollision();
        }, 1000 / 60); // 60fps
    </script>
</body>
</html>
```

上記のコードをコピーして、新しく作成したHTMLファイルに貼り付け、開いてみてください。スマホで操作しやすいように、画面タップやキーボードのスペースキーでもジャンプできるように設定してあります。パイプとバードの接触時にはゲームオーバーになり、スコアが表示されます。

なお、このコードは完成したゲームとして遊べますが、デザインやゲームルールの追加など、さらなる改良が可能です。