AI game creator

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

No:10003

←

Prev Next

→

Flappy bird
Developer User4459｜Date and time 23/7/28 19:25:07
Build time 28.852 sec｜Game capacity 3.875KB｜

Script

Sure! Here's an example of a simple implementation of the Flappy Bird game using HTML, CSS, and JavaScript, all in a single HTML file:

To use this code, save it as an HTML file (e.g., `flappy_bird.html`), and make sure to have a `emozi_all/bird.png` file in the same directory as the HTML file. Open the HTML file in a web browser to play the game. To make the game playable on a smartphone, you can open the HTML file on a mobile browser. This implementation includes a simple game loop, allows the bird to jump when the user taps/clicks, keeps track of the score, and ends the game when the bird collides with the pipes or goes outside the game area. After the game ends, a "Game Over" alert is displayed, and after a second delay, the game restarts automatically. Please note that this is a basic implementation and can be improved and expanded further.

←

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 the Flappy Bird game using HTML, CSS, and JavaScript, all in a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird</title>
  <style>
    #game {
      width: 320px;
      height: 480px;
      border: 1px solid #000;
      position: relative;
      margin: 0 auto;
      overflow: hidden;
    }
    
    #bird {
      width: 40px;
      height: 40px;
      background: url('bird.png') no-repeat center center;
      background-size: contain;
      position: absolute;
      left: 60px;
      top: 200px;
    }
    
    .pipe {
      width: 80px;
      height: 320px;
      background-color: green;
      position: absolute;
      bottom: 0;
    }
    
    #score {
      position: absolute;
      top: 10px;
      left: 10px;
      font-size: 20px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="bird"></div>
  </div>
  <script>
    var bird = document.getElementById("bird");
    var game = document.getElementById("game");
    var scoreText = document.getElementById("score");
    var score = 0;
    
    function jump() {
      bird.style.top = (bird.offsetTop - 60) + "px";
    }
    
    function gameLoop() {
      scoreText.innerHTML = "Score: " + score;
      
      // Move bird down
      bird.style.top = (bird.offsetTop + 3) + "px";
      
      // Check for collision with pipes
      var pipes = document.querySelectorAll(".pipe");
      for (var i = 0; i < pipes.length; i++) {
        if (isColliding(bird, pipes[i])) {
          endGame();
          return;
        }
      }
      
      // Check if bird is outside the game area
      if (bird.offsetTop < 0 || bird.offsetTop + bird.offsetHeight > game.offsetHeight) {
        endGame();
        return;
      }
      
      // Increase score if bird passes through pipes
      for (var i = 0; i < pipes.length; i++) {
        if (bird.offsetLeft > pipes[i].offsetLeft + pipes[i].offsetWidth) {
          score++;
        }
      }
      
      // Create new pipe every 2 seconds
      if (score % 10 === 0 && game.querySelectorAll(".pipe").length < 1) {
        createPipe();
      }
      
      requestAnimationFrame(gameLoop);
    }
    
    function createPipe() {
      var pipe = document.createElement("div");
      pipe.className = "pipe";
      pipe.style.left = (game.offsetWidth - 80) + "px";
      game.appendChild(pipe);
    }
    
    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 endGame() {
      alert("Game Over! Your score: " + score);
      score = 0;
      game.innerHTML = "";
      bird.style.top = "200px";
      
      setTimeout(function() {
        gameLoop();
      }, 1000);
    }
    
    // Event listener for jumping
    document.addEventListener("click", jump);
    
    // Start the game loop
    gameLoop();
  </script>
</body>
</html>
```

To use this code, save it as an HTML file (e.g., `flappy_bird.html`), and make sure to have a `bird.png` file in the same directory as the HTML file. Open the HTML file in a web browser to play the game. To make the game playable on a smartphone, you can open the HTML file on a mobile browser.

This implementation includes a simple game loop, allows the bird to jump when the user taps/clicks, keeps track of the score, and ends the game when the bird collides with the pipes or goes outside the game area. After the game ends, a "Game Over" alert is displayed, and after a second delay, the game restarts automatically.

Please note that this is a basic implementation and can be improved and expanded further.