AI game creator

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

No:45801

←

Prev Next

→

Flappy bird
Developer User19681｜Date and time 24/2/21 9:08:21
Build time 7.785 sec｜Game capacity 2.2KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Flappy Bird</title>
    <style>
      canvas {
        border: 1px solid black;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas"></canvas>
    <script>
      const canvas = document.getElementById('gameCanvas');
      const ctx = canvas.getContext('2d');

let bird = { x: 50, y: canvas.height / 2, speed: 2 };
      let gravity = 0.05;
      let pipes = [];

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

function drawPipes() {
        pipes.forEach(pipe => {
          ctx.fillStyle = 'green';
          ctx.fillRect(pipe.x, 0, 50, pipe.height);
          ctx.fillRect(pipe.x, pipe.height + 100, 50, canvas.height - pipe.height - 100);
        });
      }

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

if (bird.y < 0 || bird.y > canvas.height) {
          gameOver();
        }
      }

function updatePipes() {
        pipes.forEach(pipe => {
          pipe.x -= 1;

if (pipe.x + 50 < 0) {
            pipes.shift();
          }

if (bird.x + 20 > pipe.x && bird.x < pipe.x + 50) {
            if (bird.y < pipe.height || bird.y + 20 > pipe.height + 100) {
              gameOver();
            }
          }
        });

if (pipes.length === 0 || pipes[pipes.length - 1].x < canvas.width - 200) {
          createPipe();
        }
      }

function createPipe() {
        let height = Math.random() * (canvas.height - 200) + 50;
        pipes.push({ x: canvas.width, height });
      }

function gameOver() {
        alert('Game Over');
        bird = { x: 50, y: canvas.height / 2, speed: 2 };
        pipes = [];
      }

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

drawBird();
        updateBird();

drawPipes();
        updatePipes();

requestAnimationFrame(gameLoop);
      }

document.addEventListener('click', () => {
        bird.speed = -2;
      });

createPipe();
      gameLoop();
    </script>
  </body>
</html>