AI game creator

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

No:42516

102

←

Prev Next

→

Flappy bird
Developer User18898｜Date and time 24/2/11 22:29:33
Build time 13.025 sec｜Game capacity 3.71KB｜

Script

Sure! Here is a simple implementation of the popular game "Flappy Bird" using HTML and JavaScript:

To play the game, you can copy and paste the above code into a new HTML file (e.g., `flappy_bird.html`). Save the file and open it in a web browser to start playing. The bird will automatically start moving downwards, and you can make it flap by pressing the spacebar. The objective is to navigate the bird through the gaps in the pipes without colliding with them. Every successfully passed pipe increments the score. The game ends when 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 is a simple implementation of the popular game "Flappy Bird" using HTML and JavaScript:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Flappy Bird</title>
    <style>
      canvas {
        border: 1px solid #000;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="game" width="400" height="600"></canvas>
    <script>
      // Game configuration
      var canvas = document.getElementById("game");
      var context = canvas.getContext("2d");
      var bird;
      var pipes = [];
      var score = 0;
      var gameSpeed = 2;
      var gravity = 1;

// Bird object
      function Bird() {
        this.x = 50;
        this.y = canvas.height / 2;
        this.width = 50;
        this.height = 50;

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

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

this.flap = function () {
          this.y -= 25;
        };
      }

// Pipe object
      function Pipe() {
        this.x = canvas.width;
        this.y = Math.random() * (canvas.height - 200) + 100;
        this.width = 80;
        this.height = 400;

this.draw = function () {
          context.fillStyle = "#008000";
          context.fillRect(this.x, 0, this.width, this.y);
          context.fillRect(
            this.x,
            this.y + this.height,
            this.width,
            canvas.height - (this.y + this.height)
          );
        };

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

// Game initialization
      function startGame() {
        bird = new Bird();
        pipes.push(new Pipe());

setInterval(update, 1000 / 60); // 60 FPS
      }

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

// Draw bird
        bird.draw();
        bird.update();

// Draw pipes
        pipes.forEach(function (pipe) {
          pipe.draw();
          pipe.update();

// Check collision
          if (
            bird.x + bird.width >= pipe.x &&
            bird.x <= pipe.x + pipe.width &&
            (bird.y <= pipe.y || bird.y + bird.height >= pipe.y + pipe.height)
          ) {
            gameOver();
          }

// Check pass
          if (pipe.x + pipe.width < bird.x && !pipe.passed) {
            pipe.passed = true;
            score++;
          }
        });

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

// Game over
      function gameOver() {
        context.fillStyle = "#000";
        context.font = "40px Arial";
        context.fillText("Game Over", canvas.width / 2 - 100, canvas.height / 2);
        clearInterval();
      }

// Handle key press
      window.addEventListener("keydown", function (event) {
        if (event.key === " ") {
          bird.flap();
        }
      });

// Start game
      window.onload = startGame;
    </script>
  </body>
</html>
```