Flappy bird's game | AI game creator

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

No:41381

54

Flappy bird
Developer User18523｜Date and time 24/2/7 4:37:06
Build time 19.835 sec｜Game capacity 5.568KB｜

Sure! Here's a simple implementation of the Flappy Bird game using JavaScript in a single HTML file:

0

To use this code, save it as an HTML file (e.g., `flappybird.html`), and open it in a web browser. You'll need to provide your own pictogram or image for the bird by replacing the `emozi_all/pictogram.png` reference in the CSS section with the appropriate image URL or file path. The game will start automatically, and you can control the bird's movement by clicking/tapping on the game area or by pressing any key on your keyboard. The objective of the game is to navigate the bird through the gaps between the pipes for as long as possible without colliding with them. Your score will increase each time a pipe passes the bird. The game will end when the bird collides with a pipe, and your final score will be displayed in an alert dialog. Please note that this is a simplified version of Flappy Bird and may not include all the features of the original game. Feel free to modify and enhance the code as per your requirements.

→ 　

0　

0　

　

　
　
　

[PR]現在の欲しいものランキング

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

(C)2023 HisashiApp

Sure! Here's a simple implementation of the Flappy Bird game using JavaScript in a single HTML file:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Flappy Bird</title>
    <style>
      #game {
        position: relative;
        width: 400px;
        height: 600px;
        margin: 0 auto;
        border: 1px solid #000;
        overflow: hidden;
        background-color: skyblue;
      }
      
      #bird {
        position: absolute;
        top: 250px;
        left: 50px;
        width: 50px;
        height: 50px;
        background-image: url('bird.png'); /* Replace with your pictogram or image */
        background-size: cover;
      }
      
      .pipe {
        position: absolute;
        width: 100px;
        bottom: 0;
        border-left: 4px solid #000;
        background-color: green;
      }
      
      #score {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 24px;
        font-weight: bold;
        color: #000;
      }
    </style>
  </head>
  <body>
    <div id="game">
      <div id="bird"></div>
      <div id="score">0</div>
    </div>
    
    <script>
      var bird = document.getElementById("bird");
      var game = document.getElementById("game");
      var score = document.getElementById("score");
      var scoreValue = 0;
      var isGameOver = false;
      var gravity = 1.5;
      var jumpForce = 25;
      var gameSpeed = 5;
      var gapHeight = 200;
      var pipes = [];
      
      function startGame() {
        game.addEventListener("click", jump);
        document.addEventListener("keydown", jump);
        setInterval(updateGame, 20);
        generatePipe();
      }
      
      function updateGame() {
        if (!isGameOver) {
          // Move bird down due to gravity
          var birdTop = parseInt(window.getComputedStyle(bird).getPropertyValue("top"));
          bird.style.top = (birdTop + gravity) + "px";
          
          // Move pipes from right to left
          for (var i = 0; i < pipes.length; i++) {
            var pipe = pipes[i];
            var pipeLeft = parseInt(window.getComputedStyle(pipe).getPropertyValue("left"));
            pipe.style.left = (pipeLeft - gameSpeed) + "px";
            
            // Check for collision with bird
            if (isColliding(pipe, bird)) {
              gameOver();
            }
            
            // Increment score when pipe passes bird
            if (pipeLeft < -100) {
              scoreValue++;
              score.textContent = scoreValue;
            }
          }
          
          // Clean up pipes that are out of the game area
          pipes = pipes.filter(function(pipe) {
            return parseInt(window.getComputedStyle(pipe).getPropertyValue("left")) > -100;
          });
          
          // Generate new pipe when gap gets closer to the right side
          var gameWidth = parseInt(window.getComputedStyle(game).getPropertyValue("width"));
          if (gameWidth - pipes[pipes.length - 1].offsetLeft > 300) {
            generatePipe();
          }
        }
      }
      
      function generatePipe() {
        var pipeHeight = Math.floor(Math.random() * 400) + 50;
        
        var upperPipe = document.createElement("div");
        upperPipe.classList.add("pipe");
        upperPipe.style.height = pipeHeight + "px";
        upperPipe.style.left = game.offsetWidth + "px";
        game.appendChild(upperPipe);
        pipes.push(upperPipe);
        
        var lowerPipe = document.createElement("div");
        lowerPipe.classList.add("pipe");
        lowerPipe.style.height = (game.offsetHeight - pipeHeight - gapHeight) + "px";
        lowerPipe.style.left = game.offsetWidth + "px";
        game.appendChild(lowerPipe);
        pipes.push(lowerPipe);
      }
      
      function jump() {
        var birdTop = parseInt(window.getComputedStyle(bird).getPropertyValue("top"));
        if (birdTop > 20) {
          bird.style.top = (birdTop - jumpForce) + "px";
        }
      }
      
      function isColliding(element1, element2) {
        var rect1 = element1.getBoundingClientRect();
        var rect2 = element2.getBoundingClientRect();
        return !(rect1.right < rect2.left || 
                 rect1.left > rect2.right || 
                 rect1.bottom < rect2.top || 
                 rect1.top > rect2.bottom);
      }
      
      function gameOver() {
        isGameOver = true;
        game.removeEventListener("click", jump);
        document.removeEventListener("keydown", jump);
        alert("Game Over! Your score: " + scoreValue);
      }
      
      startGame();
    </script>
  </body>
</html>
```

To use this code, save it as an HTML file (e.g., `flappybird.html`), and open it in a web browser. You'll need to provide your own pictogram or image for the bird by replacing the `bird.png` reference in the CSS section with the appropriate image URL or file path.

The game will start automatically, and you can control the bird's movement by clicking/tapping on the game area or by pressing any key on your keyboard. The objective of the game is to navigate the bird through the gaps between the pipes for as long as possible without colliding with them. Your score will increase each time a pipe passes the bird. The game will end when the bird collides with a pipe, and your final score will be displayed in an alert dialog.

Please note that this is a simplified version of Flappy Bird and may not include all the features of the original game. Feel free to modify and enhance the code as per your requirements.