AI game creator

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

No:19515

←

Prev Next

→

Flappy bird
Developer Burak Arda Bulut｜Date and time 23/10/4 15:13:08
Build time 29.095 sec｜Game capacity 4.921KB｜

Script

Sure! Here's a simple implementation of Flappy Bird using HTML, CSS, and JavaScript. The game is designed for smartphone operation and uses pictograms for the visuals.

Score: 0

Make sure to save the pictograms file (bird.png, pipe.png) in the same directory as the HTML file. This code creates a simple Flappy Bird game where the player taps on the screen to make the bird fly. The goal is to navigate through the pipes without colliding with them. The game keeps track of the player's score and increases the difficulty over time. Note: This implementation is a simplified version of the actual Flappy Bird game and does not include all the features or levels found in the original game.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

Sure! Here's a simple implementation of Flappy Bird using HTML, CSS, and JavaScript. The game is designed for smartphone operation and uses pictograms for the visuals.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird</title>
  <style>
    #game {
      width: 100%;
      height: 100vh;
      background: #87CEEB;
      position: relative;
      overflow: hidden;
    }
    
    #bird {
      width: 50px;
      height: 50px;
      background-image: url("bird.png");
      background-repeat: no-repeat;
      background-size: contain;
      position: absolute;
      z-index: 10;
      transition: top 0.2s;
    }
    
    .pipe {
      width: 80px;
      height: 350px;
      background-image: url("pipe.png");
      background-repeat: no-repeat;
      background-size: contain;
      position: absolute;
    }
    
    #score {
      position: absolute;
      top: 20px;
      right: 20px;
      color: white;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="bird"></div>
    <div id="score">Score: 0</div>
  </div>
  
  <script>
    // Variables
    var bird;
    var pipes;
    var gravity;
    var score;
    var gameSpeed;
  
    // Initialize the game
    function init() {
      bird = document.getElementById("bird");
      pipes = [];
      gravity = 0.6;
      score = 0;
      gameSpeed = 3;
      
      document.addEventListener('click', flap);
      window.requestAnimationFrame(update);
    }
    
    // Bird jump/fly
    function flap() {
      bird.style.transform = "rotate(-20deg)";
      bird.style.top = (bird.offsetTop - 50) + "px";
    }
    
    // Game update loop
    function update() {
      // Apply gravity on the bird
      bird.style.top = (bird.offsetTop + gravity) + "px";
      bird.style.transform = "rotate(20deg)";
      
      // Check collision with the ground
      if (bird.offsetTop >= game.clientHeight - bird.offsetHeight) {
        gameOver();
        return;
      }
      
      // Check collision with pipes
      for (var i = 0; i < pipes.length; i++) {
        var pipe = pipes[i];
        
        // Move the pipes towards the bird
        pipe.style.left = (pipe.offsetLeft - gameSpeed) + "px";
        
        // Remove pipes that have gone offscreen
        if (pipe.offsetLeft + pipe.offsetWidth < 0) {
          pipe.parentElement.removeChild(pipe);
          pipes.splice(i, 1);
          i--;
        } else {
          // Check collision with the bird
          if (isColliding(bird, pipe)) {
            gameOver();
            return;
          }
          
          // Update score
          if (pipe.offsetLeft + pipe.offsetWidth < bird.offsetLeft) {
            score++;
            document.getElementById("score").innerText = "Score: " + score;
          }
        }
      }
      
      // Create new pipes
      if (gameSpeed % 100 === 0) {
        createPipe();
      }
      
      // Increase game speed over time
      gameSpeed += 0.01;
      
      // Call update function on the next frame
      window.requestAnimationFrame(update);
    }
    
    // Create new pipe
    function createPipe() {
      var pipePosition = Math.random() * (game.clientHeight - 250) + 100;
    
      var pipeTop = document.createElement("div");
      pipeTop.className = "pipe";
      pipeTop.style.top = (pipePosition - 400) + "px";
      pipeTop.style.left = game.clientWidth + "px";
      game.appendChild(pipeTop);
      pipes.push(pipeTop);
    
      var pipeBottom = document.createElement("div");
      pipeBottom.className = "pipe";
      pipeBottom.style.top = pipePosition + "px";
      pipeBottom.style.left = game.clientWidth + "px";
      game.appendChild(pipeBottom);
      pipes.push(pipeBottom);
    }
    
    // Check collision between two elements
    function isColliding(el1, el2) {
      var el1Rect = el1.getBoundingClientRect();
      var el2Rect = el2.getBoundingClientRect();
      
      return !(
        el1Rect.bottom < el2Rect.top ||
        el1Rect.top > el2Rect.bottom ||
        el1Rect.right < el2Rect.left ||
        el1Rect.left > el2Rect.right
      );
    }
    
    // Game over
    function gameOver() {
      alert("Game Over! Final Score: " + score);
      document.removeEventListener('click', flap);
      window.location.reload();
    }
    
    // Start the game
    window.onload = function() {
      init();
    };
  </script>
</body>
</html>
```

Make sure to save the pictograms file (bird.png, pipe.png) in the same directory as the HTML file.

This code creates a simple Flappy Bird game where the player taps on the screen to make the bird fly. The goal is to navigate through the pipes without colliding with them. The game keeps track of the player's score and increases the difficulty over time.

Note: This implementation is a simplified version of the actual Flappy Bird game and does not include all the features or levels found in the original game.