Creat a flappy bird game's game

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

No:29898

←

Prev Next

→

Creat a flappy bird game
Developer User14662｜Date and time 23/12/19 23:53:08
Build time 15.559 sec｜Game capacity 2.524KB｜

Script

Sure! Here's an example of a flappy bird game implemented as a single HTML file using JavaScript and pictograms:

Note: This implementation assumes you have the pictogram assets (`emozi_all/pictogram.png`, `emozi_chicken.png`, and `emozi_rabbit.png`) in the same directory as the HTML file. You can replace them with your customized pictograms as needed.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a flappy bird game implemented as a single HTML file using JavaScript and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird</title>
  <style>
    canvas {
      background: #70c5ce;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="480" height="320"></canvas>
  <script>
    // Flappy Bird game implementation

const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");

// Pictogram assets
    const birdImg = new Image();
    birdImg.src = "bird.png";

const pipeTopImg = new Image();
    pipeTopImg.src = "pipe_top.png";

const pipeBottomImg = new Image();
    pipeBottomImg.src = "pipe_bottom.png";

// Game variables
    let birdX = 50;
    let birdY = 150;
    let birdGravity = 1;
    let score = 0;
    let pipe = [];
    pipe[0] = {
      x: canvas.width,
      y: 0
    };

// Game controls
    document.addEventListener("keydown", moveUp);

function moveUp(event) {
      if (event.keyCode === 32) { // Space key
        birdGravity = -15;
      }
    }

function draw() {
      ctx.drawImage(birdImg, birdX, birdY);

for (let i = 0; i < pipe.length; i++) {
        ctx.drawImage(pipeTopImg, pipe[i].x, pipe[i].y);
        ctx.drawImage(pipeBottomImg, pipe[i].x, pipe[i].y + pipeTopImg.height + 120);
        pipe[i].x--;

if (pipe[i].x === 100) {
          pipe.push({
            x: canvas.width,
            y: Math.floor(Math.random() * pipeTopImg.height) - pipeTopImg.height
          });
        }

// Collision detection
        if (
          (birdX + birdImg.width >= pipe[i].x &&
          birdX <= pipe[i].x + pipeTopImg.width &&
          (birdY <= pipe[i].y + pipeTopImg.height ||
          birdY + birdImg.height >= pipe[i].y + pipeTopImg.height + 120)) ||
          birdY + birdImg.height >= canvas.height
        ) {
          location.reload(); // Restart the game
        }

if (pipe[i].x === 5) {
          score++;
        }
      }

birdY += birdGravity;
      ctx.fillStyle = "#000";
      ctx.font = "20px Verdana";
      ctx.fillText("Score: " + score, 10, canvas.height - 20);

requestAnimationFrame(draw);
    }

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

Note: This implementation assumes you have the pictogram assets (`bird.png`, `pipe_top.png`, and `pipe_bottom.png`) in the same directory as the HTML file. You can replace them with your customized pictograms as needed.