pages/secret/asteroidDestroyer/game.js

"use strict";
// Canvas setup
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const targetFPS = 60;
const targetFrameTime = 1000 / targetFPS;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let lastFrameTime = performance.now();

// Game elements
const player = {
  x: canvas.width / 2,
  y: canvas.height - 60,
  width: 40,
  height: 40,
  color: "white",
  speed: 5,
  dx: 0,
};

let bullets = [];
let asteroids = [];
let items = [];
let score = 0;
let totalBulletsFired = 0;
let isGameOver = false;
let lastBulletTime = 0;
let ammo = 100; // Ammo counter

// Difficulty control
let asteroidSpawnInterval = 800; // Faster spawn rate
let asteroidSpeedMultiplier = 1.5; // Faster asteroids from the start
let difficultyIncreaseRate = 0.2; // Faster scaling every 10 seconds

// Controls
let canShoot = true; // Flag to control shooting
let rapidFireActive = false;
let shotgunActive = false;
let rainbowActive = false;
let lastShotgunTime = 0;

// Controls for sphere effects
let blueSphereCooldown = 0;
let yellowSphereCooldown = 0;
let greenSphereCooldown = 0;
let rainbowSphereCooldown = 0;

// Sphere types
const sphereTypes = ["blue", "yellow", "green", "rainbow"];

/// Control for left button press and release
function btnMoveLeft(isPressed) {
  if (isPressed) {
    player.dx = -player.speed; // Start moving left
  } else {
    player.dx = 0; // Stop moving when button is released
  }
}

// Control for shoot button click (simulates spacebar press)
function btnShoot() {
  if (canShoot && !isGameOver) {
    shootBullet();
    canShoot = false; // Prevent shooting until the button is "released"
  }
}

// Control for right button press and release
function btnMoveRight(isPressed) {
  if (isPressed) {
    player.dx = player.speed; // Start moving right
  } else {
    player.dx = 0; // Stop moving when button is released
  }
}

document.getElementById("shootBtn").addEventListener("mouseup", () => {
  canShoot = true; // Allow shooting again when button is released
});

window.addEventListener("keydown", (e) => {
  if (e.key === "ArrowLeft" || e.key === "a") player.dx = -player.speed;
  if (e.key === "ArrowRight" || e.key === "d") player.dx = player.speed;

  // Shoot only if it's not a hold, and we can shoot
  if (e.key === " " && canShoot && !isGameOver) {
    shootBullet();
    canShoot = false; // Prevent shooting until the key is released
  }

  if (e.key === "r" && isGameOver) restartGame();
});

window.addEventListener("keyup", (e) => {
  // Stop moving when either the arrow keys or the 'a'/'d' keys are released
  if (
    e.key === "ArrowLeft" ||
    e.key === "ArrowRight" ||
    e.key === "a" ||
    e.key === "d"
  ) {
    player.dx = 0;
  }

  // Allow shooting again when the space key is released
  if (e.key === " ") {
    canShoot = true;
  }
});

// Bullet mechanics with cooldown
function shootBullet() {
  const now = Date.now();
  if (now - lastBulletTime < 100) return; // Enforce cooldown of 0.1 seconds
  if (ammo <= 0) return; // Prevent shooting if ammo is empty
  lastBulletTime = now;
  ammo--; // Decrease ammo

  totalBulletsFired++; // Increment total bullets fired

  if (rapidFireActive) {
    // If rapid fire is active, fire bullets continuously with a short delay
    for (let i = 0; i < 3; i++) {
      setTimeout(() => {
        bullets.push({
          x: player.x + player.width / 2 - 2.5,
          y: player.y,
          width: 5,
          height: 10,
          color: "yellow",
          speed: 7,
        });
      }, i * 50); // Fire bullets with 50ms delay between shots
    }
  } else if (shotgunActive) {
    // Shotgun effect, firing 3 bullets with a spread
    for (let i = -1; i <= 1; i++) {
      bullets.push({
        x: player.x + player.width / 2 - 2.5,
        y: player.y,
        width: 5,
        height: 10,
        color: "yellow",
        speed: 7,
        angle: i * 10, // Spray the bullets at different angles
      });
    }
  } else {
    // Normal bullet
    bullets.push({
      x: player.x + player.width / 2 - 2.5,
      y: player.y,
      width: 5,
      height: 10,
      color: "yellow",
      speed: 7,
    });
  }
}

// Generate random color
function getRandomColor() {
  const colors = ["red", "blue", "green", "orange", "purple", "pink"];
  return colors[Math.floor(Math.random() * colors.length)];
}

// Asteroid mechanics
function createAsteroid() {
  const size = Math.random() * 40 + 30; // Bigger asteroids (min: 30, max: 70)
  asteroids.push({
    x: Math.random() * canvas.width,
    y: -size,
    width: size,
    height: size,
    color: getRandomColor(),
    speed: (Math.random() * 3 + 2) * asteroidSpeedMultiplier, // Faster initial speed
  });
}

// Item mechanics
function createItem() {
  const randomType =
    sphereTypes[Math.floor(Math.random() * sphereTypes.length)];
  const size = 30;
  const x = Math.random() * canvas.width;
  items.push({
    x: x,
    y: -size,
    width: size,
    height: size,
    type: randomType,
    color:
      randomType === "blue"
        ? "blue"
        : randomType === "yellow"
        ? "yellow"
        : randomType === "green"
        ? "green"
        : "rainbow",
    speed: 3,
  });
}

// Update game elements
function updatePlayer() {
  player.x += player.dx;
  if (player.x < 0) player.x = 0;
  if (player.x + player.width > canvas.width)
    player.x = canvas.width - player.width;
}

