game.js

const canvas = document.querySelector("#game");
const ctx = canvas.getContext("2d");

const ui = {
  levelText: document.querySelector("#levelText"),
  hpText: document.querySelector("#hpText"),
  hpBar: document.querySelector("#hpBar"),
  xpText: document.querySelector("#xpText"),
  xpBar: document.querySelector("#xpBar"),
  waveText: document.querySelector("#waveText"),
  killText: document.querySelector("#killText"),
  relicList: document.querySelector("#relicList"),
  startOverlay: document.querySelector("#startOverlay"),
  choiceOverlay: document.querySelector("#choiceOverlay"),
  gameOverOverlay: document.querySelector("#gameOverOverlay"),
  choices: document.querySelector("#choices"),
  resultText: document.querySelector("#resultText"),
};

const keys = new Set();
let state;
let lastTime = 0;
let paused = true;

const realmNames = [
  "炼气一层",
  "炼气二层",
  "炼气三层",
  "筑基初期",
  "筑基中期",
  "筑基后期",
  "金丹初成",
  "金丹圆满",
];

const upgrades = [
  {
    name: "御剑诀",
    text: "飞剑伤害 +8",
    apply: () => {
      state.player.damage += 8;
      addRelic("御剑诀：飞剑伤害提升");
    },
  },
  {
    name: "踏云步",
    text: "移动速度 +12%",
    apply: () => {
      state.player.speed *= 1.12;
      addRelic("踏云步：身法更轻");
    },
  },
  {
    name: "养气术",
    text: "灵息上限 +25，并回复 25",
    apply: () => {
      state.player.maxHp += 25;
      state.player.hp = Math.min(state.player.maxHp, state.player.hp + 25);
      addRelic("养气术：灵息更深");
    },
  },
  {
    name: "剑雨",
    text: "施法间隔 -15%",
    apply: () => {
      state.player.fireDelay *= 0.85;
      addRelic("剑雨：飞剑更密");
    },
  },
  {
    name: "玄铁剑胚",
    text: "飞剑体积与穿透 +1",
    apply: () => {
      state.player.projectileSize += 1.5;
      state.player.pierce += 1;
      addRelic("玄铁剑胚：飞剑可穿透");
    },
  },
  {
    name: "聚灵阵",
    text: "吸取灵蕴范围 +45",
    apply: () => {
      state.player.pickupRange += 45;
      addRelic("聚灵阵：灵蕴自来");
    },
  },
];

function createState() {
  return {
    running: true,
    elapsed: 0,
    wave: 1,
    spawnTimer: 0,
    kills: 0,
    particles: [],
    enemies: [],
    projectiles: [],
    orbs: [],
    player: {
      x: canvas.clientWidth / 2,
      y: canvas.clientHeight / 2,
      r: 16,
      hp: 100,
      maxHp: 100,
      speed: 230,
      damage: 22,
      level: 1,
      xp: 0,
      nextXp: 12,
      fireTimer: 0,
      fireDelay: 0.52,
      dashCooldown: 0,
      invincible: 0,
      projectileSize: 5,
      pierce: 0,
      pickupRange: 76,
    },
  };
}

function resizeCanvas() {
  const rect = canvas.getBoundingClientRect();
  const scale = window.devicePixelRatio || 1;
  canvas.width = Math.floor(rect.width * scale);
  canvas.height = Math.floor(rect.height * scale);
  ctx.setTransform(scale, 0, 0, scale, 0, 0);
}

function startGame() {
  resizeCanvas();
  state = createState();
  ui.relicList.innerHTML = "<li>青竹剑：每秒自动飞剑</li>";
  ui.startOverlay.classList.add("hidden");
  ui.gameOverOverlay.classList.add("hidden");
  paused = false;
  lastTime = performance.now();
  requestAnimationFrame(loop);
}

function loop(now) {
  const dt = Math.min((now - lastTime) / 1000, 0.033);
  lastTime = now;
  if (!paused && state?.running) {
    update(dt);
  }
  draw();
  updateUi();
  if (state?.running) requestAnimationFrame(loop);
}

function update(dt) {
  state.elapsed += dt;
  state.wave = 1 + Math.floor(state.elapsed / 24);

  updatePlayer(dt);
  updateSpawning(dt);
  updateProjectiles(dt);
  updateEnemies(dt);
  updateOrbs(dt);
  updateParticles(dt);

  if (state.player.hp <= 0) {
    endGame();
  }
}

