Create a flappy bird game's game

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

No:37000

146

←

Prev Next

→

Create a flappy bird game
Developer User16942｜Date and time 24/1/19 19:05:35
Build time 16.127 sec｜Game capacity 3.625KB｜

Script

Sure! Here's an example of a simplified version of the Flappy Bird game implemented as a single HTML file using JavaScript:

You can copy the above code and save it as an HTML file, then open it using a web browser. The game will start automatically, and you can control the bird's movement by pressing the spacebar on your keyboard or on a smartphone screen. The objective is to avoid the green obstacles and earn a high score.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simplified version of the Flappy Bird game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird</title>
  <style>
    canvas {
      border: 1px solid black;
      background-color: #f8f8f8;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="600"></canvas>
  
  <script>
    // Game variables
    var canvas, ctx;
    var birdX, birdY, birdDY;
    var gravity, jumpForce;
    var obstacleX, obstacleY, obstacleGap, obstacleWidth, obstacleHeight;
    var score;
    var isGameOver, isGameStarted;

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

birdX = 50;
      birdY = canvas.height / 2;
      birdDY = 0;
      gravity = 0.5;
      jumpForce = 8;

obstacleX = canvas.width;
      obstacleY = 0;
      obstacleGap = 200;
      obstacleWidth = 50;
      obstacleHeight = Math.random() * (canvas.height - obstacleGap);
      score = 0;

isGameOver = false;
      isGameStarted = false;

draw();
    }

// Game update
    function update() {
      if (!isGameOver) {
        birdDY += gravity;
        birdY += birdDY;

if (birdY >= canvas.height) {
          gameOver();
        }

obstacleX -= 2;

if (obstacleX + obstacleWidth < 0) {
          obstacleX = canvas.width;
          obstacleHeight = Math.random() * (canvas.height - obstacleGap);
          score++;
        }

if (
          birdX + 32 >= obstacleX &&
          birdX <= obstacleX + obstacleWidth &&
          (birdY <= obstacleHeight || birdY + 32 >= obstacleHeight + obstacleGap)
        ) {
          gameOver();
        }
      }
    }

// Game drawing
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = "red";
      ctx.fillRect(birdX, birdY, 32, 32);

ctx.fillStyle = "green";
      ctx.fillRect(obstacleX, obstacleY, obstacleWidth, obstacleHeight);

ctx.fillStyle = "green";
      ctx.fillRect(
        obstacleX,
        obstacleHeight + obstacleGap,
        obstacleWidth,
        canvas.height - (obstacleHeight + obstacleGap)
      );
      
      ctx.fillStyle = "black";
      ctx.font = "24px Arial";
      ctx.fillText("Score: " + score, 10, 30);

if (isGameOver) {
        ctx.fillStyle = "black";
        ctx.font = "48px Arial";
        ctx.fillText("Game Over", canvas.width / 2 - 120, canvas.height / 2);
      }
    }

// Game over
    function gameOver() {
      isGameOver = true;
    }

// Game loop
    function gameLoop() {
      update();
      draw();

if (!isGameOver) {
        requestAnimationFrame(gameLoop);
      }
    }

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