フラッピーバード's game

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

No:30401

122

←

Prev Next

→

フラッピーバード
Developer User14760｜Date and time 23/12/21 12:07:43
Build time 26.959 sec｜Game capacity 3.525KB｜

Script

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

このHTMLファイルをブラウザで開くと、フラッピーバードのゲームがプレイできます。スペースキーを押すと、鳥をジャンプさせることができます。それぞれのパイプを通過するたびにスコアが増えます。パイプに衝突するか、画面上部または下部に鳥が出てしまうとゲームオーバーとなります。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

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

```
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Flappy Bird</title>
  <style>
    body {
      overflow: hidden;
    }
    #game {
      position: relative;
      width: 320px;
      height: 480px;
      margin: auto;
      border: 1px solid black;
      background-color: lightblue;
    }
    #bird {
      position: absolute;
      top: 50%;
      left: 50px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: yellow;
      text-align: center;
      font-size: 24px;
    }
    .pipe {
      position: absolute;
      bottom: 0;
      width: 60px;
      height: 240px;
      background-color: green;
    }
    .score {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <div id="game"></div>
  <script>
    var game = document.getElementById('game');
    var bird = document.createElement('div');
    bird.id = 'bird';
    bird.innerText = '🐦';
    game.appendChild(bird);

var score = 0;
    var scoreBoard = document.createElement('div');
    scoreBoard.className = 'score';
    game.appendChild(scoreBoard);

var pipes = [];
    var pipeInterval = setInterval(function() {
      var pipe = document.createElement('div');
      pipe.className = 'pipe';
      pipe.style.left = '320px';
      pipe.style.height = getRandomHeight() + 'px';
      game.appendChild(pipe);
      pipes.push(pipe);
    }, 2000);

var birdJump = function() {
      bird.style.top = (bird.offsetTop - 60) + 'px';
    };

var gameOver = function() {
      clearInterval(pipeInterval);
      alert('Game Over! Your score: ' + score);
      // ページをリロードして再プレイする場合は以下の行をコメントアウトしてください
      location.reload();
    };

var collisionDetection = function(pipe) {
      var birdRect = bird.getBoundingClientRect();
      var pipeRect = pipe.getBoundingClientRect();
      return (
        birdRect.top < pipeRect.bottom &&
        birdRect.right > pipeRect.left &&
        birdRect.bottom > pipeRect.top &&
        birdRect.left < pipeRect.right
      );
    };

var getRandomHeight = function() {
      return Math.floor(Math.random() * (240 - 60 + 1)) + 60;
    };

document.addEventListener('keydown', function(event) {
      if (event.code === 'Space') {
        birdJump();
      }
    });
  </script>
</body>
</html>
```