QwenCoder Bullet Hell game

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bullet Hell Shooter</title>
<style>
  body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #000; }
  canvas { border: 1px solid #fff; touch-action: none; }
  .menu, .leaderboard {
    position: absolute;
    width: 80%;
    max-width: 400px;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    border-radius: 10px;
    text-align: center;
  }
  .leaderboard table {
    width: 100%;
    margin-top: 20px;
  }
  .leaderboard td, .leaderboard th {
    padding: 5px;
  }
</style>
</head>
<body>

<canvas id="gameCanvas"></canvas>
<div class="menu" id="introMenu">
  <h1>Bullet Hell Shooter</h1>
  <button onclick="startGame()">Start Game</button>
  <br><br>
  <a href="#" onclick="showLeaderboard(); return false;">View Leaderboard</a>
</div>
<div class="leaderboard" id="leaderboardMenu" style="display:none;">
  <h2>High Scores</h2>
  <table>
    <thead>
      <tr>
        <th>Rank</th>
        <th>Name</th>
        <th>Score</th>
      </tr>
    </thead>
    <tbody id="scoreTable">
    </tbody>
  </table>
  <br><br>
  <a href="#" onclick="hideLeaderboard(); return false;">Back to Menu</a>
</div>

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

let width = Math.min(window.innerWidth, 600);
let height = Math.min(window.innerHeight, 800);

canvas.width = width;
canvas.height = height;

const introMenu = document.getElementById('introMenu');
const leaderboardMenu = document.getElementById('leaderboardMenu');
const scoreTable = document.getElementById('scoreTable');

let playerX = width / 2;
let playerY = height - 50;
const playerRadius = 10;
const bullets = [];
const enemies = [];
const enemyBullets = [];
let score = 0;
let highScores = JSON.parse(localStorage.getItem('highScores')) || [];

function resizeCanvas() {
  width = Math.min(window.innerWidth, 600);
  height = Math.min(window.innerHeight, 800);
  canvas.width = width;
  canvas.height = height;
  playerX = width / 2;
  playerY = height - 50;
}

window.addEventListener('resize', resizeCanvas);

document.addEventListener('touchstart', function(e) {
  const touch = e.touches[0];
  if (playerX < touch.clientX) {
    moveRight();
  } else {
    moveLeft();
  }
});

document.addEventListener('keydown', function(e) {
  if (e.key === 'ArrowRight') {
    moveRight();
  } else if (e.key === 'ArrowLeft') {
    moveLeft();
  } else if (e.key === ' ') {
    shootBullet();
  }
});

function moveRight() {
  playerX = Math.min(playerX + 10, width - playerRadius);
}

function moveLeft() {
  playerX = Math.max(playerX - 10, playerRadius);
}

function shootBullet() {
  bullets.push({ x: playerX, y: playerY, dy: -10 });
}

function spawnEnemy() {
  const enemySize = 20;
  enemies.push({
    x: Math.random() * (width - enemySize),
    y: -enemySize,
    size: enemySize,
    dx: Math.random() * 4 - 2,
    dy: 3 + Math.random() * 2
  });
}

function spawnEnemyBullet(enemy) {
  enemyBullets.push({ x: enemy.x + enemy.size / 2, y: enemy.y + enemy.size, dy: 5 });
}

function drawPlayer() {
  ctx.beginPath();
  ctx.arc(playerX, playerY, playerRadius, 0, Math.PI * 2);
  ctx.fillStyle = 'blue';
  ctx.fill();
  ctx.closePath();
}

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

function drawBullets() {
  bullets.forEach(bullet => {
    ctx.beginPath();
    ctx.arc(bullet.x, bullet.y, 2, 0, Math.PI * 2);
    ctx.fillStyle = 'white';
    ctx.fill();
    ctx.closePath();
  });
}

function updateEnemies() {
  enemies.forEach((enemy, index) => {
    enemy.x += enemy.dx;
    enemy.y += enemy.dy;
    if (Math.random() < 0.01) {
      spawnEnemyBullet(enemy);
    }
    if (enemy.x < 0 || enemy.x > width - enemy.size) {
      enemy.dx = -enemy.dx;
    }
    if (enemy.y > height) {
      enemies.splice(index, 1);
    }
  });
}

function drawEnemies() {
  enemies.forEach(enemy => {
    ctx.fillRect(enemy.x, enemy.y, enemy.size, enemy.size);
    ctx.fillStyle = 'red';
  });
}

function updateEnemyBullets() {
  enemyBullets.forEach((bullet, index) => {
    bullet.y += bullet.dy;
    if (bullet.y > height) {
      enemyBullets.splice(index, 1);
    }
  });
}

function drawEnemyBullets() {
  enemyBullets.forEach(bullet => {
    ctx.beginPath();
    ctx.arc(bullet.x, bullet.y, 2, 0, Math.PI * 2);
    ctx.fillStyle = 'orange';
    ctx.fill();
    ctx.closePath();
  });
}

function checkCollisions() {
  bullets.forEach((bullet, bIndex) => {
    enemies.forEach((enemy, eIndex) => {
      if (bullet.x > enemy.x && bullet.x < enemy.x + enemy.size &&
          bullet.y > enemy.y && bullet.y < enemy.y + enemy.size) {
        score += 10;
        enemies.splice(eIndex, 1);
        bullets.splice(bIndex, 1);
        return;
      }
    });
  });

  enemyBullets.forEach((bullet, bIndex) => {
    if (bullet.x > playerX - playerRadius && bullet.x < playerX + playerRadius &&
        bullet.y > playerY - playerRadius && bullet.y < playerY + playerRadius) {
      endGame();
    }
  });
}

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

function updateHighScores() {
  highScores.push({ name: prompt("Enter your name:"), score: score });
  highScores.sort((a, b) => b.score - a.score);
  highScores = highScores.slice(0, 5); // Keep top 5 scores
  localStorage.setItem('highScores', JSON.stringify(highScores));
}

function showLeaderboard() {
  introMenu.style.display = 'none';
  leaderboardMenu.style.display = 'block';

  scoreTable.innerHTML = '';
  highScores.forEach((scoreEntry, index) => {
    const row = document.createElement('tr');
    const rankCell = document.createElement('td');
    rankCell.textContent = index + 1;
    const nameCell = document.createElement('td');
    nameCell.textContent = scoreEntry.name;
    const scoreCell = document.createElement('td');
    scoreCell.textContent = scoreEntry.score;

    row.appendChild(rankCell);
    row.appendChild(nameCell);
    row.appendChild(scoreCell);

    scoreTable.appendChild(row);
  });
}

function hideLeaderboard() {
  leaderboardMenu.style.display = 'none';
  introMenu.style.display = 'block';
}

function endGame() {
  updateHighScores();
  alert(`Game Over! Your score: ${score}`);
  bullets.length = 0;
  enemies.length = 0;
  enemyBullets.length = 0;
  playerX = width / 2;
  playerY = height - 50;
  score = 0;
  introMenu.style.display = 'block';
}

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

  drawPlayer();
  updateBullets();
  drawBullets();
  updateEnemies();
  drawEnemies();
  updateEnemyBullets();
  drawEnemyBullets();
  checkCollisions();
  drawScore();

  requestAnimationFrame(gameLoop);
}

function startGame() {
  introMenu.style.display = 'none';
  spawnInterval = setInterval(spawnEnemy, 1000);
  gameLoop();
}

document.getElementById('startButton').addEventListener('click', startGame);

</script>