<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }

    canvas {
      display: block;
    }

    #menu {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      font-family: Arial, sans-serif;
    }

    .button {
      font-size: 24px;
      padding: 10px 20px;
      margin: 10px;
      cursor: pointer;
    }
  </style>
  <title>2D Shooter Game</title>
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  <div id="menu">
    <div class="button" onclick="startGame()">Play</div>
    <div class="button" onclick="showAbout()">About</div>
    <div class="button" onclick="exitGame()">Exit</div>
  </div>
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const player = {
      x: canvas.width / 2,
      y: canvas.height / 2,
      width: 30,
      height: 30,
      speed: 5,
      invincible: false,
      invincibilityDuration: 3000,
      shootingSpeed: 500, // Milliseconds between shots
    };

    let score = 0;
    let level = 1;
    const maxPowerupsPerLevel = 3;
    const enemies = [];
    const bullets = [];
    const powerups = [];
    let enemiesRemaining = 0;
    let gameRunning = false;

    function drawPlayer() {
      ctx.fillStyle = player.invincible ? 'gold' : 'blue';
      ctx.fillRect(player.x - player.width / 2, player.y - player.height / 2, player.width, player.height);
    }

    function drawBullet(bullet) {
      ctx.fillStyle = 'red';
      ctx.fillRect(bullet.x - 2, bullet.y - 10, 4, 10);
    }

    function drawEnemy(enemy) {
      ctx.fillStyle = 'green';
      ctx.fillRect(enemy.x - enemy.width / 2, enemy.y - enemy.height / 2, enemy.width, enemy.height);
    }

    function drawPowerup(powerup) {
      ctx.fillStyle = 'yellow';
      ctx.fillRect(powerup.x - powerup.width / 2, powerup.y - powerup.height / 2, powerup.width, powerup.height);
    }

    function update() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      if (!gameRunning) {
        drawMainMenu();
        requestAnimationFrame(update);
        return;
      }

      // Player movement
      if (keys['ArrowLeft'] && player.x > player.width / 2) {
        player.x -= player.speed;
      }
      if (keys['ArrowRight'] && player.x < canvas.width - player.width / 2) {
        player.x += player.speed;
      }
      if (keys['ArrowUp'] && player.y > player.height / 2) {
        player.y -= player.speed;
      }
      if (keys['ArrowDown'] && player.y < canvas.height - player.height / 2) {
        player.y += player.speed;
      }

      // Bullet movement and collision
      for (const bullet of bullets) {
        bullet.y -= 10;

        for (const enemy of enemies) {
          if (
            bullet.x > enemy.x - enemy.width / 2 &&
            bullet.x < enemy.x + enemy.width / 2 &&
            bullet.y > enemy.y - enemy.height / 2 &&
            bullet.y < enemy.y + enemy.height / 2
          ) {
            // Bullet hit an enemy, remove both
            bullets.splice(bullets.indexOf(bullet), 1);
            enemies.splice(enemies.indexOf(enemy), 1);
            enemiesRemaining--;

            score += 10;

            if (enemiesRemaining === 0) {
              // All enemies eliminated, advance to the next level
              level++;
              resetLevel();
            }
          }
        }

        drawBullet(bullet);
      }

      // Powerup collision
      for (const powerup of powerups) {
        if (
          player.x - player.width / 2 < powerup.x + powerup.width / 2 &&
          player.x + player.width / 2 > powerup.x - powerup.width / 2 &&
          player.y - player.height / 2 < powerup.y + powerup.height / 2 &&
          player.y + player.height / 2 > powerup.y - powerup.height / 2
        ) {
          // Player collected a powerup, make invincible and increase shooting speed
          player.invincible = true;
          player.shootingSpeed = 250; // Faster shooting speed
          setTimeout(() => {
            player.invincible = false;
            player.shootingSpeed = 500; // Reset shooting speed
          }, player.invincibilityDuration);

          // Remove the powerup
          powerups.splice(powerups.indexOf(powerup), 1);
        }

        drawPowerup(powerup);
      }

      // Enemy movement (follow the player)
      for (const enemy of enemies) {
        const angle = Math.atan2(player.y - enemy.y, player.x - enemy.x);
        const speed = level;
        enemy.x += speed * Math.cos(angle);
        enemy.y += speed * Math.sin(angle);

        // Check for collision with player
        if (
          player.x - player.width / 2 < enemy.x + enemy.width / 2 &&
          player.x + player.width / 2 > enemy.x - enemy.width / 2 &&
          player.y - player.height / 2 < enemy.y + enemy.height / 2 &&
          player.y + player.height / 2 > enemy.y - enemy.height / 2
        ) {
          // Player hit by enemy, game over
          gameOver();
        }

        drawEnemy(enemy);
      }

      drawPlayer();

      // Display score and level
      ctx.fillStyle = 'black';
      ctx.font = '20px Arial';
      ctx.fillText('Score: ' + score, 10, 20);
      ctx.fillText('Level: ' + level, 10, 40);

      requestAnimationFrame(update);
    }

    function resetGame() {
      bullets.length = 0;
      enemies.length = 0;
      powerups.length = 0;

      // Reset player position
      player.x = canvas.width / 2;
      player.y = canvas.height / 2;

      // Reset score and level
      score = 0;
      level = 1;

      // Reset shooting speed
      player.shootingSpeed = 500;
      enemiesRemaining = 0;
    }

    function gameOver() {
      alert('Game Over! Your Score: ' + score);
      resetGame();
      resetLevel();
    }

    function startGame() {
      gameRunning = true;
      document.getElementById('menu').style.display = 'none';
      resetGame();
      resetLevel();
      update();
    }

    function resetLevel() {
      spawnPowerups();
      spawnEnemies();
    }

    function spawnPowerups() {
      for (let i = 0; i < maxPowerupsPerLevel; i++) {
        const powerup = {
          x: Math.random() * canvas.width,
          y: Math.random() * canvas.height,
          width: 20,
          height: 20,
        };
        powerups.push(powerup);
      }
    }

    function spawnEnemies() {
      enemiesRemaining = level * 5;
      for (let i = 0; i < enemiesRemaining; i++) {
        const enemy = {
          x: Math.random() * canvas.width,
          y: Math.random() * canvas.height,
          width: 30,
          height: 30,
        };
        enemies.push(enemy);
      }
    }

    function showAbout() {
      alert('This is a game coded by ChatGPT.');
    }

    function exitGame() {
      window.close();
    }

    const keys = {};

    window.addEventListener('keydown', (e) => {
      keys[e.key] = true;

      // Shoot bullets on pressing "f"
      if (e.key === 'f' && gameRunning) {
        if (player.invincible || Date.now() - lastShotTime > player.shootingSpeed) {
          bullets.push({ x: player.x, y: player.y });
          lastShotTime = Date.now();
        }
      }
    });

    window.addEventListener('keyup', (e) => {
      keys[e.key] = false;
    });

    let lastShotTime = Date.now();

  </script>
</body>
</html>

Get rid of all of the bugs and imporve the game to look WAYYYY more modern and add animations. Also, imporve the mechanics and add more mechanics.