function updatePlayer(dt) {
  const p = state.player;
  let dx = 0;
  let dy = 0;
  if (keys.has("w") || keys.has("arrowup")) dy -= 1;
  if (keys.has("s") || keys.has("arrowdown")) dy += 1;
  if (keys.has("a") || keys.has("arrowleft")) dx -= 1;
  if (keys.has("d") || keys.has("arrowright")) dx += 1;

  const len = Math.hypot(dx, dy) || 1;
  const dash = keys.has(" ") && p.dashCooldown <= 0;
  const speed = p.speed * (dash ? 3.1 : 1);
  p.x = clamp(p.x + (dx / len) * speed * dt, p.r, canvas.clientWidth - p.r);
  p.y = clamp(p.y + (dy / len) * speed * dt, p.r, canvas.clientHeight - p.r);

  if (dash) {
    p.dashCooldown = 1.8;
    p.invincible = 0.28;
    burst(p.x, p.y, "#d8b45f", 14);
  }

  p.dashCooldown -= dt;
  p.invincible -= dt;
  p.fireTimer -= dt;
  if (p.fireTimer <= 0) {
    castSword();
    p.fireTimer = p.fireDelay;
  }
}

function updateSpawning(dt) {
  state.spawnTimer -= dt;
  if (state.spawnTimer > 0) return;
  const count = Math.min(1 + Math.floor(state.wave / 2), 7);
  for (let i = 0; i < count; i += 1) spawnEnemy();
  state.spawnTimer = Math.max(0.42, 1.45 - state.wave * 0.07);
}

function spawnEnemy() {
  const w = canvas.clientWidth;
  const h = canvas.clientHeight;
  const side = Math.floor(Math.random() * 4);
  const pos = [
    { x: -24, y: Math.random() * h },
    { x: w + 24, y: Math.random() * h },
    { x: Math.random() * w, y: -24 },
    { x: Math.random() * w, y: h + 24 },
  ][side];
  const elite = Math.random() < Math.min(0.06 + state.wave * 0.01, 0.18);
  state.enemies.push({
    ...pos,
    r: elite ? 18 : 13,
    hp: elite ? 80 + state.wave * 12 : 34 + state.wave * 7,
    maxHp: elite ? 80 + state.wave * 12 : 34 + state.wave * 7,
    speed: elite ? 72 + state.wave * 3 : 96 + state.wave * 5,
    touch: elite ? 18 : 8,
    color: elite ? "#bb6550" : "#6fa56b",
    elite,
  });
}

function castSword() {
  const p = state.player;
  const target = nearestEnemy();
  if (!target) return;
  const angle = Math.atan2(target.y - p.y, target.x - p.x);
  state.projectiles.push({
    x: p.x,
    y: p.y,
    vx: Math.cos(angle) * 520,
    vy: Math.sin(angle) * 520,
    r: p.projectileSize,
    life: 1.25,
    damage: p.damage,
    pierce: p.pierce,
  });
}

function nearestEnemy() {
  let best = null;
  let bestDist = Infinity;
  for (const enemy of state.enemies) {
    const dist = distance(state.player, enemy);
    if (dist < bestDist) {
      best = enemy;
      bestDist = dist;
    }
  }
  return best;
}

function updateProjectiles(dt) {
  for (const sword of state.projectiles) {
    sword.x += sword.vx * dt;
    sword.y += sword.vy * dt;
    sword.life -= dt;
    for (const enemy of state.enemies) {
      if (enemy.dead || sword.hit?.has(enemy)) continue;
      if (distance(sword, enemy) < sword.r + enemy.r) {
        enemy.hp -= sword.damage;
        sword.hit ??= new Set();
        sword.hit.add(enemy);
        burst(enemy.x, enemy.y, "#f0d58c", 4);
        if (sword.pierce <= 0) sword.life = 0;
        sword.pierce -= 1;
      }
    }
  }
  state.projectiles = state.projectiles.filter((s) => s.life > 0);
}

function updateEnemies(dt) {
  const p = state.player;
  for (const enemy of state.enemies) {
    const angle = Math.atan2(p.y - enemy.y, p.x - enemy.x);
    enemy.x += Math.cos(angle) * enemy.speed * dt;
    enemy.y += Math.sin(angle) * enemy.speed * dt;

    if (distance(p, enemy) < p.r + enemy.r && p.invincible <= 0) {
      p.hp -= enemy.touch;
      p.invincible = 0.82;
      burst(p.x, p.y, "#e65d58", 10);
    }

    if (enemy.hp <= 0 && !enemy.dead) {
      enemy.dead = true;
      state.kills += 1;
      state.orbs.push({ x: enemy.x, y: enemy.y, r: enemy.elite ? 8 : 5, value: enemy.elite ? 5 : 2 });
      burst(enemy.x, enemy.y, enemy.color, enemy.elite ? 18 : 8);
    }
  }
  state.enemies = state.enemies.filter((e) => !e.dead);
}

