AI game creator

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

No:33689

←

Prev Next

→

Flappy bird
Developer User15888｜Date and time 24/1/6 6:35:29
Build time 24.482 sec｜Game capacity 2.937KB｜

Script

Sure! Here's a simple implementation of the Flappy Bird game using JavaScript and enclosed in a single HTML file:

Note: This is a basic implementation of Flappy Bird using JavaScript and HTML5 canvas element. It may not include all the features and visual elements of the original game, but it should give you a good starting point.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

Sure! Here's a simple implementation of the Flappy Bird game using JavaScript and enclosed in a single HTML file:

```html
<!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="400" height="400"></canvas>

// Bird object
    var bird = {
      x: 50,
      y: canvas.height / 2,
      width: 40,
      height: 30,
      gravity: 1,
      velocity: 0,

flap: function() {
        this.velocity -= 15;
      },

update: function() {
        this.velocity += this.gravity;
        this.velocity *= 0.9;
        this.y += this.velocity;

if (this.y < 0) {
          this.y = 0;
        } else if (this.y + this.height > canvas.height) {
          this.y = canvas.height - this.height;
        }
      },

draw: function() {
        context.fillStyle = "yellow";
        context.fillRect(this.x, this.y, this.width, this.height);
      }
    };

// Pipe object
    var pipe = {
      x: null, 
      width: 60, 
      height: 300, 
      gap: 100,

update: function() {
        this.x -= 2;

if (this.x + this.width < 0) {
          this.x = canvas.width;
          this.height = Math.random() * 200 + 50;
          score++;
        }
      },

draw: function() {
        context.fillStyle = "green";
        context.fillRect(this.x, 0, this.width, this.height);
        context.fillRect(this.x, this.height + this.gap, this.width, canvas.height - this.height - this.gap);
      },

collision: function() {
        if (bird.x < this.x + this.width &&
            bird.x + bird.width > this.x &&
            (bird.y < this.height || bird.y + bird.height > this.height + this.gap)) {
          return true;
        }
        return false;
      }
    };

// Handle key presses
    function flap() {
      bird.flap();
    }
    document.addEventListener("keydown", flap);

// Game loop
    function loop() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      
      bird.update();
      bird.draw();

pipe.update();
      pipe.draw();

if (pipe.collision()) {
        alert("Game Over! Score: " + score);
        location.reload(); // Restart the game
      }

context.fillStyle = "black";
      context.font = "20px Arial";
      context.fillText("Score: " + score, 10, 25);

requestAnimationFrame(loop);
    }

// Start the game
    pipe.x = canvas.width;
    loop();
  </script>
</body>
</html>
```