AI game creator

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

No:51964

138

←

Prev Next

→

Flappy bird
Developer User21723｜Date and time 24/3/17 7:01:15
Build time 7.893 sec｜Game capacity 2.15KB｜

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 #000;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas width="400" height="500" id="gameCanvas"></canvas>
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

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

let pipe = {
      x: 400,
      gap: 120,
      width: 50,
      topHeight: Math.floor(Math.random() * 200) + 50
    };

let score = 0;

document.addEventListener('keydown', () => {
      bird.velocity = bird.lift;
    });

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

function drawPipe() {
      ctx.fillStyle = '#81b214';
      ctx.fillRect(pipe.x, 0, pipe.width, pipe.topHeight);
      ctx.fillRect(pipe.x, pipe.topHeight + pipe.gap, pipe.width, 500);
    }

function collisionDetection() {
      if (bird.y < 0 || bird.y + bird.size > 500 ||
        (bird.x + bird.size > pipe.x && bird.x < pipe.x + pipe.width &&
        (bird.y < pipe.topHeight || bird.y + bird.size > pipe.topHeight + pipe.gap))) {
        return true;
      }
      return false;
    }

function draw() {
      ctx.clearRect(0, 0, 400, 500);

if (collisionDetection()) {
        alert("Game Over! Your score: " + score);
        bird = {
          x: 50,
          y: 150,
          size: 20,
          gravity: 0.5,
          lift: -8,
          velocity: 0
        };
        pipe = {
          x: 400,
          gap: 120,
          width: 50,
          topHeight: Math.floor(Math.random() * 200) + 50
        };
        score = 0;
      }

bird.velocity += bird.gravity;
      bird.y += bird.velocity;

if (pipe.x < 0) {
        pipe.x = 400;
        pipe.topHeight = Math.floor(Math.random() * 200) + 50;
        score++;
      }

pipe.x -= 2;

drawPipe();
      drawBird();
      requestAnimationFrame(draw);
    }

draw();
  </script>
</body>
</html>