dino game but with a twist:)

function setup() {
  createCanvas(windowWidth, windowHeight);
  groundY = height - 50; // Define the ground level
  gameSpeed = 6; // Initial speed of the game
  dino = new Dino();
  resetGame(); // Initialize game state
}

function draw() {
  background(220); // Light gray background

  // Draw ground line
  stroke(0);
  strokeWeight(2);
  line(0, groundY, width, groundY);

  // --- Game Over Logic ---
  if (gameOver) {
    textAlign(CENTER);
    textSize(48);
    fill(0);
    text("Game Over!", width / 2, height / 2 - 24);
    textSize(24);
    text("Score: " + score, width / 2, height / 2 + 24);
    text("Click or touch to restart", width / 2, height / 2 + 60);
    return; // Stop draw loop if game over
  }

  // --- GIF Active Logic (pauses game) ---
  if (showGif) {
    // Draw the GIF on the canvas
    if (gif.elt.naturalWidth > 0 && gif.elt.naturalHeight > 0) {
      let gifWidth = min(gif.elt.naturalWidth, width * 0.8);
      let gifHeight = min(gif.elt.naturalHeight, height * 0.8);
      let gifX = (width - gifWidth) / 2;
      let gifY = (height - gifHeight) / 2;
      image(gif.elt, gifX, gifY, gifWidth, gifHeight);
    }

    // Check if GIF duration is over
    if (millis() > gifEndTime) {
      console.log("GIF DURATION OVER! Resuming game.");
      showGif = false;
      gif.elt.style.display = 'none'; // Hide the HTML GIF element
      console.log("GIF hidden.");
    }
    return; // Stop game logic if GIF is showing
  }

  // --- Main Game Logic (only runs if not gameOver and not showGif) ---
  // Update and show Dino
  dino.move();
  dino.show();

  // Update and show Cacti
  for (let i = cacti.length - 1; i >= 0; i--) {
    cacti[i].move();
    cacti[i].show();

    // Check collision
    if (dino.collides(cacti[i])) {
      gameOver = true;
      gif.elt.style.display = 'none'; // Ensure GIF is hidden on game over
      console.log("Game Over! Dino collided.");
      break; // End game on collision
    }

    // Remove off-screen cacti and update score
    if (cacti[i].isOffScreen()) {
      cacti.splice(i, 1);
      score += 10;

      // 1 in 10 chance to show GIF when a cactus is successfully passed
      if (random(1) < 0.1) {
        console.log("TRIGGERING GIF! 1 in 10 chance hit.");
        showGif = true;
        gifEndTime = millis() + GIF_DURATION;
        gif.elt.style.display = 'block'; // Show the HTML GIF element
        console.log("GIF activated. gifEndTime:", gifEndTime);
      }
    }
  }

  // Add new cacti
  // Ensure there's a gap before adding the next cactus
  if (cacti.length === 0 || width - cacti[cacti.length - 1].x > random(300, 800)) {
    cacti.push(new Cactus(width));
  }

  // Display score
  textAlign(RIGHT);
  textSize(24);
  fill(0);
  text("Score: " + score, width - 20, 30);
}

function preload() {
  // Use createImg() to load the GIF as an HTML element.
  // p5.js's loadImage() function does not animate GIFs on the canvas directly.
  gif = createImg(gifURL, 'dino gif');
  // Directly hide the underlying HTML element using its style
  gif.elt.style.display = 'none';
  console.log("GIF element created and initially hidden.");
}

class Dino {
  constructor() {
    this.x = 50;
    this.y = groundY;
    this.size = 60;
    this.velY = 0;
    this.gravity = 0.8;
    this.jumpPower = -15;
    this.isJumping = false;
  }

  jump() {
    if (!this.isJumping) {
      this.velY = this.jumpPower;
      this.isJumping = true;
    }
  }

  move() {
    this.y += this.velY;
    this.velY += this.gravity;

    // Prevent falling through ground
    if (this.y >= groundY) {
      this.y = groundY;
      this.velY = 0;
      this.isJumping = false;
    }
  }

  show() {
    fill(0);
    // Draw the dino as a simple rectangle
    rect(this.x, this.y - this.size, this.size, this.size);
  }

  // Check collision with a cactus using Axis-Aligned Bounding Box (AABB)
  collides(cactus) {
    let dinoRect = {
      x: this.x,
      y: this.y - this.size,
      width: this.size,
      height: this.size
    };
    let cactusRect = {
      x: cactus.x,
      y: cactus.y - cactus.height,
      width: cactus.width,
      height: cactus.height
    };

    return dinoRect.x < cactusRect.x + cactusRect.width &&
           dinoRect.x + dinoRect.width > cactusRect.x &&
           dinoRect.y < cactusRect.y + cactusRect.height &&
           dinoRect.y + dinoRect.height > cactusRect.y;
  }
}

class Cactus {
  constructor(x) {
    this.x = x;
    this.y = groundY;
    this.width = random(20, 50); // Random cactus width
    this.height = random(40, 80); // Random cactus height
  }

  move() {
    this.x -= gameSpeed;
  }

  show() {
    fill(0, 150, 0); // Green color for cacti
    rect(this.x, this.y - this.height, this.width, this.height);
  }

  isOffScreen() {
    return this.x < -this.width;
  }
}

function mousePressed() {
  if (gameOver) {
    resetGame();
  } else if (!showGif) { // Only jump if game is playing and GIF is not active
    dino.jump();
  }
}

function touchStarted() {
  if (gameOver) {
    resetGame();
    return false; // Prevent default touch behavior
  } else if (!showGif) { // Only jump if game is playing and GIF is not active
    dino.jump();
    return false; // Prevent default touch behavior
  }
}

function resetGame() {
  dino = new Dino(); // Re-initialize dino
  cacti = [];
  score = 0;
  gameSpeed = 6;
  gameOver = false; // Reset game over flag
  showGif = false; // Reset GIF flag
  gif.elt.style.display = 'none'; // Ensure GIF is hidden on reset
  console.log("Game reset. GIF hidden.");
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  groundY = height - 50; // Recalculate ground position
  dino.y = groundY; // Reset dino position to new ground height
  // Cacti will naturally respawn at the correct height
}