AI game creator

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

No:46630

←

Prev Next

→

Flappy bird
Developer User20158｜Date and time 24/2/25 13:52:30
Build time 6.235 sec｜Game capacity 2.185KB｜

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 black;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="480" height="320"></canvas>

const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

const birdWidth = 40;
const birdHeight = 30;
const gravity = 0.8;
const jumpStrength = -12;
const pipeWidth = 60;
const pipeGap = 120;
const pipeSpeed = 2;
const pipeFrequency = 100;

let birdX = 50;
let birdY = canvas.height / 2;
let birdVelocity = 0;
let pipes = [];
let score = 0;

function drawBird() {
  ctx.fillStyle = "yellow";
  ctx.fillRect(birdX, birdY, birdWidth, birdHeight);
}

function drawPipe(pipeX, pipeY) {
  ctx.fillStyle = "green";
  ctx.fillRect(pipeX, 0, pipeWidth, pipeY);
  ctx.fillRect(pipeX, pipeY + pipeGap, pipeWidth, canvas.height - pipeY - pipeGap);
}

function drawScore() {
  ctx.fillStyle = "black";
  ctx.font = "24px Arial";
  ctx.fillText("Score: " + score, 10, 30);
}

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

pipes.forEach(pipe => {
    pipe.x -= pipeSpeed;
    if (birdX + birdWidth > pipe.x && 
        birdX < pipe.x + pipeWidth && 
        (birdY < pipe.y || birdY + birdHeight > pipe.y + pipeGap)) {
      alert("Game Over! Your score: " + score);
      document.location.reload();
    }
  });

pipes = pipes.filter(pipe => pipe.x + pipeWidth > 0);
  
  if (pipes[pipes.length - 1]?.x < canvas.width - pipeFrequency) {
    const pipeY = Math.floor(Math.random() * (canvas.height - pipeGap));
    pipes.push({ x: canvas.width, y: pipeY });
    score++;
  }

birdVelocity += gravity;
  birdY += birdVelocity;
  
  if (birdY < 0 || birdY + birdHeight > canvas.height) {
    alert("Game Over! Your score: " + score);
    document.location.reload();
  }
  
  drawBird();
  pipes.forEach(pipe => drawPipe(pipe.x, pipe.y));
  drawScore();
  
  requestAnimationFrame(updateGameArea);
}

document.addEventListener("keydown", function(event) {
  if (event.key === " ") {
    birdVelocity = jumpStrength;
  }
});

updateGameArea();
</script>
</body>
</html>