AI game creator

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

No:40944

←

Prev Next

→

Flappy bird
Developer User18250｜Date and time 24/2/4 20:31:56
Build time 14.364 sec｜Game capacity 3.888KB｜

Script

Okay, here's an example of a simple implementation of a Flappy Bird game in a single HTML file using JavaScript. Please note that this is a simplified version and may not include all game features or animations.

In this implementation, the game is played on a canvas element. The player controls the bird by pressing the space bar to make it jump. The goal is to navigate the bird through the gaps between the green pipes to earn points. The game will end if the bird hits the ground or any pipe. A score is displayed at the top left corner of the canvas. Please note that you will need to provide your own `emozi_all/bird.png` file as the pictogram for the bird. Also, this implementation doesn't handle touch events for smartphone operation, but you can easily add touch event listeners to enable touch controls.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Flappy Bird</title>
    <style>
      canvas {
        border: 1px solid black;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>

// Pictograms
      var birdImage = new Image();
      birdImage.src = "bird.png";

// Handle keyboard controls
      document.addEventListener("keydown", function (event) {
        if (event.code === "Space") {
          jump();
        }
      });

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

requestAnimationFrame(gameLoop);
      }

// Game update
      function update() {
        velocity += gravity;
        bird.y += velocity;

if (bird.y >= canvas.height - bird.radius) {
          endGame();
        }

for (var i = 0; i < pipes.length; i++) {
          pipes[i].x -= 2;

if (pipes[i].x + pipes[i].width <= 0) {
            pipes[i].x = canvas.width;
            pipes[i].height = Math.random() * (canvas.height - 200) + 100;
            score++;
          }

if (
            bird.x + bird.radius > pipes[i].x &&
            bird.x - bird.radius < pipes[i].x + pipes[i].width &&
            (bird.y - bird.radius < pipes[i].height ||
              bird.y + bird.radius > pipes[i].height + 120)
          ) {
            endGame();
          }
        }
      }

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

for (var i = 0; i < pipes.length; i++) {
          ctx.fillStyle = "green";
          ctx.fillRect(
            pipes[i].x,
            pipes[i].height,
            pipes[i].width,
            canvas.height
          );
        }

ctx.drawImage(
          birdImage,
          bird.x - bird.radius,
          bird.y - bird.radius,
          bird.radius * 2,
          bird.radius * 2
        );
        
        ctx.font = "24px Arial";
        ctx.fillText("Score: " + score, 10, 30);
      }

// Bird jump
      function jump() {
        velocity = -10;
      }

// End game
      function endGame() {
        alert("Game Over! Your score: " + score);
        resetGame();
      }

// Reset game
      function resetGame() {
        bird.y = 200;
        velocity = 0;
        pipes[0].x = canvas.width;
        pipes[1].x = canvas.width + 200;
        score = 0;
      }

// Start game
      function startGame() {
        gameLoop();
      }

// Start game on page load
      window.onload = function () {
        startGame();
      };
    </script>
  </body>
</html>
```

Please note that you will need to provide your own `bird.png` file as the pictogram for the bird. Also, this implementation doesn't handle touch events for smartphone operation, but you can easily add touch event listeners to enable touch controls.