[Operation] The probability of excessive generation failure of the flappy bird system has been reduced.'s game | AI game creator

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

No:9178

145

[Operation] The probability of excessive generatio..ALL
Developer User4246｜Date and time 23/7/22 1:07:59
Build time 42.465 sec｜Game capacity 4.534KB｜

了解しました。以下にFlappy Bird風のゲームを作成します。

Score: 0

以上がFlappy Bird風のゲームのコードです。プログラムの要点は以下の通りです。 - `createPipe`関数はパイプの要素を生成し、ランダムな位置に表示されるようにします。また、アニメーション処理も行います。 - `birdFall`関数はバードの落下を表現し、キー操作によってバードが上昇するようにします。 - `controlBird`関数はキー操作に対するイベントリスナーとして登録され、スペースキーが押された場合にバードを上昇させます。 - `gameOver`関数はゲームオーバー時の処理を行います。パイプの生成やバードの動きを停止し、得点を表示してリロードします。 - `main`関数はゲームのメイン処理を行います。キー操作のリスナーの登録やパイプの生成のタイミングを制御します。このプログラムを実行すると、Flappy Bird風のゲームが遊べます。バードがパイプと衝突するとゲームオーバーになります。移動端末（スマートフォン）で操作することを前提としているため、キーボードのスペースキーを押して操作することになります。

→ 　

1　

1　

[PR]現在の人気ゲームランキング

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

(C)2023 HisashiApp

了解しました。以下にFlappy Bird風のゲームを作成します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird</title>
  <style>
    #game {
      width: 400px;
      height: 600px;
      border: 1px solid black;
      position: relative;
      overflow: hidden;
    }
    #bird {
      width: 50px;
      height: 50px;
      background-color: yellow;
      position: absolute;
      top: 275px;
      left: 50px;
    }
    .pipe {
      width: 80px;
      height: 300px;
      background-color: green;
      position: absolute;
    }
    #score {
      position: absolute;
      top: 10px;
      left: 10px;
      font-size: 24px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="bird"></div>
    <div id="score">Score: 0</div>
  </div>

<script>
    // スコア変数の初期化とパイプ、バードの要素の取得
    let score = 0;
    const gameDiv = document.getElementById("game");
    const bird = document.getElementById("bird");

// バードの上下移動の変数と初期化
    let birdTop = 275;
    let birdSpeed = 0;

// パイプの生成と設定
    function createPipe() {
      const pipe = document.createElement("div");
      pipe.className = "pipe";
      pipe.style.left = "400px";

// パイプの上下の位置をランダムに設定
      const pipeTopHeight = Math.floor(Math.random() * 250) + 50;
      pipe.style.top = pipeTopHeight + "px";
      pipe.style.bottom = 600 - pipeTopHeight + "px";

// パイプ要素の追加
      gameDiv.appendChild(pipe);

// パイプのアニメーション
      let pipeMoveInterval = setInterval(function () {
        // パイプを左に移動
        const pipeLeft = parseInt(pipe.style.left);
        pipe.style.left = (pipeLeft - 5) + "px";

// パイプが画面外に出たら削除
        if (pipeLeft <= -80) {
          pipe.remove();
          clearInterval(pipeMoveInterval);
        }

// パイプとバードの衝突判定
        const birdRect = bird.getBoundingClientRect();
        const pipeRect = pipe.getBoundingClientRect();
        if (
          birdRect.left < pipeRect.left + pipeRect.width &&
          birdRect.left + birdRect.width > pipeRect.left &&
          birdRect.top < pipeRect.top + pipeRect.height &&
          birdRect.top + birdRect.height > pipeRect.top
        ) {
          gameOver();
        }
      }, 20);
    }

// バードの落下とキー操作
    function birdFall() {
      birdSpeed += 1;
      birdSpeed *= 0.9;
      birdTop += birdSpeed;
      bird.style.top = birdTop + "px";
    }

function controlBird(e) {
      if (e.code === "Space") {
        birdSpeed = -10;
      }
    }

// ゲームオーバー処理
    function gameOver() {
      clearInterval(pipeGenInterval);
      clearInterval(birdFallInterval);
      document.removeEventListener("keydown", controlBird);
      alert("Game Over. Your Score: " + score);
      location.reload();
    }

// メイン処理
    function main() {
      document.addEventListener("keydown", controlBird);
      pipeGenInterval = setInterval(createPipe, 2000);
      birdFallInterval = setInterval(birdFall, 20);
    }

main();
  </script>
</body>
</html>
```

以上がFlappy Bird風のゲームのコードです。プログラムの要点は以下の通りです。

- `createPipe`関数はパイプの要素を生成し、ランダムな位置に表示されるようにします。また、アニメーション処理も行います。
- `birdFall`関数はバードの落下を表現し、キー操作によってバードが上昇するようにします。
- `controlBird`関数はキー操作に対するイベントリスナーとして登録され、スペースキーが押された場合にバードを上昇させます。
- `gameOver`関数はゲームオーバー時の処理を行います。パイプの生成やバードの動きを停止し、得点を表示してリロードします。
- `main`関数はゲームのメイン処理を行います。キー操作のリスナーの登録やパイプの生成のタイミングを制御します。

このプログラムを実行すると、Flappy Bird風のゲームが遊べます。バードがパイプと衝突するとゲームオーバーになります。移動端末（スマートフォン）で操作することを前提としているため、キーボードのスペースキーを押して操作することになります。