flappy brid with easy obstacles's game

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

No:10223

131

←

Prev Next

→

flappy brid with easy obstacles
Developer User4498｜Date and time 23/7/29 12:44:59
Build time 19.201 sec｜Game capacity 3.101KB｜

Script

Sure, here's an example implementation of Flappy Bird using JavaScript and HTML:

In this implementation, the game is displayed on a canvas element (`<canvas>`). The images for the bird, background, and pipes are loaded using the `Image` object. The bird's movement is controlled by the spacebar key. The pipes are randomly generated, and the game ends if the bird collides with a pipe or hits the bottom of the canvas. The score is displayed on the canvas. Please note that you would need to have the corresponding image files (`emozi_all/bird.png`, `emozi_all/bg.png`, `emozi_dog.png`, and `emozi_himawari.png`) in the same directory as the HTML file for the game to work properly.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

Sure, here's an example implementation of Flappy Bird using JavaScript and HTML:

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

const bird = new Image();
        bird.src = "bird.png";
        const bg = new Image();
        bg.src = "bg.png";
        const pipeNorth = new Image();
        pipeNorth.src = "pipeNorth.png";
        const pipeSouth = new Image();
        pipeSouth.src = "pipeSouth.png";

const gap = 85;
        const constant = pipeNorth.height + gap;

let bX = 10;
        let bY = 150;
        let gravity = 1.5;

const pipes = [];
        pipes[0] = {
          x: canvas.width,
          y: 0,
        };

let score = 0;

function draw() {
          ctx.drawImage(bg, 0, 0);

for (let i = 0; i < pipes.length; i++) {
            ctx.drawImage(pipeNorth, pipes[i].x, pipes[i].y);
            ctx.drawImage(pipeSouth, pipes[i].x, pipes[i].y + constant);

pipes[i].x--;

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

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

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

ctx.drawImage(bird, bX, bY);

bY += gravity;

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

requestAnimationFrame(draw);
        }

document.addEventListener("keydown", function (e) {
          if (e.key === " ") {
            bY -= 25;
          }
        });

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

Please note that you would need to have the corresponding image files (`bird.png`, `bg.png`, `pipeNorth.png`, and `pipeSouth.png`) in the same directory as the HTML file for the game to work properly.