Make a very realistic floppy bird game's game

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

No:13276

113

←

Prev Next

→

Make a very realistic floppy bird game
Developer User5843｜Date and time 23/8/27 19:40:05
Build time 28.337 sec｜Game capacity 4.385KB｜

Script

Sure! Here's an example of a single HTML file that implements a simplified version of the popular "Floppy Bird" game using JavaScript. It is designed to be played on a smartphone and uses pictograms for the visuals. Simply copy the code below and save it as an HTML file to play the game.

Remember to replace the `emozi_all/bird.png` and `emozi_apple.png` references with the actual paths to your pictogram files for the bird and pipe assets. You can create simple pictogram files in PNG format and name them accordingly. When you open the HTML file using a web browser on a smartphone, you should be able to play the "Floppy Bird" game by tapping the screen to make the bird jump. Avoid collision with the pipes and try to achieve a high score.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Floppy Bird Game</title>
    <style>
      canvas {
        border: 1px solid black;
        display: block;
        margin: 20px auto;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>
    <script>
      // Game Constants
      const GRAVITY = 0.6;
      const JUMP_HEIGHT = 12;
      const PIPE_GAP = 200;
      const PIPE_SPEED = 5;
      
      // Game Variables
      let canvas, ctx;
      let bird, pipes;
      let score;
      let isGameOver;

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

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

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

score = 0;
        isGameOver = false;

bird = {
          x: 50,
          y: canvas.height / 2,
          width: 50,
          height: 50,
          velocity: 0,
          jump: function () {
            this.velocity = -JUMP_HEIGHT;
          },
          update: function () {
            this.velocity += GRAVITY;
            this.y += this.velocity;
          },
          draw: function () {
            ctx.drawImage(birdImage, this.x, this.y, this.width, this.height);
          },
        };

pipes = [
          { x: canvas.width, y: 0 },
          { x: canvas.width + (canvas.width / 2), y: 0 },
        ];

canvas.addEventListener("click", function () {
          if (!isGameOver) {
            bird.jump();
          } else {
            initialize();
          }
        });

gameLoop();
      }

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

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

// Game Update
      function update() {
        if (isGameOver) return;

bird.update();

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

if (pipes[i].x < -80) {
            pipes.splice(i, 1);
            score++;
            i--;
          }
        }

if (pipes[pipes.length - 1].x < canvas.width - PIPE_GAP) {
          const pipe = {
            x: canvas.width,
            y: Math.random() * (canvas.height - 200) + 100,
          };
          pipes.push(pipe);
        }

if (bird.y > canvas.height) {
          gameOver();
        }

for (let i = 0; i < pipes.length; i++) {
          if (
            bird.x < pipes[i].x + 80 &&
            bird.x + bird.width > pipes[i].x &&
            (bird.y < pipes[i].y + 250 || bird.y + bird.height > pipes[i].y + PIPE_GAP) 
          ) {
            gameOver();
          }
        }
      }

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

bird.draw();

for (const pipe of pipes) {
          ctx.drawImage(pipeImage, pipe.x + 30, pipe.y, 80, 200);
          ctx.drawImage(pipeImage, pipe.x + 30, pipe.y + PIPE_GAP, 80, 200);
        }

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

if (isGameOver) {
          ctx.font = "60px Arial";
          ctx.fillText("Game Over!", 50, canvas.height / 2 - 30);

ctx.font = "30px Arial";
          ctx.fillText("Click to play again", 90, canvas.height / 2 + 10);
        }
      }

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

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

Remember to replace the `bird.png` and `pipe.png` references with the actual paths to your pictogram files for the bird and pipe assets. You can create simple pictogram files in PNG format and name them accordingly.

When you open the HTML file using a web browser on a smartphone, you should be able to play the "Floppy Bird" game by tapping the screen to make the bird jump. Avoid collision with the pipes and try to achieve a high score.