AI game creator

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

No:15688

←

Prev Next

→

Flappy bird
Developer User6827｜Date and time 23/9/10 20:43:46
Build time 29.381 sec｜Game capacity 3.156KB｜

Script

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

When you open the HTML file in a web browser, you will see a canvas representing the game screen. The objective is to keep the bird flying by tapping the screen. The bird needs to avoid colliding with the ground and pipes. The score increases as the bird passes through the pipes. The game ends when the bird hits an obstacle. Note: This implementation is a simplified version of Flappy Bird and may not include all the features of the original game.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simplified version of Flappy Bird 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: #add8e6;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="320" height="480"></canvas>
  <script>
    // Get the canvas element and context
    var canvas = document.getElementById("gameCanvas");
    var context = canvas.getContext("2d");

// Bird properties
    var bird = {
      x: 50,
      y: canvas.height / 2,
      radius: 20,
      speed: 2,
      gravity: 0.1,
      jumpHeight: 4.5,
      velocity: 0
    };

// Pipe properties
    var pipe = {
      x: canvas.width,
      width: 80,
      gap: 100,
      maxYPos: -150,
      speed: 2
    };

// Score
    var score = 0;

// Handle bird jump
    function jump() {
      bird.velocity -= bird.jumpHeight;
    }

// Game over
    function gameOver() {
      context.fillStyle = "black";
      context.font = "30px Arial";
      context.fillText("Game Over", canvas.width / 2 - 85, canvas.height / 2 - 20);
      clearInterval(gameLoop);
    }

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

// Draw bird
      context.fillStyle = "yellow";
      context.beginPath();
      context.arc(bird.x, bird.y, bird.radius, 0, Math.PI * 2);
      context.fill();

// Update bird position
      bird.velocity += bird.gravity;
      bird.y += bird.velocity;

// Draw pipes
      context.fillStyle = "green";
      context.fillRect(pipe.x, 0, pipe.width, canvas.height);
      context.fillRect(pipe.x, canvas.height + pipe.gap, pipe.width, -canvas.height);

// Update pipes position
      pipe.x -= pipe.speed;

// Update score
      if (pipe.x + pipe.width < bird.x && pipe.x + pipe.width + pipe.speed >= bird.x) {
        score++;
      }

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

// Collision detection
      if (
        bird.y + bird.radius > canvas.height ||
        bird.y - bird.radius < 0 ||
        (bird.x + bird.radius > pipe.x && bird.x - bird.radius < pipe.x + pipe.width &&
          (bird.y - bird.radius < pipe.maxYPos || bird.y + bird.radius > pipe.maxYPos + pipe.gap))
      ) {
        gameOver();
      }
    }

// Start game when screen is touched or clicked
    canvas.addEventListener("touchstart", jump);
    canvas.addEventListener("click", jump);

// Start the game loop
    var gameLoop = setInterval(update, 10);
  </script>
</body>
</html>
```

Note: This implementation is a simplified version of Flappy Bird and may not include all the features of the original game.