AI game creator

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

No:12858

141

←

Prev Next

→

Flappy bird
Developer User5583｜Date and time 23/8/23 23:51:24
Build time 45.783 sec｜Game capacity 3.571KB｜

Script

了解しました。以下に示すコードは、HTMLファイル内に埋め込まれたJavaScriptでFlappy Birdのゲームを実装したものです。

🐦

このコードによって、ブラウザ上でFlappy Birdのゲームが実行されます。エモジを用いた鳥のキャラクターが画面上を自動的に左に移動し、スペースキーを押すことで鳥がジャンプします。パイプとの衝突や画面外への飛び出し時にゲームオーバーとなり、スコアが表示されます。注意点としては、このコードは単一のHTMLファイルとして実装することを前提としています。ファイル名と拡張子を指定してブラウザで開くか、HTMLコードを貼り付けてオンラインのHTMLエディタで実行してください。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下に示すコードは、HTMLファイル内に埋め込まれたJavaScriptでFlappy Birdのゲームを実装したものです。

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Flappy Bird</title>
    <style>
      #game {
        position: relative;
        width: 400px;
        height: 500px;
        border: 1px solid black;
        margin: 0 auto;
        overflow: hidden;
        background-color: skyblue;
      }
      #bird {
        position: absolute;
        left: 50px;
        top: 200px;
        font-size: 36px;
      }
      .pipe {
        position: absolute;
        width: 50px;
        height: 300px;
        background-color: green;
      }
      #score {
        text-align: center;
        font-size: 24px;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div id="game">
      <div id="bird">🐦</div>
      <div id="score">0</div>
    </div>
    <script>
      const bird = document.getElementById("bird");
      const pipes = [];
      let score = 0;
      let gameLoop;

function createPipe() {
        const pipe = document.createElement("div");
        pipe.className = "pipe";
        pipe.style.left = "400px";
        pipe.style.top = Math.floor(Math.random() * 200) + "px";
        document.getElementById("game").appendChild(pipe);
        pipes.push(pipe);
      }

function removePipe() {
        pipes[0].remove();
        pipes.shift();
      }

function updatePipes() {
        for (let i = 0; i < pipes.length; i++) {
          const pipe = pipes[i];
          const pipeLeft = parseInt(pipe.style.left);
          pipe.style.left = pipeLeft - 2 + "px";

if (pipeLeft < -50) {
            removePipe();
          }

if (pipeLeft === 50) {
            score++;
            document.getElementById("score").textContent = score;
          }

if (
            pipeLeft < 90 &&
            pipeLeft > 10 &&
            bird.style.top < pipe.style.top + "300px"
          ) {
            endGame();
          }
        }
      }

function endGame() {
        clearInterval(gameLoop);
        alert("Game over! Your score: " + score);
        location.reload(); // ページのリロード
      }

document.addEventListener("keydown", function (event) {
        if (event.code === "Space") {
          jump();
        }
      });

createPipe();
      gameLoop = setInterval(function () {
        updatePipes();
      }, 20);
    </script>
  </body>
</html>
```

このコードによって、ブラウザ上でFlappy Birdのゲームが実行されます。エモジを用いた鳥のキャラクターが画面上を自動的に左に移動し、スペースキーを押すことで鳥がジャンプします。パイプとの衝突や画面外への飛び出し時にゲームオーバーとなり、スコアが表示されます。

注意点としては、このコードは単一のHTMLファイルとして実装することを前提としています。ファイル名と拡張子を指定してブラウザで開くか、HTMLコードを貼り付けてオンラインのHTMLエディタで実行してください。