AI game creator

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

No:48766

←

Prev Next

→

Flappy bird
Developer User20836｜Date and time 24/3/2 22:31:55
Build time 8.662 sec｜Game capacity 2.295KB｜

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 Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="288" height="512"></canvas>
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    
    const bird = {
      x: 50,
      y: canvas.height / 2,
      width: 40,
      height: 30,
      gravity: 0.6,
      velocity: 0,
      jump: 10,
      drawBird: function() {
        ctx.fillStyle = 'yellow';
        ctx.fillRect(this.x, this.y, this.width, this.height);
      },
      update: function() {
        this.velocity += this.gravity;
        this.y += this.velocity;
        if (this.y < 0 || this.y + this.height > canvas.height) {
          this.y = canvas.height - this.height;
          this.velocity = 0;
        }
      },
      flap: function() {
        this.velocity = -this.jump;
      }
    };
    
    const pipes = {
      position: [],
      gap: 150,
      width: 50,
      speed: 5,
      drawPipes: function() {
        ctx.fillStyle = 'green';
        for (let i = 0; i < this.position.length; i++) {
          ctx.fillRect(this.position[i], 0, this.width, 200);
          ctx.fillRect(this.position[i], 200 + this.gap, this.width, canvas.height - (200 + this.gap));
        }
      },
      update: function() {
        for (let i = 0; i < this.position.length; i++) {
          this.position[i] -= this.speed;
          if (this.position[i] + this.width < 0) {
            this.position.splice(i, 1);
          }
        }
      },
      spawnPipe: function() {
        this.position.push(canvas.width);
      }
    };
    
    document.addEventListener('keydown', function(event) {
      if (event.key === ' ') {
        bird.flap();
      }
    });
    
    function gameLoop() {
      ctx.fillStyle = 'skyblue';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
    
      bird.update();
      bird.drawBird();
    
      pipes.update();
      pipes.drawPipes();
    
      if (pipes.position.length === 0 || pipes.position[pipes.position.length - 1] < canvas.width - 200) {
        pipes.spawnPipe();
      }
    
      requestAnimationFrame(gameLoop);
    }
    
    gameLoop();
  </script>
</body>
</html>