AI game creator

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

No:47482

←

Prev Next

→

Flappy bird
Developer User20368｜Date and time 24/2/28 4:38:52
Build time 12.105 sec｜Game capacity 2.318KB｜

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="400" height="600"></canvas>

const bird = {
  x: 50,
  y: 150,
  width: 30,
  height: 30,
  gravity: 0.6,
  velocity: 0,
  jump: -12
};

const pipe = {
  x: canvas.width,
  speed: 3,
  gap: 200,
  width: 50,
  getRandomHeight: function() {
    return Math.floor(Math.random() * (canvas.height - this.gap));
  }
};

let score = 0;
let gameSpeed = 2;
let isGameOver = false;

function drawBird() {
  ctx.fillStyle = 'yellow';
  ctx.fillRect(bird.x, bird.y, bird.width, bird.height);
}

function drawPipe() {
  ctx.fillStyle = 'green';
  ctx.fillRect(pipe.x, 0, pipe.width, pipe.height);
  ctx.fillRect(pipe.x, pipe.height + pipe.gap, pipe.width, canvas.height - pipe.height - pipe.gap);
}

function moveBird() {
  bird.velocity += bird.gravity;
  bird.y += bird.velocity;

if (bird.y >= canvas.height || bird.y + bird.height <= 0) {
    gameOver();
  }
}

function movePipe() {
  pipe.x -= pipe.speed;

if (pipe.x + pipe.width < 0) {
    pipe.x = canvas.width;
    pipe.height = pipe.getRandomHeight();
  }

if (bird.x + bird.width > pipe.x && bird.x < pipe.x + pipe.width && (bird.y < pipe.height || bird.y + bird.height > pipe.height + pipe.gap)) {
    gameOver();
  }

if (bird.x > pipe.x + pipe.width && !pipe.scored) {
    score++;
    pipe.scored = true;
  }

if (bird.x < pipe.x + pipe.width) {
    pipe.scored = false;
  }
}

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

function gameOver() {
  isGameOver = true;
}

function drawGameOver() {
  ctx.fillStyle = 'red';
  ctx.font = '50px Arial';
  ctx.fillText('Game Over', 100, 200);
}

function updateGame() {
  if (!isGameOver) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

movePipe();
    moveBird();
    drawPipe();
    drawBird();
    drawScore();
  } else {
    drawGameOver();
  }

requestAnimationFrame(updateGame);
}

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

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