AI game creator

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

No:37941

←

Prev Next

→

Flappy bird
Developer User17159｜Date and time 24/1/21 22:17:02
Build time 14.687 sec｜Game capacity 4.04KB｜

Script

Sure, here's an example of a simple Flappy Bird game implemented as a single HTML file using JavaScript. Please note that due to limitations in this text-based format, you won't be able to interactively play the game here, but you can copy the code and save it as an HTML file on your device to play it.

To play the game, copy the entire code and save it as an HTML file on your device. Then, open the HTML file in a web browser (preferably on a smartphone) to play Flappy Bird. Press the spacebar or tap the screen to make the bird jump and avoid the pipes. The score is displayed on the top-left corner, and the game will end if the bird collides with the pipes or goes out of bounds.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Flappy Bird</title>
    <style>
      canvas {
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>
    <script>
      // Game variables
      var canvas, ctx, bird, pipes, score;
      var gravity = 0.5;
      var jumpForce = 8;
      var pipeGap = 120;
      var pipeSpeed = 2;
      var pipeFrequency = 100;
      var gameover = false;

// Bird class
      class Bird {
        constructor() {
          this.x = 50;
          this.y = canvas.height / 2;
          this.velocity = 0;
        }

show() {
          ctx.fillStyle = "#f00";
          ctx.fillRect(this.x, this.y, 30, 30);
        }

update() {
          this.velocity += gravity;
          this.y += this.velocity;
          this.checkCollision();
        }

jump() {
          this.velocity = -jumpForce;
        }

checkCollision() {
          if (this.y < 0 || this.y + 30 > canvas.height) {
            gameOver();
          }

for (let pipe of pipes) {
            if (
              this.x + 30 > pipe.x &&
              this.x < pipe.x + pipe.width &&
              (this.y < pipe.height || this.y + 30 > pipe.height + pipeGap)
            ) {
              gameOver();
            }
          }
        }
      }

// Pipe class
      class Pipe {
        constructor() {
          this.x = canvas.width;
          this.height = Math.random() * (canvas.height - pipeGap);
          this.width = 80;
        }

show() {
          ctx.fillStyle = "#0f0";
          ctx.fillRect(this.x, 0, this.width, this.height);
          ctx.fillRect(
            this.x,
            this.height + pipeGap,
            this.width,
            canvas.height - (this.height + pipeGap)
          );
        }

update() {
          this.x -= pipeSpeed;
          if (this.x + this.width < 0) {
            score++;
            pipes.splice(pipes.indexOf(this), 1);
          }
        }
      }

// Game initialization
      function init() {
        canvas = document.getElementById("gameCanvas");
        ctx = canvas.getContext("2d");
        bird = new Bird();
        pipes = [];
        score = 0;
        gameover = false;

document.addEventListener("keydown", function (event) {
          if (event.key === " ") {
            bird.jump();
          }
        });

setInterval(generatePipes, pipeFrequency);
        setInterval(update, 20);
      }

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

bird.show();
        bird.update();

for (let pipe of pipes) {
          pipe.show();
          pipe.update();
        }

ctx.fillStyle = "#000";
        ctx.font = "20px Arial";
        ctx.fillText("Score: " + score, 10, 30);
      }

// Generate new pipes
      function generatePipes() {
        if (!gameover) {
          pipes.push(new Pipe());
        }
      }

// Game over
      function gameOver() {
        gameover = true;
        pipes = [];
        ctx.fillStyle = "#000";
        ctx.font = "40px Arial";
        ctx.fillText("Game Over", 100, canvas.height / 2 - 20);
      }

// Start the game
      init();
    </script>
  </body>
</html>
```