AI game creator

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

No:40195

105

←

Prev Next

→

Flappy bird
Developer Flappy｜Date and time 24/2/1 16:19:13
Build time 17.088 sec｜Game capacity 3.63KB｜

Script

Sure! Here's an example of a simplified Flappy Bird game implemented as a single HTML file:

This implementation of Flappy Bird uses HTML, CSS, and JavaScript to create a game where the player taps/clicks to keep the bird flying and avoid collisions with the pipes. The score is displayed in the top-left corner, and the game ends when the bird collides with a pipe or touches the ground. Please note that this is a simplified version and may not include all the features of the original Flappy Bird 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 simplified Flappy Bird game implemented as a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Flappy Ninja</title>
  <style>
    #gameContainer {
      background-color: #70c5ce;
      position: relative;
      height: 400px;
      width: 800px;
      margin: 0 auto;
      overflow: hidden;
      border: 2px solid #000;
    }

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

.pipe {
      position: absolute;
      bottom: 0;
      width: 80px;
      height: 200px;
      background-color: #6dfb87;
    }

#score {
      position: absolute;
      top: 10px;
      left: 10px;
      color: #fff;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div id="gameContainer">
    <div id="bird"></div>
    <div id="score">0</div>
  </div>

var isRunning = false;
    var birdTop = 200;
    var gravity = 1;
    var scoreValue = 0;
    var gameLoop;

function startGame() {
      isRunning = true;
      gameLoop = setInterval(updateGame, 20);
      document.addEventListener("click", flapBird);
    }

function updateGame() {
      birdTop += gravity;
      bird.style.top = birdTop + "px";

if (birdTop > gameContainer.offsetHeight - bird.offsetHeight) {
        gameOver();
      }

for (var i = 0; i < pipes.length; i++) {
        pipes[i].style.left = pipes[i].offsetLeft - 2 + "px";
        
        if (collisionDetection(bird, pipes[i])) {
          gameOver();
        }
        
        if (pipes[i].offsetLeft < -pipes[i].offsetWidth) {
          gameContainer.removeChild(pipes[i]);
          pipes.splice(i, 1);
          scoreValue++;
          score.textContent = scoreValue;
        }
      }

if (pipes.length < 4) {
        createPipe();
      }
    }

function createPipe() {
      var pipeHeight = Math.floor(Math.random() * 150) + 50;
      var pipe = document.createElement("div");
      pipe.className = "pipe";
      pipe.style.height = pipeHeight + "px";
      pipe.style.left = gameContainer.offsetWidth + "px";
      pipes.push(pipe);
      gameContainer.appendChild(pipe);
    }

function flapBird() {
      birdTop -= 40;
    }

function collisionDetection(bird, pipe) {
      var birdRect = bird.getBoundingClientRect();
      var pipeRect = pipe.getBoundingClientRect();

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

function gameOver() {
      clearInterval(gameLoop);
      document.removeEventListener("click", flapBird);
      isRunning = false;
      alert("Game Over! Your score: " + scoreValue);
    }

startGame();
  </script>
</body>
</html>
```

Please note that this is a simplified version and may not include all the features of the original Flappy Bird game.