function updateOrbs(dt) {
  const p = state.player;
  for (const orb of state.orbs) {
    const dist = distance(p, orb);
    if (dist < p.pickupRange) {
      const angle = Math.atan2(p.y - orb.y, p.x - orb.x);
      const pull = 160 + (p.pickupRange - dist) * 5;
      orb.x += Math.cos(angle) * pull * dt;
      orb.y += Math.sin(angle) * pull * dt;
    }
    if (dist < p.r + orb.r) {
      orb.collected = true;
      gainXp(orb.value);
    }
  }
  state.orbs = state.orbs.filter((o) => !o.collected);
}

function gainXp(value) {
  const p = state.player;
  p.xp += value;
  while (p.xp >= p.nextXp) {
    p.xp -= p.nextXp;
    p.level += 1;
    p.nextXp = Math.floor(p.nextXp * 1.32 + 6);
    showUpgradeChoices();
  }
}

function showUpgradeChoices() {
  paused = true;
  const picks = shuffle([...upgrades]).slice(0, 3);
  ui.choices.innerHTML = "";
  for (const option of picks) {
    const button = document.createElement("button");
    button.className = "choice";
    button.innerHTML = `<strong>${option.name}</strong><span>${option.text}</span>`;
    button.addEventListener("click", () => {
      option.apply();
      ui.choiceOverlay.classList.add("hidden");
      paused = false;
      lastTime = performance.now();
    });
    ui.choices.append(button);
  }
  ui.choiceOverlay.classList.remove("hidden");
}

function updateParticles(dt) {
  for (const particle of state.particles) {
    particle.x += particle.vx * dt;
    particle.y += particle.vy * dt;
    particle.life -= dt;
  }
  state.particles = state.particles.filter((p) => p.life > 0);
}

function burst(x, y, color, amount) {
  for (let i = 0; i < amount; i += 1) {
    const angle = Math.random() * Math.PI * 2;
    const speed = 40 + Math.random() * 150;
    state.particles.push({
      x,
      y,
      vx: Math.cos(angle) * speed,
      vy: Math.sin(angle) * speed,
      r: 2 + Math.random() * 3,
      color,
      life: 0.35 + Math.random() * 0.35,
    });
  }
}

function draw() {
  const w = canvas.clientWidth;
  const h = canvas.clientHeight;
  ctx.clearRect(0, 0, w, h);
  drawBackground(w, h);
  if (!state) return;
  for (const orb of state.orbs) drawOrb(orb);
  for (const sword of state.projectiles) drawSword(sword);
  for (const enemy of state.enemies) drawEnemy(enemy);
  drawPlayer(state.player);
  for (const particle of state.particles) drawParticle(particle);
}

function drawBackground(w, h) {
  ctx.fillStyle = "#14211a";
  ctx.fillRect(0, 0, w, h);
  ctx.strokeStyle = "rgba(216, 180, 95, 0.06)";
  ctx.lineWidth = 1;
  for (let x = 0; x < w; x += 48) {
    ctx.beginPath();
    ctx.moveTo(x, 0);
    ctx.lineTo(x, h);
    ctx.stroke();
  }
  for (let y = 0; y < h; y += 48) {
    ctx.beginPath();
    ctx.moveTo(0, y);
    ctx.lineTo(w, y);
    ctx.stroke();
  }
  ctx.fillStyle = "rgba(7, 12, 10, 0.22)";
  ctx.beginPath();
  ctx.arc(w * 0.18, h * 0.82, 130, 0, Math.PI * 2);
  ctx.arc(w * 0.82, h * 0.18, 110, 0, Math.PI * 2);
  ctx.fill();
}

function drawPlayer(p) {
  ctx.save();
  ctx.translate(p.x, p.y);
  ctx.globalAlpha = p.invincible > 0 ? 0.62 : 1;
  ctx.fillStyle = "#f0d58c";
  ctx.beginPath();
  ctx.arc(0, 0, p.r, 0, Math.PI * 2);
  ctx.fill();
  ctx.fillStyle = "#234333";
  ctx.beginPath();
  ctx.arc(0, -5, 5, 0, Math.PI * 2);
  ctx.fill();
  ctx.fillRect(-9, 1, 18, 12);
  ctx.strokeStyle = "#fff8d7";
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.moveTo(12, -10);
  ctx.lineTo(26, -22);
  ctx.stroke();
  ctx.restore();
}

