A flappy bird game with score display. If losing, the score save to get the high score. Number of pipes and obstacles is unlimited.'s game

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

No:13121

←

Prev Next

→

A flappy bird game with score display. If losing, ..ALL
Developer User5791｜Date and time 23/8/27 2:07:03
Build time 19.818 sec｜Game capacity 2.64KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
<style>
canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #70c5ce;
}
</style>
</head>

<body>
<script>
// Constants
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);

const birdImg = new Image();
birdImg.src = 'bird.png';

const pipeImg = new Image();
pipeImg.src = 'pipe.png';

const obstacleGap = 200; // Gap between two obstacles
const pipeWidth = 80;
const pipeHeight = canvas.height - obstacleGap; // Height of the pipe

let birdX = 100; // Initial bird position
let birdY = canvas.height / 2;
let gravity = 2; // Gravity applied on bird

let pipes = [];
pipes[0] = {
  x: canvas.width,
  y: 0
};

let score = 0;
let highScore = localStorage.getItem('flappy_bird_high_score') || 0;

// Event listeners
document.addEventListener('keydown', flapUp);
canvas.addEventListener('click', flapUp);

// Main game loop
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

for (let i = 0; i < pipes.length; i++) {
    ctx.drawImage(pipeImg, pipes[i].x, pipes[i].y, pipeWidth, pipeHeight);
    
    // Collision detection
    if (birdX + birdImg.width > pipes[i].x && birdX < pipes[i].x + pipeWidth && (birdY < pipes[i].y + pipeHeight || birdY + birdImg.height > pipes[i].y + obstacleGap)) {
      gameOver();
    }

pipes[i].x--;

if (pipes[i].x === 100) {
      pipes.push({
        x: canvas.width,
        y: Math.floor(Math.random() * pipeHeight) - pipeHeight
      });
    }

// Increase score
    if (pipes[i].x === birdX) {
      score++;
    }

// Remove pipes when they go off the screen
    if (pipes[i].x + pipeWidth === 0) {
      pipes.splice(i, 1);
    }
  }

ctx.drawImage(birdImg, birdX, birdY, birdImg.width, birdImg.height);
  birdY += gravity;

ctx.font = '30px Arial';
  ctx.fillStyle = '#ffffff';
  ctx.fillText('Score: ' + score, 10, 50);
  ctx.fillText('High Score: ' + highScore, 10, 90);

// Game over
  if (birdY + birdImg.height > canvas.height || birdY < 0) {
    gameOver();
  } else {
    requestAnimationFrame(draw);
  }
}

function flapUp() {
  birdY -= 50;
}

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