AI game creator

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

No:43007

102

←

Prev Next

→

Flappy bird
Developer User18914｜Date and time 24/2/13 23:27:27
Build time 15.362 sec｜Game capacity 3.947KB｜

Script

Score: 0

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Flappy Bird</title>
    <style>
      #gameCanvas {
        background-color: #70c5ce;
        position: absolute;
        top: 0;
        left: 0;
      }
      #bird {
        width: 50px;
        height: 50px;
        background-image: url('bird.png');
        position: absolute;
      }
      .pipe {
        width: 100px;
        height: 300px;
        background-color: green;
        position: absolute;
        overflow: hidden;
      }
      #score {
        font-family: Arial, sans-serif;
        font-size: 20px;
        color: #fff;
        position: absolute;
        top: 20px;
        right: 20px;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="500" height="500"></canvas>
    <div id="bird"></div>
    <div id="score">Score: 0</div>
    <script>
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");
      const bird = document.getElementById("bird");
      const scoreElement = document.getElementById("score");

const birdWidth = parseInt(getComputedStyle(bird).getPropertyValue("width"));
      const birdHeight = parseInt(getComputedStyle(bird).getPropertyValue("height"));

let birdY = canvas.height / 2 - birdHeight / 2;
      let score = 0;
      let pipes = [];

function drawCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "#70c5ce";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
      }

function drawBird() {
        bird.style.top = birdY + "px";
      }

function drawPipes() {
        for (let i = 0; i < pipes.length; i++) {
          const pipe = pipes[i];

if (pipe.x < -pipe.width) {
            // Remove the pipe if it goes beyond the left edge of the canvas
            pipes.splice(i, 1);
          } else {
            // Draw the pipe
            ctx.fillStyle = pipe.color;
            ctx.fillRect(pipe.x, 0, pipe.width, pipe.height);
            ctx.fillRect(pipe.x, pipe.y + pipe.height + 150, pipe.width, canvas.height - pipe.y - pipe.height - 150);
            pipe.x -= pipe.speed;

// Check for collision
            if (
              birdY < pipe.height ||
              birdY + birdHeight > pipe.y + pipe.height + 150 ||
              birdY + birdHeight > canvas.height
            ) {
              endGame();
            }

// If the bird passes the pipe, increase the score
            if (pipe.x + pipe.width < birdWidth) {
              score++;
              scoreElement.textContent = "Score: " + score;
            }
          }
        }
      }

function generatePipes() {
        const pipeWidth = 100;
        const pipeHeight = Math.floor(Math.random() * (canvas.height / 2)) + 50;
        const pipeGap = 200;
        const pipeSpeed = 2;
        const pipeColor = "green";

pipes.push({
          x: canvas.width,
          y: 0,
          width: pipeWidth,
          height: pipeHeight,
          speed: pipeSpeed,
          color: pipeColor,
        });

pipes.push({
          x: canvas.width,
          y: pipeHeight + pipeGap,
          width: pipeWidth,
          height: canvas.height - pipeHeight - pipeGap - 150,
          speed: pipeSpeed,
          color: pipeColor,
        });
      }

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

function jump() {
        birdY -= 50;
      }

document.addEventListener("keydown", function (event) {
        if (event.code === "Space") {
          jump();
        }
      });

document.addEventListener("touchstart", function () {
        jump();
      });

let gameInterval = setInterval(function () {
        drawCanvas();
        drawBird();
        drawPipes();
        generatePipes();
      }, 10);

</script>
  </body>
</html>