Flappy bird, yellow and orange bird, green pipes, city background, 1000 pipes's game

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

No:37379

←

Prev Next

→

Flappy bird, yellow and orange bird, green pipes, ..ALL
Developer User17064｜Date and time 24/1/21 2:58:36
Build time 11.921 sec｜Game capacity 3.281KB｜

Script

As an AI text-based model, I can assist you in providing a template for a Flappy Bird game implemented as a single HTML file. Please note that since I am an AI language model, I can only provide the code as text, and you would need to copy and paste it into an HTML file. Here's a basic implementation of the game using JavaScript and pictograms:

In the code above, make sure to replace the image paths `"emozi_all/bird.png"`, `"emozi_all/chicken.png"`, `"emozi_dog.png"` with the actual paths to the corresponding pictogram images that you have. Additionally, you can adjust the canvas width, height, and the size of the pictograms as per your requirements.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Flappy Bird Game</title>
    <style>
      canvas {
        border: 1px solid #000;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  
  <body>
    <canvas id="game-canvas" width="400" height="400"></canvas>

// Load pictogram images
        bird.src = "yellow_bird.png";
        bg.src = "city_background.png";
        pipeNorth.src = "green_pipes.png";
        pipeSouth.src = "green_pipes.png";

// Handling user interactions
        document.addEventListener("keydown", moveUp);

function moveUp() {
          bY -= 25;
        }

// Draw initial components
        function draw() {
          ctx.drawImage(bg, 0, 0);

// Draw the pipes
          for (var i = 0; i < pipe.length; i++) {
            constant = pipeNorth.height + gap;
            ctx.drawImage(pipeNorth, pipe[i].x, pipe[i].y);
            ctx.drawImage(pipeSouth, pipe[i].x, pipe[i].y + constant);
            pipe[i].x--;

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

// Detect collision
            if (
              (bX + bird.width >= pipe[i].x &&
                bX <= pipe[i].x + pipeNorth.width &&
                (bY <= pipe[i].y + pipeNorth.height ||
                  bY + bird.height >= pipe[i].y + constant)) ||
              bY + bird.height >= canvas.height
            ) {
              location.reload(); // reload the page
            }

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

// Draw the bird
          ctx.drawImage(bird, bX, bY);
          bY += gravity;

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

requestAnimationFrame(draw);
        }

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

In the code above, make sure to replace the image paths `"yellow_bird.png"`, `"city_background.png"`, `"green_pipes.png"` with the actual paths to the corresponding pictogram images that you have. Additionally, you can adjust the canvas width, height, and the size of the pictograms as per your requirements.