AI game creator

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

No:18287

←

Prev Next

→

Flappy bird
Developer User8055｜Date and time 23/9/28 2:45:37
Build time 51.19 sec｜Game capacity 4.389KB｜

Script

Okay, here's a simple implementation of the Flappy Bird game in a single HTML file using JavaScript:

To run the game, simply save the code above into a ".html" file and open it in a web browser that supports JavaScript. The game is designed for smartphone operation, so you can either tap the canvas or press the spacebar or the up arrow key to make the bird jump. The goal is to navigate through the green obstacles and survive as long as possible without hitting them. Your score will be displayed at the top left corner of the canvas. Enjoy playing Flappy Bird!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

Okay, here's a simple implementation of the Flappy Bird game in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird</title>
  <style>
    canvas {
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="288" height="512"></canvas>
  <script>
    // Game variables
    var canvas;
    var ctx;
    var bird;
    var obstacles;
    var isGameOver;
    var score;

// Bird object
    function Bird() {
      this.x = 50;
      this.y = canvas.height / 2;
      this.velocityY = 0;
      this.gravity = 0.5;
      this.lift = -12;

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

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

if (this.y >= canvas.height - 32) {
          this.y = canvas.height - 32;
          this.velocityY = 0;
        }

if (this.y <= 0) {
          this.y = 0;
          this.velocityY = 0;
        }
      };

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

// Obstacle object
    function Obstacle() {
      this.x = canvas.width;
      this.y = Math.floor(Math.random() * (canvas.height - 200) + 100);
      this.width = 50;
      this.height = canvas.height - this.y;

this.show = function() {
        ctx.fillStyle = "green";
        ctx.fillRect(this.x, 0, this.width, this.y);
        ctx.fillRect(this.x, this.y + this.height, this.width, canvas.height - this.y - this.height);
      };

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

this.hits = function(bird) {
        if (bird.y < this.y || bird.y > this.y + this.height) {
          if (bird.x + 32 > this.x && bird.x < this.x + this.width) {
            return true;
          }
        }
        return false;
      };
    }

// Game initialization
    function init() {
      canvas = document.getElementById("gameCanvas");
      ctx = canvas.getContext("2d");

bird = new Bird();
      obstacles = [];
      obstacles.push(new Obstacle());

isGameOver = false;
      score = 0;

// Event listener for jump (touch/click)
      canvas.addEventListener('touchstart', function(event) {
        event.preventDefault();
        bird.jump();
      });

// Event listener for jump (key press)
      document.addEventListener('keydown', function(event) {
        if (event.key === ' ' || event.key === 'ArrowUp') {
          event.preventDefault();
          bird.jump();
        }
      });

update();
    }

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

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

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

// Check collision
          if (obstacles[i].hits(bird)) {
            isGameOver = true;
          }

// Remove offscreen obstacles
          if (obstacles[i].x + obstacles[i].width < 0) {
            obstacles.splice(i, 1);
          }

// Increment score
          if (obstacles[i].x == bird.x) {
            score++;
          }
        }

// Add new obstacle
        if (canvas.width - obstacles[obstacles.length - 1].x > 300) {
          obstacles.push(new Obstacle());
        }

// Display score
        ctx.fillStyle = "black";
        ctx.font = "24px Arial";
        ctx.fillText("Score: " + score, 10, 30);

requestAnimationFrame(update);
      } else {
        ctx.fillStyle = "black";
        ctx.font = "48px Arial";
        ctx.fillText("Game Over", canvas.width / 2 - 100, canvas.height / 2);
      }
    }

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