AI game creator

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

No:47388

←

Prev Next

→

Flappy bird
Developer User18896｜Date and time 24/2/28 2:35:04
Build time 12.112 sec｜Game capacity 2.169KB｜

Script

Here is a simple implementation of Flappy Bird game in a single html file using JavaScript:

You can copy and paste this code into an html file and open it in a browser to play the game. Click on the canvas to make the bird jump and avoid hitting the pipes. Have fun!

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Here is a simple implementation of Flappy Bird game in a single html file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="320" height="480"></canvas>
  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

let bird = {
      x: 50,
      y: 150,
      size: 20,
      gravity: 0.5,
      velocity: 0,
      lift: -10,
      alive: true
    };

let pipes = [];

function drawBird() {
      ctx.fillStyle = 'yellow';
      ctx.fillRect(bird.x, bird.y, bird.size, bird.size);
    }

function drawPipe(x, height) {
      ctx.fillStyle = 'green';
      ctx.fillRect(x, 0, 50, height);
      ctx.fillRect(x, height + 150, 50, canvas.height - height - 150);
    }

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

drawBird();

for (let pipe of pipes) {
        drawPipe(pipe.x, pipe.height);
      }
    }

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

if (bird.y < 0 || bird.y > canvas.height - bird.size) {
        bird.alive = false;
      }

for (let pipe of pipes) {
        if (bird.x + bird.size > pipe.x && bird.x < pipe.x + 50) {
          if (bird.y < pipe.height || bird.y + bird.size > pipe.height + 150) {
            bird.alive = false;
          }
        }
      }

if (!bird.alive) {
        alert('Game Over!');
        bird = {
          x: 50,
          y: 150,
          size: 20,
          gravity: 0.5,
          velocity: 0,
          lift: -10,
          alive: true
        };
        pipes = [];
      }
    }

function loop() {
      draw();
      update();

if (bird.alive) {
        requestAnimationFrame(loop);
      }
    }

canvas.addEventListener('click', function() {
      bird.velocity = bird.lift;
    });

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

You can copy and paste this code into an html file and open it in a browser to play the game. Click on the canvas to make the bird jump and avoid hitting the pipes. Have fun!