function drawEnemy(enemy) {
  ctx.fillStyle = enemy.color;
  ctx.beginPath();
  ctx.arc(enemy.x, enemy.y, enemy.r, 0, Math.PI * 2);
  ctx.fill();
  ctx.fillStyle = "#111714";
  ctx.beginPath();
  ctx.arc(enemy.x - 4, enemy.y - 3, 2, 0, Math.PI * 2);
  ctx.arc(enemy.x + 4, enemy.y - 3, 2, 0, Math.PI * 2);
  ctx.fill();
  const width = enemy.r * 2;
  ctx.fillStyle = "rgba(0,0,0,0.35)";
  ctx.fillRect(enemy.x - enemy.r, enemy.y - enemy.r - 10, width, 4);
  ctx.fillStyle = "#d8b45f";
  ctx.fillRect(enemy.x - enemy.r, enemy.y - enemy.r - 10, width * (enemy.hp / enemy.maxHp), 4);
}

function drawSword(sword) {
  const angle = Math.atan2(sword.vy, sword.vx);
  ctx.save();
  ctx.translate(sword.x, sword.y);
  ctx.rotate(angle);
  ctx.strokeStyle = "#fff8d7";
  ctx.lineWidth = sword.r;
  ctx.beginPath();
  ctx.moveTo(-10, 0);
  ctx.lineTo(14, 0);
  ctx.stroke();
  ctx.restore();
}

function drawOrb(orb) {
  ctx.fillStyle = "#66d990";
  ctx.beginPath();
  ctx.arc(orb.x, orb.y, orb.r, 0, Math.PI * 2);
  ctx.fill();
  ctx.strokeStyle = "rgba(255, 248, 215, 0.8)";
  ctx.stroke();
}

function drawParticle(particle) {
  ctx.globalAlpha = Math.max(particle.life, 0);
  ctx.fillStyle = particle.color;
  ctx.beginPath();
  ctx.arc(particle.x, particle.y, particle.r, 0, Math.PI * 2);
  ctx.fill();
  ctx.globalAlpha = 1;
}

function updateUi() {
  if (!state) return;
  const p = state.player;
  ui.levelText.textContent = realmNames[p.level - 1] || `金丹 ${p.level}`;
  ui.hpText.textContent = `${Math.max(0, Math.ceil(p.hp))} / ${p.maxHp}`;
  ui.hpBar.style.width = `${Math.max(0, (p.hp / p.maxHp) * 100)}%`;
  ui.xpText.textContent = `${p.xp} / ${p.nextXp}`;
  ui.xpBar.style.width = `${(p.xp / p.nextXp) * 100}%`;
  ui.waveText.textContent = `第 ${state.wave} 波`;
  ui.killText.textContent = state.kills;
}

function addRelic(text) {
  const item = document.createElement("li");
  item.textContent = text;
  ui.relicList.append(item);
}

function endGame() {
  state.running = false;
  paused = true;
  ui.resultText.textContent = `你撑过 ${Math.floor(state.elapsed)} 秒，斩妖 ${state.kills} 只，修为达到 ${realmNames[state.player.level - 1] || state.player.level + " 层"}。`;
  ui.gameOverOverlay.classList.remove("hidden");
}

function clamp(value, min, max) {
  return Math.max(min, Math.min(max, value));
}

function distance(a, b) {
  return Math.hypot(a.x - b.x, a.y - b.y);
}

function shuffle(items) {
  for (let i = items.length - 1; i > 0; i -= 1) {
    const j = Math.floor(Math.random() * (i + 1));
    [items[i], items[j]] = [items[j], items[i]];
  }
  return items;
}

window.addEventListener("keydown", (event) => {
  keys.add(event.key.toLowerCase());
  if ([" ", "arrowup", "arrowdown", "arrowleft", "arrowright"].includes(event.key.toLowerCase())) {
    event.preventDefault();
  }
});

window.addEventListener("keyup", (event) => keys.delete(event.key.toLowerCase()));
window.addEventListener("resize", resizeCanvas);
document.querySelector("#startBtn").addEventListener("click", startGame);
document.querySelector("#restartBtn").addEventListener("click", startGame);

resizeCanvas();
draw();