AI game creator

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

No:50971

←

Prev Next

→

Flappy bird
Developer User21444｜Date and time 24/3/10 11:10:57
Build time 6.759 sec｜Game capacity 2.644KB｜

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="canvas" width="480" height="320"></canvas>
    <script>
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');

const pipes = {
        position: [],
        top: {
          height: 200,
          color: 'green'
        },
        bottom: {
          height: 120,
          color: 'green'
        },
        spacing: 100,
        draw: function() {
          for (let i = 0; i < this.position.length; i++) {
            const pipe = this.position[i];
            ctx.fillStyle = this.top.color;
            ctx.fillRect(pipe.x, 0, 50, pipe.top);
            ctx.fillStyle = this.bottom.color;
            ctx.fillRect(pipe.x, pipe.top + this.spacing, 50, pipe.bottom);
            pipe.x -= 2;

if (pipe.x < -50) {
              this.position.shift();
            }

if (bird.x + bird.size > pipe.x && bird.x < pipe.x + 50) {
              if (bird.y < pipe.top || bird.y + bird.size > pipe.top + this.spacing) {
                alert('Game Over!');
                document.location.reload();
              }
            }

if (pipe.x === 10) {
              this.position.push({
                x: 480,
                top: Math.floor(Math.random() * (150 - 50)) + 50,
                bottom: Math.floor(Math.random() * (150 - 50)) + 50
              });
            }
          }
        }
      };

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

requestAnimationFrame(draw);
      }

document.addEventListener('keydown', function(event) {
        if (event.keyCode === 32) {
          bird.jump();
        }
      });

pipes.position.push({
        x: 480,
        top: Math.floor(Math.random() * (150 - 50)) + 50,
        bottom: Math.floor(Math.random() * (150 - 50)) + 50
      });

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