Flappy bird with moving pipes that if you hit: resets's game

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

No:11254

←

Prev Next

→

Flappy bird with moving pipes that if you hit: res..ALL
Developer User3943｜Date and time 23/8/9 5:42:56
Build time 35.055 sec｜Game capacity 3.807KB｜

Script

Sure! Here's an implementation of Flappy Bird as a single HTML file, using JavaScript and enclosed in script tags:

To use this code, you'll need to create `emozi_all/bird.png` and `emozi_apple.png` image files and place them in the same directory as the HTML file. The `emozi_all/bird.png` image should represent the bird pictogram, and `emozi_all/bird.png` should represent the pipe pictogram. The game can be played on a smartphone by tapping on the screen to make the bird jump. If the bird collides with the ground or a pipe, the game resets. The goal is to avoid the pipes and achieve the highest score possible. The score is displayed on the top left corner of the canvas. Please note that the implementation provided here is a simplified version of Flappy Bird, focusing on the essential mechanics. It does not include advanced features like sound effects, high scores, or complex level design.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

Sure! Here's an implementation of Flappy Bird as a single HTML file, using JavaScript and enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird</title>
  <style>
    canvas {
      border: 1px solid black;
      background: #00bfff;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="600"></canvas>

// Pictogram images for bird and pipes
    const birdImage = new Image();
    birdImage.src = "bird.png";

const pipeImage = new Image();
    pipeImage.src = "pipe.png";

// Getting the canvas element and context
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");

// Game variables
    let birdX = 50;
    let birdY = 250;
    let birdSpeedY = 0;
    const gravity = 0.5;
    const jumpStrength = 8;
    const pipeGap = 150;
    let score = 0;
    let pipes = [];

// Event listener for jumping
    document.addEventListener("keydown", jump);

// Function to handle jumping
    function jump() {
      birdSpeedY = -jumpStrength;
    }

// Function to handle collisions
    function checkCollisions() {
      // Check collision with ground
      if (birdY + 32 >= canvas.height) {
        reset();
      }

// Check collision with pipes
      for (let i = 0; i < pipes.length; i++) {
        if (
          birdX + 32 >= pipes[i].x &&
          birdX <= pipes[i].x + 52 &&
          (birdY <= pipes[i].topHeight || birdY + 32 >= pipes[i].bottomHeight)
        ) {
          reset();
        }

// Increment score if bird passes a pipe
        if (birdX === pipes[i].x + 52) {
          score++;
        }
      }
    }

// Function to reset the game
    function reset() {
      birdY = 250;
      birdSpeedY = 0;
      score = 0;
      pipes = [];
    }

// Game loop
    function gameLoop() {
      // Clear canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Move bird
      birdY += birdSpeedY;
      birdSpeedY += gravity;

// Draw bird
      ctx.drawImage(birdImage, birdX, birdY, 32, 32);

// Generate and move pipes
      if (frames % 100 === 0) {
        const pipeHeight = Math.random() * 200 + 50;
        pipes.push({
          x: canvas.width,
          topHeight: pipeHeight,
          bottomHeight: pipeHeight + pipeGap,
        });
      }

pipes.forEach((pipe) => {
        pipe.x -= 2;
        ctx.drawImage(pipeImage, pipe.x, 0, 52, pipe.topHeight);
        ctx.drawImage(
          pipeImage,
          pipe.x,
          pipe.bottomHeight,
          52,
          canvas.height - pipe.bottomHeight
        );
      });

// Check collisions
      checkCollisions();

// Draw score
      ctx.fillStyle = "white";
      ctx.font = "30px Arial";
      ctx.fillText("Score: " + score, 10, 40);

// Animation frame
      requestAnimationFrame(gameLoop);
    }

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

To use this code, you'll need to create `bird.png` and `pipe.png` image files and place them in the same directory as the HTML file. The `bird.png` image should represent the bird pictogram, and `pipe.png` should represent the pipe pictogram.

The game can be played on a smartphone by tapping on the screen to make the bird jump. If the bird collides with the ground or a pipe, the game resets. The goal is to avoid the pipes and achieve the highest score possible. The score is displayed on the top left corner of the canvas.

Please note that the implementation provided here is a simplified version of Flappy Bird, focusing on the essential mechanics. It does not include advanced features like sound effects, high scores, or complex level design.