AI game creator

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

No:40199

←

Prev Next

→

Flappy bird
Developer Flappy｜Date and time 24/2/1 16:25:37
Build time 13.909 sec｜Game capacity 2.963KB｜

Script

Sure! Here's an example of a Flappy Bird game implemented as a single HTML file using JavaScript:

Please note that the above code assumes that you have the images for the bird (`emozi_all/bird.png`), the North pipe (`emozi_chicken.png`), and the South pipe (`emozi_rabbit.png`) in the same directory as the HTML file.

←

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:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird</title>
  <style>
    canvas {
      border: 1px solid black;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="600"></canvas>
  <script>
    (function() {
      var canvas = document.getElementById("gameCanvas");
      var ctx = canvas.getContext("2d");

var birdImg = new Image();
      birdImg.src = "bird.png";

var pipeNorthImg = new Image();
      pipeNorthImg.src = "pipeNorth.png";

var pipeSouthImg = new Image();
      pipeSouthImg.src = "pipeSouth.png";

var bird = {
        x: 50,
        y: canvas.height / 2,
        speedY: 0,
        gravity: 0.8,
        spriteWidth: 50,
        spriteHeight: 41
      };

var pipes = [];

var score = 0;

document.addEventListener("keydown", function(e) {
        if (e.keyCode === 32) { // Space bar
          bird.speedY = -10;
        }
      });

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

ctx.drawImage(birdImg, bird.x, bird.y, bird.spriteWidth, bird.spriteHeight);

for (var i = 0; i < pipes.length; i++) {
          var pipe = pipes[i];
          ctx.drawImage(pipeNorthImg, pipe.x, 0);
          ctx.drawImage(pipeSouthImg, pipe.x, pipe.y);
        }

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

function update() {
        bird.speedY += bird.gravity;
        bird.y += bird.speedY;

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

if (pipe.x === 200) {
            pipes.push({
              x: canvas.width,
              y: Math.floor(Math.random() * pipeNorthImg.height) - pipeNorthImg.height
            });
          }

if (bird.x + bird.spriteWidth >= pipe.x && bird.x <= pipe.x + pipeNorthImg.width &&
              (bird.y <= pipe.y + pipeNorthImg.height || bird.y + bird.spriteHeight >= pipe.y + pipeNorthImg.height + 100)
          ) {
            gameOver();
          }

if (pipe.x === 0) {
            score++;
          }
        }

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

function gameOver() {
        alert("Game Over! Your score: " + score);
        location.reload();
      }

setInterval(function() {
        draw();
        update();
      }, 30);

pipes.push({ x: canvas.width, y: Math.floor(Math.random() * pipeNorthImg.height) - pipeNorthImg.height });
    })();
  </script>
</body>
</html>
```

Please note that the above code assumes that you have the images for the bird (`bird.png`), the North pipe (`pipeNorth.png`), and the South pipe (`pipeSouth.png`) in the same directory as the HTML file.