function updateBullets() {
  bullets.forEach((bullet, index) => {
    bullet.y -= bullet.speed;
    if (bullet.y + bullet.height < 0) bullets.splice(index, 1);
  });
}

function updateAsteroids() {
  asteroids.forEach((asteroid, index) => {
    asteroid.y += asteroid.speed;
    if (asteroid.y > canvas.height) asteroids.splice(index, 1);
  });
}

function updateItems() {
  items.forEach((item, index) => {
    item.y += item.speed;
    if (item.y > canvas.height) items.splice(index, 1);
    // Check if player collects the item
    if (
      player.x < item.x + item.width &&
      player.x + player.width > item.x &&
      player.y < item.y + item.height &&
      player.y + player.height > item.y
    ) {
      applyItemEffect(item.type);
      items.splice(index, 1); // Remove the item after it is collected
    }
  });
}

function applyItemEffect(type) {
  let points = Math.floor(Math.random() * 5) + 1; // Random points between 1 and 5
  if (type === "blue") {
    rapidFireActive = true;
    setTimeout(() => (rapidFireActive = false), 15000); // 15 seconds of rapid fire
  } else if (type === "yellow") {
    shotgunActive = true;
    setTimeout(() => (shotgunActive = false), 30000); // 30 seconds of shotgun
  } else if (type === "green") {
    ammo = 100; // Refill ammo
  } else if (type === "rainbow") {
    rapidFireActive = true;
    shotgunActive = true;
    setTimeout(() => {
      rapidFireActive = false;
      shotgunActive = false;
    }, 15000); // 15 seconds with all effects
  }
  score += points; // Add points when an item is collected
}

// Collision detection
function checkCollisions() {
  bullets.forEach((bullet, bIndex) => {
    asteroids.forEach((asteroid, aIndex) => {
      if (
        bullet.x < asteroid.x + asteroid.width &&
        bullet.x + bullet.width > asteroid.x &&
        bullet.y < asteroid.y + asteroid.height &&
        bullet.y + bullet.height > asteroid.y
      ) {
        bullets.splice(bIndex, 1);
        asteroids.splice(aIndex, 1);
        score += Math.floor(Math.random() * 5) + 1; // Add points when an asteroid is destroyed
        // Visual feedback for destroyed asteroid
        createExplosion(asteroid.x, asteroid.y);
      }
    });
  });

  asteroids.forEach((asteroid) => {
    if (
      player.x < asteroid.x + asteroid.width &&
      player.x + player.width > asteroid.x &&
      player.y < asteroid.y + asteroid.height &&
      player.y + player.height > asteroid.y
    ) {
      isGameOver = true;
    }
  });
}

// Explosion effect
function createExplosion(x, y) {
  ctx.fillStyle = "yellow";
  ctx.beginPath();
  ctx.arc(x, y, 20, 0, Math.PI * 2);
  ctx.fill();
  setTimeout(() => ctx.clearRect(x - 20, y - 20, 40, 40), 200); // Clear explosion after 200ms
}

// Draw elements
function drawPlayer() {
  ctx.fillStyle = player.color;
  ctx.fillRect(player.x, player.y, player.width, player.height);
}

function drawBullets() {
  bullets.forEach((bullet) => {
    ctx.fillStyle = bullet.color;
    ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
  });
}

function drawAsteroids() {
  asteroids.forEach((asteroid) => {
    ctx.fillStyle = asteroid.color;
    ctx.fillRect(asteroid.x, asteroid.y, asteroid.width, asteroid.height);
  });
}

function drawItems() {
  items.forEach((item) => {
    ctx.fillStyle = item.color;
    ctx.beginPath();
    ctx.arc(
      item.x + item.width / 2,
      item.y + item.height / 2,
      item.width / 2,
      0,
      Math.PI * 2
    );
    ctx.fill();
  });
}

function drawScore() {
  ctx.fillStyle = "white";
  ctx.font = "24px Arial";
  ctx.fillText(`Score: ${score}`, 20, 40); // Score at top-left corner
}

function drawAmmo() {
  ctx.fillStyle = "white";
  ctx.font = "24px Arial";
  ctx.fillText(`Ammo: ${ammo}`, 20, 70); // Ammo at top-left corner
}

function drawGameOver() {
  if (isGameOver) {
    ctx.fillStyle = "white";
    ctx.font = "40px Arial";
    ctx.textAlign = "center";
    ctx.fillText("Game Over!", canvas.width / 2, canvas.height / 2 - 40);
    ctx.font = "24px Arial";
    ctx.fillText(`Total Score: ${score}`, canvas.width / 2, canvas.height / 2);
    ctx.fillText(
      `Bullets Fired: ${totalBulletsFired}`,
      canvas.width / 2,
      canvas.height / 2 + 40
    );
    ctx.fillText(
      'Press "R" to Restart',
      canvas.width / 2,
      canvas.height / 2 + 80
    );
  }
}

// Restart game
function restartGame() {
  window.location.reload();
}

// Main game loop
function gameLoop() {
  const currentTime = performance.now();
  const elapsedTime = currentTime - lastFrameTime;

  if (elapsedTime >= targetFrameTime) {
    lastFrameTime = currentTime - (elapsedTime % targetFrameTime);
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    if (!isGameOver) {
      updatePlayer();
      updateBullets();
      updateAsteroids();
      updateItems();
      checkCollisions();
    }

    drawPlayer();
    drawBullets();
    drawAsteroids();
    drawItems();
    drawScore();
    drawAmmo();
    drawGameOver();

    if (!isGameOver) {
      if (Math.random() < 0.01) createAsteroid(); // 1% chance every frame to spawn an asteroid
      if (Math.random() < 0.005) createItem(); // 0.5% chance to spawn an item
    }
  }

  requestAnimationFrame(gameLoop);
}

// Start game loop
requestAnimationFrame(gameLoop);