script.js

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

// Adjust canvas size for mobile
canvas.width = window.innerWidth; // Set canvas width to full screen width
canvas.height = window.innerHeight; // Set canvas height to full screen height

// Load images
const backgroundImg = new Image();
backgroundImg.src = "https://i.postimg.cc/VNwR8YjS/Background.png";

const birdImg = new Image();
birdImg.src = "https://i.postimg.cc/bJN9Z3Vp/Bird.png";

const pipeImg = new Image();
pipeImg.src = "https://i.postimg.cc/pdBBVgZs/Pipe.png";

const birdWidth = 40;
const birdHeight = 40;
let gravity = 0.4;  // Increased gravity for a faster fall
const lift = -6;    // Further reduced lift to make jumps smaller
let birdY = canvas.height / 2;
let birdVelocity = 0;

const pipes = [];
const pipeWidth = 100;
const pipeGap = 140;  // Gap between pipes, increased to make room for the bird
let pipeSpeed = 3;    // Increased pipe speed to make the game a little faster

let score = 0;
let gameOver = false;
let lastTime = 0;
const frameRate = 1000/ 60;  // Targeting ~60 frames per second

// Listen for touch events to make the bird fly
document.addEventListener('touchstart', flapBird);
document.addEventListener('keydown', flapBird);  // For keyboard support

function flapBird(event) {
  if (!gameOver) {
    birdVelocity = lift;
  }
  // Prevent page scrolling on mobile
  if (event.preventDefault) {
    event.preventDefault();
  }
}

function drawBackground() {
  ctx.drawImage(backgroundImg, 0, 0, canvas.width, canvas.height);
}

function drawBird() {
  birdVelocity += gravity;
  birdY += birdVelocity;
  ctx.drawImage(birdImg, 50, birdY, birdWidth, birdHeight);
}

function createPipes() {
  if (pipes.length === 0 || pipes[pipes.length - 1].x < canvas.width - 300) {
    const pipeHeight = Math.floor(Math.random() * (canvas.height - pipeGap - 20));
    const bottomPipeY = pipeHeight + pipeGap;

    if (bottomPipeY < canvas.height - 20) {
      pipes.push({ x: canvas.width, top: pipeHeight, bottom: bottomPipeY });
    }
  }
}

function drawPipes() {
  pipes.forEach((pipe, index) => {
    pipe.x -= pipeSpeed;

    // Draw top pipe
    ctx.drawImage(pipeImg, pipe.x, 0, pipeWidth, pipe.top);

    // Draw bottom pipe
    ctx.drawImage(pipeImg, pipe.x, pipe.bottom, pipeWidth, canvas.height - pipe.bottom);

    if (pipe.x + pipeWidth < 0) {
      pipes.splice(index, 1);
      score++;
    }
  });
}

function checkCollisions() {
  if (birdY < 0 || birdY + birdHeight > canvas.height) {
    gameOver = true;
  }

  pipes.forEach(pipe => {
    if (
      50 + birdWidth > pipe.x &&
      50 < pipe.x + pipeWidth &&
      (birdY < pipe.top || birdY + birdHeight > pipe.bottom)
    ) {
      gameOver = true;
    }
  });
}

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

function resetGame() {
  birdY = canvas.height / 2;
  birdVelocity = 0;
  pipes.length = 0;
  score = 0;
  gameOver = false;
}

function gameLoop(timestamp) {
  if (gameOver) {
    ctx.fillStyle = 'black';
    ctx.font = '30px Arial';
    ctx.fillText('Game Over! Tap to Restart', 50, canvas.height / 2);
    return;
  }

  if (timestamp - lastTime > frameRate) {
    lastTime = timestamp;

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    drawBackground();
    drawBird();
    createPipes();
    drawPipes();
    checkCollisions();
    drawScore();
  }

  requestAnimationFrame(gameLoop);
}

// Touch or keyboard to restart game
document.addEventListener('touchstart', function () {
  if (gameOver) {
    resetGame();
    gameLoop();
  }
});
document.addEventListener('keydown', function (event) {
  if (event.keyCode === 32 && gameOver) {
    resetGame();
    gameLoop();
  }
});

gameLoop(0);