Flappy bird. Tap on screen to jump. When you collide with the green boxes and the floor you get game over's game

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

No:43361

←

Prev Next

→

Flappy bird. Tap on screen to jump. When you colli..ALL
Developer User19162｜Date and time 24/2/15 8:57:18
Build time 16.19 sec｜Game capacity 5.669KB｜

Script

Score: 0

Game Over

This is a simple implementation of the Flappy Bird game using HTML, CSS, and JavaScript. The game can be played by tapping/clicking on the screen to make the bird jump. The objective is to navigate the bird through the gaps between the green pipes. If the bird collides with the pipes or the floor, the game is over. The score increases as the bird successfully passes through the pipes. The game over message is displayed when the game ends.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Flappy Bird Game</title>
    <style>
      #gameCanvas {
        background-color: #70c5ce;
        position: relative;
        margin: 0 auto;
        display: block;
        user-select: none;
      }

#bird {
        position: absolute;
        left: 50px;
        top: 50px;
        width: 50px;
        height: 50px;
        background-image: url("bird.png");
        background-repeat: no-repeat;
        background-size: contain;
      }

.pipe {
        position: absolute;
        width: 80px;
        height: 400px;
        background-color: green;
      }

#score {
        position: absolute;
        top: 10px;
        left: 10px;
        font-family: Arial, sans-serif;
        font-size: 24px;
        color: #fff;
      }

#gameOver {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: Arial, sans-serif;
        font-size: 36px;
        color: #000;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="640" height="480"></canvas>

// Initialize the game
      function startGame() {
        pipes = [];
        score = 0;
        gravity = 1;
        bird.style.top = "50px";
        bird.style.visibility = "visible";
        document.getElementById("gameOver").style.display = "none";

createPipe();

gameInterval = setInterval(updateGame, 20);
      }

// Update game state
      function updateGame() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        moveBird();
        drawPipes();
        checkCollision();
        updateScore();
      }

// Move the bird
      function moveBird() {
        var birdTop = parseInt(bird.style.top);
        bird.style.top = birdTop + gravity + "px";
        gravity += 1;
      }

// Create pipes
      function createPipe() {
        var pipeTopHeight = Math.floor(Math.random() * 200) + 100;
        var pipeBottomHeight = 480 - pipeTopHeight - 100;

var pipeTop = document.createElement("div");
        pipeTop.className = "pipe";
        pipeTop.style.top = "0px";
        pipeTop.style.left = canvas.width + "px";
        pipeTop.style.height = pipeTopHeight + "px";

var pipeBottom = document.createElement("div");
        pipeBottom.className = "pipe";
        pipeBottom.style.bottom = "0px";
        pipeBottom.style.left = canvas.width + "px";
        pipeBottom.style.height = pipeBottomHeight + "px";

pipes.push({ top: pipeTop, bottom: pipeBottom });

canvas.appendChild(pipeTop);
        canvas.appendChild(pipeBottom);
      }

// Draw pipes on canvas
      function drawPipes() {
        for (var i = 0; i < pipes.length; i++) {
          var pipe = pipes[i];
          var pipeTopLeft = parseInt(pipe.top.style.left);
          var pipeBottomLeft = parseInt(pipe.bottom.style.left);

if (pipeTopLeft <= -80) {
            pipe.top.remove();
            pipe.bottom.remove();
            pipes.splice(i, 1);
            i--;
          } else {
            pipeTopLeft -= 4;
            pipeBottomLeft -= 4;
            pipe.top.style.left = pipeTopLeft + "px";
            pipe.bottom.style.left = pipeBottomLeft + "px";
          }
        }
      }

// Check collision with pipes or floor
      function checkCollision() {
        var birdRect = bird.getBoundingClientRect();

for (var i = 0; i < pipes.length; i++) {
          var pipe = pipes[i];
          var pipeRect = pipe.top.getBoundingClientRect();

if (birdRect.left < pipeRect.right && pipeRect.left < birdRect.right) {
            if (
              birdRect.top < pipeRect.bottom && pipeRect.top < birdRect.bottom) {
              gameOver();
              return;
            }
          }
        }

if (
          birdRect.bottom >= canvas.height - 20 ||
          birdRect.top <= 0
        ) {
          gameOver();
          return;
        }
      }

// Update the score
      function updateScore() {
        for (var i = 0; i < pipes.length; i++) {
          var pipe = pipes[i];
          var pipeRect = pipe.top.getBoundingClientRect();

if (pipeRect.right < bird.getBoundingClientRect().left) {
            score++;
          }
        }
        document.getElementById("score").innerHTML = "Score: " + score;
      }

// Game over
      function gameOver() {
        clearInterval(gameInterval);
        bird.style.visibility = "hidden";
        document.getElementById("gameOver").style.display = "block";
      }

// Handle tap event on the screen
      canvas.addEventListener("click", function () {
        gravity = jumpPower;
      });

// Start the game
      startGame();
    </script>

<div id="bird"></div>
    <div id="score">Score: 0</div>
    <div id="gameOver">Game Over</div>
  </body>
</html>
```