improbable flappy bird's game

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

No:9365

159

←

Prev Next

→

improbable flappy bird
Developer User4337｜Date and time 23/7/23 23:32:17
Build time 41.982 sec｜Game capacity 4.759KB｜

Script

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

このプログラムは、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>
    #game {
      width: 300px;
      height: 400px;
      border: 1px solid black;
      position: relative;
      overflow: hidden;
    }

#bird {
      width: 40px;
      height: 40px;
      position: absolute;
      left: 50px;
      top: 50px;
      background: yellow;
      border-radius: 50%;
    }

.pipe {
      width: 80px;
      height: 300px;
      position: absolute;
      background: green;
    }

.top {
      top: 0;
    }

.bottom {
      bottom: 0;
      transform: rotate(180deg);
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="bird"></div>
  </div>

let gameIsRunning = false;
    let birdIsJumping = false;
    let birdTop = 200;
    let birdStep = 0;
    let gravity;

document.addEventListener('keydown', () => {
      if (!gameIsRunning) {
        startGame();
      }

birdJump();
    });

function startGame() {
      birdIsJumping = false;
      birdTop = 200;
      bird.style.top = birdTop + 'px';
      birdStep = 0;
      gravity = setInterval(applyGravity, 20);
      spawnPipes();
      gameIsRunning = true;
    }

function birdJump() {
      if (!gameIsRunning) {
        return;
      }

birdIsJumping = true;
      birdStep = 0;
    }

function applyGravity() {
      if (!gameIsRunning) {
        clearInterval(gravity);
        return;
      }

if (birdIsJumping) {
        birdTop -= 4;
        birdStep = -10;
        bird.style.top = birdTop + 'px';
        birdIsJumping = false;
      } else {
        birdTop += birdStep;
        birdStep += 0.5;
        bird.style.top = birdTop + 'px';
      }

checkCollision();
    }

function spawnPipes() {
      if (!gameIsRunning) {
        return;
      }

const pipes = game.getElementsByClassName('pipe');
      for (let i = 0; i < pipes.length; i++) {
        game.removeChild(pipes[i]);
      }

const pipeGap = 140;
      const pipeWidth = 80;
      const pipeHeight = Math.floor(Math.random() * 200) + 50;

const topPipe = document.createElement('div');
      topPipe.classList.add('pipe');
      topPipe.classList.add('top');
      topPipe.style.left = '350px';
      topPipe.style.height = pipeHeight + 'px';
      game.appendChild(topPipe);

const bottomPipe = document.createElement('div');
      bottomPipe.classList.add('pipe');
      bottomPipe.classList.add('bottom');
      bottomPipe.style.left = '350px';
      bottomPipe.style.top = (pipeHeight + pipeGap) + 'px';
      bottomPipe.style.height = (game.offsetHeight - pipeHeight - pipeGap) + 'px';
      game.appendChild(bottomPipe);

const movePipes = setInterval(() => {
        if (!gameIsRunning) {
          clearInterval(movePipes);
          return;
        }

const pipes = game.getElementsByClassName('pipe');
        for (let i = 0; i < pipes.length; i++) {
          const pipe = pipes[i];
          const pipeLeft = pipe.style.left ? parseInt(pipe.style.left.substr(0, pipe.style.left.length - 2)) : 0;

if (pipeLeft < -pipeWidth) {
            game.removeChild(pipe);
          } else {
            pipe.style.left = (pipeLeft - 2) + 'px';
          }
        }

checkCollision();
      }, 20);
      
      setTimeout(spawnPipes, 3000);
    }

function checkCollision() {
      const pipes = game.getElementsByClassName('pipe');
      const birdRect = bird.getBoundingClientRect();

for (let i = 0; i < pipes.length; i++) {
        const pipe = pipes[i];
        const pipeRect = pipe.getBoundingClientRect();

if (birdRect.top <= pipeRect.bottom && birdRect.bottom >= pipeRect.top &&
          birdRect.right >= pipeRect.left && birdRect.left <= pipeRect.right) {
          gameOver();
          return;
        }
      }

if (birdTop <= 0 || birdTop + bird.offsetHeight >= game.offsetHeight) {
        gameOver();
      }
    }

function gameOver() {
      gameIsRunning = false;
      clearInterval(gravity);
      alert('Game Over');
    }
  </script>
</body>
</html>
```