AI game creator

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

No:40480

←

Prev Next

→

Flappy bird
Developer User18141｜Date and time 24/2/3 2:41:23
Build time 16.626 sec｜Game capacity 3.797KB｜

Script

Sure! Here's an implementation of the game Flappy Bird using JavaScript within a single HTML file:

You can save the above code into an HTML file (e.g., `flappy_bird.html`) and open it in a web browser to play the Flappy Bird game. When played on a smartphone, you can tap the screen to make the bird jump. The goal is to navigate the bird through the gaps between the green pipes without touching them. The score will increase for each successfully passed pipe, and the game will end if the bird collides with a pipe.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

Sure! Here's an implementation of the game Flappy Bird using JavaScript within a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      border: 1px solid black;
      background: lightblue;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="480" height="320"></canvas>

// Bird object
    function Bird() {
      this.x = 100;
      this.y = 150;
      this.gravity = 0.6;
      this.lift = -15;
      this.velocity = 0;

this.show = function() {
        context.fillStyle = "yellow";
        context.fillRect(this.x, this.y, 25, 25);
      };

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

if (this.y >= canvas.height - 25) {
          this.y = canvas.height - 25;
          this.velocity = 0;
        }
      };

this.jump = function() {
        this.velocity += this.lift;
      };
    }

// Pipe object
    function Pipe() {
      this.x = canvas.width;
      this.pipeWidth = 50;
      this.topHeight = Math.floor(Math.random() * (canvas.height / 2));
      this.bottomHeight = Math.floor(Math.random() * (canvas.height / 2));
      this.speed = 2;

this.show = function() {
        context.fillStyle = "green";
        context.fillRect(
          this.x,
          0,
          this.pipeWidth,
          this.topHeight
        );
        context.fillRect(
          this.x,
          canvas.height - this.bottomHeight,
          this.pipeWidth,
          this.bottomHeight
        );
      };

this.update = function() {
        this.x -= this.speed;
      };

this.collidesWith = function(bird) {
        if (
          bird.x + 25 >= this.x &&
          bird.x <= this.x + this.pipeWidth &&
          (bird.y <= this.topHeight || bird.y + 25 >= canvas.height - this.bottomHeight)
        ) {
          return true;
        }
        return false;
      };
    }

// Setup game
    function setup() {
      canvas = document.getElementById("gameCanvas");
      context = canvas.getContext("2d");

bird = new Bird();
      pipes = [];
      score = 0;

canvas.addEventListener("click", function() {
        bird.jump();
      });

setInterval(update, 20);
      setInterval(spawnPipe, 2000);
    }

// Update game
    function update() {
      context.clearRect(0, 0, canvas.width, canvas.height);

// Update and show bird
      bird.update();
      bird.show();

// Update and show pipes
      for (var i = pipes.length - 1; i >= 0; i--) {
        pipes[i].update();
        pipes[i].show();

if (pipes[i].x < -pipes[i].pipeWidth) {
          pipes.splice(i, 1);
          score++;
        }

if (pipes[i].collidesWith(bird)) {
          gameOver();
          return;
        }
      }

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

// Spawn new pipe
    function spawnPipe() {
      pipes.push(new Pipe());
    }

// Game over
    function gameOver() {
      alert("Game Over! Score: " + score);
      window.location.reload();
    }

// Start the game
    window.onload = function() {
      setup();
    };
  </script>
</body>
</html>
```