フラッピーバード's game | AI game creator

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

No:20022

61

フラッピーバード
Developer User8917｜Date and time 23/10/7 23:28:14
Build time 21.885 sec｜Game capacity 3.471KB｜

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

🐦

このコードでは、スマホでも遊ぶことができるように、矢印キーの代わりにスペースキーでジャンプするようにしています。絵文字の鳥の絵を使用し、パイプが上下に表示されます。また、間隔ごとに新しいパイプが生成され、プレイヤーがパイプにぶつかった場合にはゲームオーバーとなります。ゲームオーバー時にはアラートが表示され、ページをリロードしてリセットされます。

→ 　

0　

0　

[PR]現在のプレゼントランキング

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

(C)2023 HisashiApp

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird</title>
  <style>
    #game-container {
      position: relative;
      width: 400px;
      height: 600px;
      border: 1px solid black;
    }
    
    #bird {
      position: absolute;
      top: 50%;
      left: 50px;
      transform: translateY(-50%);
      font-size: 3em;
    }
    
    .pipe {
      position: absolute;
      width: 100px;
      height: 200px;
      background-color: green;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="bird">🐦</div>
  </div>

<script>
    var bird = document.getElementById("bird");
    var gameContainer = document.getElementById("game-container");
    var pipes = [];
    var gravity = 0.5;
    var velocity = 0;
    var jumpHeight = -8;
    var pipeInterval = 2000;
    
    // Jump when the space key is pressed
    document.addEventListener("keydown", function(event) {
      if (event.keyCode === 32) {
        velocity = jumpHeight;
      }
    });
    
    // Game loop
    setInterval(function() {
      velocity += gravity;
      
      var birdTop = parseInt(bird.style.top) || 0;
      bird.style.top = birdTop + velocity + "px";
      
      // Check collision with pipes
      for (var i = 0; i < pipes.length; i++) {
        var pipe = pipes[i];
        var pipeRect = pipe.getBoundingClientRect();
        var birdRect = bird.getBoundingClientRect();
        
        if (birdRect.right >= pipeRect.left && birdRect.left <= pipeRect.right &&
            (birdRect.top <= pipeRect.top || birdRect.bottom >= pipeRect.bottom)) {
          gameOver();
        }
        
        if (pipeRect.right < 0) {
          pipe.remove();
          pipes.splice(i, 1);
        }
      }
      
      // Create new pipe every interval
      if (Math.round(performance.now()) % pipeInterval === 0) {
        createPipe();
      }
    }, 1000 / 60);
    
    function createPipe() {
      var pipeHeight = 100 + Math.random() * 300;
      
      var pipeTop = document.createElement("div");
      pipeTop.className = "pipe";
      pipeTop.style.top = "0";
      pipeTop.style.right = "0";
      pipeTop.style.height = pipeHeight + "px";
      
      var pipeBottom = document.createElement("div");
      pipeBottom.className = "pipe";
      pipeBottom.style.bottom = "0";
      pipeBottom.style.right = "0";
      pipeBottom.style.height = gameContainer.clientHeight - pipeHeight - 200 + "px";
      
      gameContainer.appendChild(pipeTop);
      gameContainer.appendChild(pipeBottom);
      pipes.push(pipeTop);
      pipes.push(pipeBottom);
    }
    
    function gameOver() {
      alert("Game over!");
      window.location.reload();
    }
  </script>
</body>
</html>
```

このコードでは、スマホでも遊ぶことができるように、矢印キーの代わりにスペースキーでジャンプするようにしています。絵文字の鳥の絵を使用し、パイプが上下に表示されます。また、間隔ごとに新しいパイプが生成され、プレイヤーがパイプにぶつかった場合にはゲームオーバーとなります。ゲームオーバー時にはアラートが表示され、ページをリロードしてリセットされます。