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

No:34470

←

Prev Next

→

Flappy bird
Developer User16252｜Date and time 24/1/10 15:33:58
Build time 13.564 sec｜Game capacity 2.931KB｜

Script

Sure! Here's an example of a simple implementation of Flappy Bird as a single HTML file using JavaScript:

Flappy Bird

Score: 0

To make this work as a game, you will also need to provide an image file called `emozi_all/game.png` in the same directory as the HTML file, which will be used as the bird in the game.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple implementation of Flappy Bird as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird</title>
  <style>
    #game {
      position: relative;
      width: 320px;
      height: 480px;
      border: 1px solid black;
    }
    .bird {
      position: absolute;
      top: 50%;
      left: 50px;
      transform: translateY(-50%);
      width: 50px;
      height: 50px;
      background-image: url('bird.png');
      background-size: cover;
    }
    .pipe {
      position: absolute;
      top: 0;
      width: 70px;
      height: 300px;
      background-color: green;
    }
    #score {
      text-align: center;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <h1>Flappy Bird</h1>
  <div id="game">
    <div id="bird" class="bird"></div>
    <div id="pipe" class="pipe"></div>
  </div>
  <div id="score">Score: 0</div>
  
  <script>
    var bird = document.getElementById('bird');
    var pipe = document.getElementById('pipe');
    var score = document.getElementById('score');
    var game = document.getElementById('game');
    var gameHeight = game.clientHeight;
    var birdTop = 200;
    var birdSpeed = 0;
    var gravity = 0.5;
    var scoreValue = 0;
    
    function jump() {
      birdSpeed = -10;
    }
    
    function gameLoop() {
      // Update bird position
      birdSpeed += gravity;
      birdTop += birdSpeed;
      bird.style.top = birdTop + 'px';
      
      // Check collision with ground
      if (birdTop + bird.clientHeight > gameHeight) {
        // Game over
        alert('Game Over! Your score: ' + scoreValue);
        location.reload(); // Restart the game
      }
      
      // Update pipe
      pipeLeft = pipe.offsetLeft - 2;
      pipe.style.left = pipeLeft + 'px';
      
      // Check collision with pipe
      if (pipeLeft + pipe.clientWidth < bird.offsetLeft) {
        // Passed the pipe
        scoreValue++;
        score.innerText = 'Score: ' + scoreValue;
        pipe.style.left = '320px'; // Reset pipe position
      }
      
      // Check collision with pipe and bird
      if (isColliding(bird, pipe)) {
        // Game over
        alert('Game Over! Your score: ' + scoreValue);
        location.reload(); // Restart the game
      }
      
      requestAnimationFrame(gameLoop);
    }
    
    function isColliding(element1, element2) {
      var rect1 = element1.getBoundingClientRect();
      var rect2 = element2.getBoundingClientRect();
      return !(
        rect1.top > rect2.bottom ||
        rect1.bottom < rect2.top ||
        rect1.right < rect2.left ||
        rect1.left > rect2.right
      );
    }
    
    game.addEventListener('click', jump);
    gameLoop();
  </script>
</body>
</html>
```

To make this work as a game, you will also need to provide an image file called `bird.png` in the same directory as the HTML file, which will be used as the bird in the game.