AI game creator

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

No:13321

←

Prev Next

→

Flappy bird game Rules: - The score increase when ..ALL
Developer User5869｜Date and time 23/8/28 2:39:07
Build time 16.993 sec｜Game capacity 2.65KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Flappy Bird Game</title>
    <style>
      canvas {
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>

// Game Variables
        var bird = new Image();
        var bg = new Image();
        var fg = new Image();
        var pipeUp = new Image();
        var pipeBottom = new Image();

bird.src = "bird.png";
        bg.src = "bg.png";
        fg.src = "fg.png";
        pipeUp.src = "pipeUp.png";
        pipeBottom.src = "pipeBottom.png";

var gap = 85;
        var score = 0;

// Bird Position
        var bX = 10;
        var bY = 150;
        var gravity = 1.5;

// Pipe Position
        var pipe = [];
        pipe[0] = {
          x: canvas.width,
          y: 0,
        };

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

function moveUp() {
          bY -= 25;
        }

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

for (var i = 0; i < pipe.length; i++) {
            ctx.drawImage(pipeUp, pipe[i].x, pipe[i].y);
            ctx.drawImage(pipeBottom, pipe[i].x, pipe[i].y + pipeUp.height + gap);

pipe[i].x--;

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

// Collision Detection
            if (
              (bX + bird.width >= pipe[i].x &&
                bX <= pipe[i].x + pipeUp.width &&
                (bY <= pipe[i].y + pipeUp.height ||
                  bY + bird.height >= pipe[i].y + pipeUp.height + gap)) ||
              bY + bird.height >= canvas.height - fg.height
            ) {
              location.reload(); // Reload the page
            }

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

ctx.drawImage(fg, 0, canvas.height - fg.height);
          ctx.drawImage(bird, bX, bY);

bY += gravity;

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

requestAnimationFrame(draw);
        }

draw();
      }

// Load the game when the page finishes loading
      window.onload = function () {
        main();
      };
    </script>
  </body>
</html>