AI game creator

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

No:14886

←

Prev Next

→

Flappy bird
Developer User6408｜Date and time 23/9/4 16:32:13
Build time 34.054 sec｜Game capacity 3.597KB｜

Script

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

To play the game, you can copy and save the above code into an HTML file (`flappy_bird.html`) and open it in a web browser. The game will start automatically, and you can control the bird's jump by clicking the canvas or pressing the spacebar on your smartphone's keyboard. The goal is to avoid the obstacles by passing through the gaps. The game ends when the bird collides with an obstacle or goes out of bounds. A game over message will appear, showing your final score.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of the Flappy Bird game as 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="400" height="400"></canvas>

// Initialize the game
    function init() {
      isGameOver = false;
      gameSpeed = 2;
      gravity = 0.1;
      jumpForce = 4;
      birdX = 50;
      birdY = canvas.height / 2;
      obstacles = [
        { x: canvas.width, y: 0, width: 50, height: randomObstacleHeight() },
        { x: canvas.width + 300, y: 0, width: 50, height: randomObstacleHeight() },
        { x: canvas.width + 600, y: 0, width: 50, height: randomObstacleHeight() }
      ];

canvas.addEventListener("click", jump);
      document.addEventListener("keydown", jump);
    }

// Game loop
    function gameLoop() {
      if (isGameOver) {
        return;
      }

update();
      draw();

requestAnimationFrame(gameLoop);
    }

// Update game state
    function update() {
      birdY += gravity;
      for (var i = 0; i < obstacles.length; i++) {
        obstacles[i].x -= gameSpeed;

if (isColliding(obstacles[i])) {
          gameOver();
        }

if (obstacles[i].x + obstacles[i].width < 0) {
          obstacles[i].x = canvas.width;
          obstacles[i].height = randomObstacleHeight();
        }
      }

if (birdY + 5 > canvas.height || birdY < 0) {
        gameOver();
      }
    }

// Draw game objects
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = "#ff00ff";
      ctx.fillRect(birdX, birdY, 20, 20);

ctx.fillStyle = "#0000ff";
      for (var i = 0; i < obstacles.length; i++) {
        ctx.fillRect(obstacles[i].x, obstacles[i].y, obstacles[i].width, obstacles[i].height);
      }
    }

// Make the bird jump
    function jump() {
      birdY -= jumpForce;
    }

// Check if bird collides with obstacles
    function isColliding(obstacle) {
      if (
        birdX < obstacle.x + obstacle.width &&
        birdX + 20 > obstacle.x &&
        birdY < obstacle.y + obstacle.height &&
        birdY + 20 > obstacle.y
      ) {
        return true;
      }
      return false;
    }

// Game over
    function gameOver() {
      isGameOver = true;
      canvas.removeEventListener("click", jump);
      document.removeEventListener("keydown", jump);
      alert("Game over! Your score: " + Math.floor(gameSpeed * 10));
      init();
    }

// Get a random obstacle height
    function randomObstacleHeight() {
      return Math.floor(Math.random() * (canvas.height - 100)) + 50;
    }

// Start the game
    function startGame() {
      canvas = document.getElementById("gameCanvas");
      ctx = canvas.getContext("2d");
      init();
      gameLoop();
    }

startGame();
  </script>
</body>
</html>
```