Make a floppy bird game's game

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

No:13275

←

Prev Next

→

Make a floppy bird game
Developer User5843｜Date and time 23/8/27 19:38:16
Build time 23.429 sec｜Game capacity 3.555KB｜

Script

Sure! Here's a simple implementation of the popular game Flappy Bird in a single HTML file, using JavaScript and pictograms:

In the above code, you'll need to replace the `emozi_all/bird.png` and `emozi_apple.png` references with the actual paths to the corresponding pictogram images. This implementation will provide a playable version of the Floppy Bird game on smartphones and other devices. To control the bird, the player needs to tap the screen to make it jump. The goal is to navigate the bird through the gaps between pipes without colliding with them. If the bird collides with a pipe or hits the top/bottom of the canvas, the game is over. The game over screen will be displayed, indicating the end of the game. Please note that this is a simplified implementation and may not include all the features found in the original Flappy Bird game.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

Sure! Here's a simple implementation of the popular game Flappy Bird in a single HTML file, using JavaScript and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Floppy Bird Game</title>
  <style>
    #gameCanvas {
      background-color: #70c5ce;
      border: solid 2px #206b75;
      position: absolute;
      left: 20px;
      top: 20px;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="320" height="480"></canvas>
  <script>
    var canvas = document.getElementById("gameCanvas");
    var context = canvas.getContext("2d");

// Load pictograms as images
    var birdImage = new Image();
    birdImage.src = "bird.png";
    var pipeImage = new Image();
    pipeImage.src = "pipe.png";

var gameOver = false;
    var birdX = 50;
    var birdY = canvas.height / 2;
    var birdGravity = 2;
    var jumpForce = 25;
    var pipeGap = 150;
    var pipeSpeed = 2;
    var pipes = [
      { x: canvas.width, y: 0 },
      { x: canvas.width + (canvas.width / 2), y: 0 },
    ];

document.addEventListener("keydown", jump);

function update() {
      if (!gameOver) {
        // Clear canvas
        context.clearRect(0, 0, canvas.width, canvas.height);

// Bird
        birdY += birdGravity;
        context.drawImage(birdImage, birdX, birdY, 50, 50);

// Pipes
        for (var i = 0; i < pipes.length; i++) {
          var constant = pipeImage.height + pipeGap;
          context.drawImage(pipeImage, pipes[i].x, pipes[i].y);
          context.drawImage(
            pipeImage,
            pipes[i].x,
            pipes[i].y + constant
          );

pipes[i].x -= pipeSpeed;

// Collision detection
          if (
            birdX + birdImage.width >= pipes[i].x &&
            birdX <= pipes[i].x + pipeImage.width &&
            (birdY <= pipes[i].y + pipeImage.height ||
              birdY + birdImage.height >= pipes[i].y + constant)
          ) {
            gameOver = true;
          }

// Remove off-screen pipes
          if (pipes[i].x + pipeImage.width <= 0) {
            pipes.shift();
          }
        }

// Generate new pipes
        if (pipes[0].x < canvas.width - 200) {
          var newY = Math.floor(Math.random() * (canvas.height - pipeImage.height));
          pipes.push({ x: canvas.width, y: newY });
        }

// Game over
        if (birdY >= canvas.height || birdY <= 0) {
          gameOver = true;
        }

requestAnimationFrame(update);
      } else {
        // Game over screen
        context.fillStyle = "#000";
        context.font = "30px Arial";
        context.fillText("GAME OVER", 90, canvas.height / 2);
      }
    }

function jump(event) {
      if (event.keyCode === 32 && !gameOver) {
        birdY -= jumpForce;
      }
    }

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

In the above code, you'll need to replace the `bird.png` and `pipe.png` references with the actual paths to the corresponding pictogram images.

This implementation will provide a playable version of the Floppy Bird game on smartphones and other devices. To control the bird, the player needs to tap the screen to make it jump. The goal is to navigate the bird through the gaps between pipes without colliding with them. If the bird collides with a pipe or hits the top/bottom of the canvas, the game is over. The game over screen will be displayed, indicating the end of the game.

Please note that this is a simplified implementation and may not include all the features found in the original Flappy Bird game.