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:43362

←

Prev Next

→

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

Script

Sure, here's a simple implementation of Flappy Bird as a single HTML file using JavaScript:

To play the game, you can copy the above code into a blank HTML file and open it in a web browser on your smartphone. Simply tap anywhere on the screen to make the bird jump and avoid collision with the green boxes and the floor. When you collide, the game will end and you can tap again to restart. The score is displayed on the top-left corner of the canvas.

←

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 as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="600"></canvas>
  
  <script>
    var canvas = document.getElementById("gameCanvas");
    var ctx = canvas.getContext("2d");

var bird = { x: 50, y: canvas.height / 2, radius: 20, velocity: 0 };
    var gravity = 0.5;
    var jumpStrength = 10;
    var greenBoxes = [];
    var score = 0;
    var isGameOver = false;

function generateGreenBox() {
      var box = { x: canvas.width, y: Math.random() * (canvas.height - 200) + 100, width: 40, height: 200 };
      greenBoxes.push(box);
    }

function jump() {
      if (isGameOver) {
        resetGame();
        return;
      }
      bird.velocity = -jumpStrength;
    }

function drawBird() {
      ctx.beginPath();
      ctx.arc(bird.x, bird.y, bird.radius, 0, Math.PI * 2);
      ctx.fillStyle = "yellow";
      ctx.fill();
      ctx.closePath();
    }

function drawGreenBoxes() {
      greenBoxes.forEach(function(box) {
        ctx.fillStyle = "green";
        ctx.fillRect(box.x, box.y, box.width, box.height);
      });
    }

function drawScore() {
      ctx.font = "20px Arial";
      ctx.fillStyle = "black";
      ctx.fillText("Score: " + score, 10, 30);
    }

function checkCollision() {
      if (bird.y + bird.radius > canvas.height || bird.y - bird.radius < 0) {
        endGame();
      }

greenBoxes.forEach(function(box) {
        if (
          bird.x + bird.radius > box.x &&
          bird.x - bird.radius < box.x + box.width &&
          bird.y + bird.radius > box.y &&
          bird.y - bird.radius < box.y + box.height
        ) {
          endGame();
        }
      });
    }

function updateBird() {
      bird.velocity += gravity;
      bird.y += bird.velocity;
    }

function updateGreenBoxes() {
      greenBoxes.forEach(function(box, index) {
        box.x--;
        if (box.x + box.width < 0) {
          greenBoxes.splice(index, 1);
          score++;
        }
      });

if (greenBoxes.length < 3) {
        generateGreenBox();
      }
    }

function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

drawBird();
      drawGreenBoxes();
      drawScore();

if (!isGameOver) {
        updateBird();
        updateGreenBoxes();
        checkCollision();
        requestAnimationFrame(draw);
      }
    }

function endGame() {
      isGameOver = true;
      ctx.fillStyle = "red";
      ctx.font = "40px Arial";
      ctx.fillText("Game Over!", canvas.width / 2 - 100, canvas.height / 2);
      ctx.fillText("Tap to restart", canvas.width / 2 - 120, canvas.height / 2 + 50);
    }

function resetGame() {
      bird = { x: 50, y: canvas.height / 2, radius: 20, velocity: 0 };
      greenBoxes = [];
      score = 0;
      isGameOver = false;
      generateGreenBox();
      draw();
    }

generateGreenBox();
    document.addEventListener("click", jump);
    draw();
  </script>
</body>
</html>
```