Times-Table-Invaders/game.js

"use strict";

const CONFIG = {
  title: "Times Table Invaders",
  virtualWidth: 90,
  virtualHeight: 120,
  groundHeight: 16,
  maxDt: 0.05,
  leaderboardKey: "tti.leaderboard.v1",
  leaderboardSize: 3,
  starCount: 90,
  fadedTitleAlpha: 0.07,
  laserDuration: 0.18,
  explosion: { min: 18, max: 26, ringMs: 450 },
  phases: [
    { at: 0, tables: [2, 10], spawnEvery: 4.0, fallSpeed: 10 },
    { at: 60, tables: [2, 4, 5, 10], spawnEvery: 3.5, fallSpeed: 12 },
    { at: 150, tables: [2, 3, 4, 5, 6, 7, 8, 9, 10], spawnEvery: 3.0, fallSpeed: 14 },
    { at: 300, tables: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], spawnEvery: 2.6, fallSpeed: 16 }
  ],
  ramp: { minSpawnEvery: 1.4, maxFallSpeed: 40, step: 20, speedPerStep: 0.8 }
};

const CANNON = {
  baseW: 16,
  baseH: 7,
  turretR: 4.5,
  barrelW: 3.6,
  barrelH: 9,
  rimW: 4.8,
  rimH: 1.2,
  recoilOffset: 2.2
};

const UFO = {
  radius: 4.5,
  spawnY: -6,
  minGap: 10.5,
  wobbleAmpMin: 1.2,
  wobbleAmpMax: 2.8,
  wobbleSpeedMin: 1.2,
  wobbleSpeedMax: 2.6
};

const State = Object.freeze({
  WELCOME: "welcome",
  PLAYING: "playing",
  GAME_OVER: "gameover"
});

const game = {
  state: State.WELCOME,
  score: 0,
  elapsed: 0,
  animTime: 0,
  spawnTimer: 0,
  ufos: [],
  stars: [],
  houses: [],
  particles: [],
  rings: [],
  shotQueue: [],
  laser: null,
  cannon: { recoil: 0, angle: -Math.PI / 2 },
  leaderboard: [],
  pendingSave: false
};

const els = {
  canvas: document.getElementById("scene"),
  welcome: document.getElementById("welcome-overlay"),
  gameover: document.getElementById("gameover-overlay"),
  startBtn: document.getElementById("start-btn"),
  restartBtn: document.getElementById("restart-btn"),
  answer: document.getElementById("answer"),
  fireBtn: document.getElementById("fire-btn"),
  score: document.getElementById("score"),
  finalScore: document.getElementById("final-score-value"),
  top3Block: document.getElementById("top3-block"),
  muteBtn: document.getElementById("mute-btn"),
  nameInput: document.getElementById("player-name"),
  saveScoreBtn: document.getElementById("save-score-btn"),
  leaderboardBody: document.querySelector("#welcome-leaderboard tbody"),
  leaderboardEmpty: document.getElementById("leaderboard-empty"),
  gameoverLeaderboardBody: document.querySelector("#gameover-leaderboard tbody"),
  gameoverLeaderboardEmpty: document.getElementById("gameover-leaderboard-empty")
};

const ctx = els.canvas.getContext("2d");
let viewScale = 1;

const AudioFX = {
  muted: true,
  audioCtx: null,
  ensure() {
    if (!this.audioCtx) {
      const Ctor = window.AudioContext || window.webkitAudioContext;
      if (!Ctor) return null;
      this.audioCtx = new Ctor();
    }
    if (this.audioCtx.state === "suspended") this.audioCtx.resume();
    return this.audioCtx;
  },
  laser() {
    if (this.muted) return;
    const ac = this.ensure();
    if (!ac) return;
    const t = ac.currentTime;
    const osc = ac.createOscillator();
    const gain = ac.createGain();
    osc.type = "square";
    osc.frequency.setValueAtTime(880, t);
    osc.frequency.exponentialRampToValueAtTime(140, t + 0.16);
    gain.gain.setValueAtTime(0.2, t);
    gain.gain.exponentialRampToValueAtTime(0.001, t + 0.2);
    osc.connect(gain);
    gain.connect(ac.destination);
    osc.start(t);
    osc.stop(t + 0.22);
  },
  explosion() {
    if (this.muted) return;
    const ac = this.ensure();
    if (!ac) return;
    const t = ac.currentTime;
    const dur = 0.45;
    const buffer = ac.createBuffer(1, Math.floor(ac.sampleRate * dur), ac.sampleRate);
    const data = buffer.getChannelData(0);
    for (let i = 0; i < data.length; i++) {
      data[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / data.length, 2);
    }
    const src = ac.createBufferSource();
    src.buffer = buffer;
    const filter = ac.createBiquadFilter();
    filter.type = "lowpass";
    filter.frequency.setValueAtTime(1600, t);
    filter.frequency.exponentialRampToValueAtTime(80, t + dur);
    const gain = ac.createGain();
    gain.gain.setValueAtTime(0.5, t);
    gain.gain.exponentialRampToValueAtTime(0.001, t + dur);
    src.connect(filter);
    filter.connect(gain);
    gain.connect(ac.destination);
    src.start(t);
  },
  gameOver() {
    if (this.muted) return;
    const ac = this.ensure();
    if (!ac) return;
    const notes = [329.63, 261.63, 196.0, 130.81];
    const step = 0.3;
    const t0 = ac.currentTime;
    notes.forEach((freq, i) => {
      const t = t0 + i * step;
      const osc = ac.createOscillator();
      const gain = ac.createGain();
      osc.type = "triangle";
      osc.frequency.setValueAtTime(freq, t);
      gain.gain.setValueAtTime(0.0001, t);
      gain.gain.linearRampToValueAtTime(0.3, t + 0.02);
      gain.gain.exponentialRampToValueAtTime(0.001, t + step * 1.8);
      osc.connect(gain);
      gain.connect(ac.destination);
      osc.start(t);
      osc.stop(t + step * 2);
    });
  }
};

function resizeCanvas() {
  const rect = els.canvas.getBoundingClientRect();
  if (rect.width === 0 || rect.height === 0) return;
  const dpr = window.devicePixelRatio || 1;
  const w = Math.max(1, Math.round(rect.width * dpr));
  const h = Math.max(1, Math.round(rect.height * dpr));
  if (w === els.canvas.width && h === els.canvas.height) return;
  els.canvas.width = w;
  els.canvas.height = h;
  viewScale = w / CONFIG.virtualWidth;
}

function show(el) {
  el.classList.remove("hidden");
}

function hide(el) {
  el.classList.add("hidden");
}

function loadLeaderboard() {
  try {
    const raw = localStorage.getItem(CONFIG.leaderboardKey);
    if (!raw) return [];
    const parsed = JSON.parse(raw);
    if (!Array.isArray(parsed)) return [];
    return parsed
      .filter((e) => e && typeof e.name === "string" && Number.isFinite(e.score))
      .map((e) => ({ name: e.name.slice(0, 16), score: Math.floor(e.score) }))
      .sort((a, b) => b.score - a.score)
      .slice(0, CONFIG.leaderboardSize);
  } catch (err) {
    return [];
  }
}

function saveLeaderboard(entries) {
  try {
    localStorage.setItem(CONFIG.leaderboardKey, JSON.stringify(entries));
  } catch (err) {
    /* storage unavailable: game keeps working without persistence */
  }
}

function renderLeaderboard(body, emptyEl) {
  body.textContent = "";
  if (game.leaderboard.length === 0) {
    show(emptyEl);
    return;
  }
  hide(emptyEl);
  game.leaderboard.forEach((entry, index) => {
    const tr = document.createElement("tr");
    const rankTd = document.createElement("td");
    rankTd.textContent = String(index + 1);
    const nameTd = document.createElement("td");
    nameTd.textContent = entry.name;
    const scoreTd = document.createElement("td");
    scoreTd.textContent = String(entry.score);
    tr.append(rankTd, nameTd, scoreTd);
    body.appendChild(tr);
  });
}

function renderAllLeaderboards() {
  renderLeaderboard(els.leaderboardBody, els.leaderboardEmpty);
  renderLeaderboard(els.gameoverLeaderboardBody, els.gameoverLeaderboardEmpty);
}

function updateScoreDisplay() {
  els.score.textContent = String(game.score);
}

// A score makes the top 3 if it is positive and either the board is not full
// or it beats the current lowest entry (strictly).
function qualifiesForLeaderboard(score) {
  if (score <= 0) return false;
  if (game.leaderboard.length < CONFIG.leaderboardSize) return true;
  const lowest = game.leaderboard[game.leaderboard.length - 1].score;
  return score > lowest;
}

// Insert the finished score at its correct rank, evicting the lowest entry so
// the board never exceeds leaderboardSize, then persist and dismiss the popup.
// Guarded by state + pendingSave so a rapid double Enter/click saves once only.
function saveScore() {
  if (game.state !== State.GAME_OVER || !game.pendingSave) return;
  const name = els.nameInput.value.trim().slice(0, 16);
  if (!name) {
    els.nameInput.focus();
    return;
  }
  const list = game.leaderboard.concat({ name, score: game.score });
  list.sort((a, b) => b.score - a.score);
  const top = list.slice(0, CONFIG.leaderboardSize);
  game.leaderboard = top;
  saveLeaderboard(top);
  renderAllLeaderboards();
  game.pendingSave = false;
  hide(els.top3Block);
}

function setControlsEnabled(enabled) {
  els.answer.disabled = !enabled;
  els.fireBtn.disabled = !enabled;
}

function enterWelcome() {
  show(els.welcome);
  hide(els.gameover);
  setControlsEnabled(false);
  renderAllLeaderboards();
}

function enterPlaying() {
  hide(els.welcome);
  hide(els.gameover);
  setControlsEnabled(true);
  els.answer.focus();
}

function enterGameOver() {
  setControlsEnabled(false);
  els.finalScore.textContent = String(game.score);
  if (qualifiesForLeaderboard(game.score)) {
    game.pendingSave = true;
    els.nameInput.value = "";
    show(els.top3Block);
    els.nameInput.focus();
  } else {
    game.pendingSave = false;
    hide(els.top3Block);
  }
  renderAllLeaderboards();
  show(els.gameover);
}

const stateEnter = {
  [State.WELCOME]: enterWelcome,
  [State.PLAYING]: enterPlaying,
  [State.GAME_OVER]: enterGameOver
};

function setState(next) {
  if (next === game.state) return;
  game.state = next;
  stateEnter[next]();
}

function startGame() {
  generateScenery();
  game.score = 0;
  game.elapsed = 0;
  game.spawnTimer = 0;
  game.ufos.length = 0;
  game.particles.length = 0;
  game.rings.length = 0;
  game.shotQueue.length = 0;
  game.laser = null;
  game.cannon.recoil = 0;
  game.cannon.angle = -Math.PI / 2;
  game.pendingSave = false;
  updateScoreDisplay();
  setState(State.PLAYING);
}

function endGame() {
  AudioFX.gameOver();
  setState(State.GAME_OVER);
}

function submitAnswer() {
  if (game.state !== State.PLAYING) return;
  const raw = els.answer.value;
  els.answer.value = "";
  els.answer.focus();
  game.cannon.recoil = 1;
  const value = parseInt(raw, 10);
  const matches = Number.isFinite(value)
    ? game.ufos.filter((u) => u.result === value).sort((a, b) => b.y - a.y)
    : [];
  if (matches.length > 0) {
    for (const ufo of matches) game.shotQueue.push(ufo);
  } else if (!game.laser) {
    game.cannon.angle = -Math.PI / 2;
    const tip = getCannonTip();
    game.laser = { origin: { x: tip.x, y: tip.y }, target: null, t: 0 };
    AudioFX.laser();
  }
}

let firePulseTimer = null;

function pulseFireButton() {
  els.fireBtn.classList.add("btn-pressed");
  if (firePulseTimer !== null) clearTimeout(firePulseTimer);
  firePulseTimer = setTimeout(() => {
    els.fireBtn.classList.remove("btn-pressed");
    firePulseTimer = null;
  }, 130);
}

function wireInput() {
  els.answer.addEventListener("input", () => {
    els.answer.value = els.answer.value.replace(/\D/g, "").slice(0, 3);
  });
  els.answer.addEventListener("keydown", (event) => {
    if (event.key === "Enter") {
      event.preventDefault();
      submitAnswer();
      pulseFireButton();
    }
  });
  els.fireBtn.addEventListener("click", submitAnswer);
}

function wireOverlays() {
  els.startBtn.addEventListener("click", startGame);
  els.restartBtn.addEventListener("click", startGame);
  els.saveScoreBtn.addEventListener("click", saveScore);
  els.nameInput.addEventListener("keydown", (event) => {
    if (event.key === "Enter") {
      event.preventDefault();
      saveScore();
    }
  });
  els.muteBtn.addEventListener("click", () => {
    AudioFX.muted = !AudioFX.muted;
    els.muteBtn.classList.toggle("muted", AudioFX.muted);
    els.muteBtn.setAttribute("aria-pressed", String(AudioFX.muted));
  });
}

let lastTime = null;

function frame(timeMs) {
  if (lastTime === null) lastTime = timeMs;
  const dt = Math.min(CONFIG.maxDt, Math.max(0, (timeMs - lastTime) / 1000));
  lastTime = timeMs;
  update(dt);
  draw();
  requestAnimationFrame(frame);
}

function update(dt) {
  game.animTime += dt;
  updateEffects(dt);
  if (game.state !== State.PLAYING) return;
  game.elapsed += dt;

  processShotQueue();

  game.spawnTimer -= dt;
  if (game.spawnTimer <= 0) {
    const phase = currentPhase();
    const diff = currentDifficulty(phase);
    const spawned = spawnUfo();
    game.spawnTimer = spawned ? diff.spawnEvery * (0.8 + Math.random() * 0.4) : 0.6;
  }

  const groundTop = CONFIG.virtualHeight - CONFIG.groundHeight;
  for (const ufo of game.ufos) {
    ufo.y += ufo.speed * dt;
    ufo.x = ufo.baseX + Math.sin(game.elapsed * ufo.wobbleSpeed + ufo.wobblePhase) * ufo.wobbleAmp;
  }
  for (const ufo of game.ufos) {
    if (ufo.y + UFO.radius >= groundTop) {
      endGame();
      return;
    }
  }
}

function updateEffects(dt) {
  if (game.cannon.recoil > 0) {
    game.cannon.recoil = Math.max(0, game.cannon.recoil - dt * 4);
  }
  if (game.laser) {
    game.laser.t += dt;
    if (game.laser.t >= CONFIG.laserDuration) {
      const target = game.laser.target;
      game.laser = null;
      if (target && game.state === State.PLAYING && game.ufos.includes(target)) {
        explodeUfo(target);
      }
    }
  } else {
    const rest = -Math.PI / 2;
    const diff = rest - game.cannon.angle;
    if (Math.abs(diff) > 0.001) {
      game.cannon.angle += diff * Math.min(1, dt * 10);
    } else {
      game.cannon.angle = rest;
    }
  }
  for (let i = game.particles.length - 1; i >= 0; i--) {
    const pt = game.particles[i];
    pt.life -= dt;
    if (pt.life <= 0) {
      game.particles.splice(i, 1);
      continue;
    }
    pt.x += pt.vx * dt;
    pt.y += pt.vy * dt;
  }
  for (let i = game.rings.length - 1; i >= 0; i--) {
    const ring = game.rings[i];
    ring.t += dt;
    if (ring.t >= ring.duration) game.rings.splice(i, 1);
  }
}

function processShotQueue() {
  if (game.laser) return;
  let target = null;
  while (game.shotQueue.length > 0) {
    const candidate = game.shotQueue.shift();
    if (game.ufos.includes(candidate)) {
      target = candidate;
      break;
    }
  }
  if (!target) return;
  const pivot = getCannonPivot();
  game.cannon.angle = Math.atan2(target.y - pivot.y, target.x - pivot.x);
  const tip = getCannonTip();
  game.laser = { origin: { x: tip.x, y: tip.y }, target, t: 0 };
  game.cannon.recoil = 1;
  AudioFX.laser();
}

const EXPLOSION_COLORS = ["#ffd76a", "#ff9d5c", "#8ee7ff", "#ffffff", "#b18cff"];

function explodeUfo(ufo) {
  const idx = game.ufos.indexOf(ufo);
  if (idx !== -1) game.ufos.splice(idx, 1);
  AudioFX.explosion();
  game.score += 1;
  updateScoreDisplay();
  const count = CONFIG.explosion.min + Math.floor(Math.random() * (CONFIG.explosion.max - CONFIG.explosion.min + 1));
  for (let i = 0; i < count; i++) {
    const angle = Math.random() * Math.PI * 2;
    const speed = 6 + Math.random() * 16;
    const life = 0.35 + Math.random() * 0.35;
    game.particles.push({
      x: ufo.x,
      y: ufo.y,
      vx: Math.cos(angle) * speed,
      vy: Math.sin(angle) * speed,
      r: 0.3 + Math.random() * 0.6,
      color: pick(EXPLOSION_COLORS),
      life,
      maxLife: life
    });
  }
  game.rings.push({ x: ufo.x, y: ufo.y, t: 0, duration: CONFIG.explosion.ringMs / 1000 });
}

function pick(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

function cartoonFont(size) {
  return 'bold ' + size + 'px "Comic Sans MS", "Chalkboard SE", "Marker Felt", "Segoe UI", sans-serif';
}

function traceRoundRect(x, y, w, h, r) {
  const rr = Math.min(r, w / 2, h / 2);
  ctx.beginPath();
  ctx.moveTo(x + rr, y);
  ctx.lineTo(x + w - rr, y);
  ctx.arcTo(x + w, y, x + w, y + rr, rr);
  ctx.lineTo(x + w, y + h - rr);
  ctx.arcTo(x + w, y + h, x + w - rr, y + h, rr);
  ctx.lineTo(x + rr, y + h);
  ctx.arcTo(x, y + h, x, y + h - rr, rr);
  ctx.lineTo(x, y + rr);
  ctx.arcTo(x, y, x + rr, y, rr);
  ctx.closePath();
}

function generateStars() {
  const skyBottom = CONFIG.virtualHeight - CONFIG.groundHeight;
  game.stars = [];
  for (let i = 0; i < CONFIG.starCount; i++) {
    const r = 0.25 + Math.random() * 0.45;
    game.stars.push({
      x: Math.random() * CONFIG.virtualWidth,
      y: 1 + Math.random() * (skyBottom - 3),
      r,
      baseAlpha: 0.35 + Math.random() * 0.5,
      phase: Math.random() * Math.PI * 2,
      speed: 0.6 + Math.random() * 2.2,
      bright: r > 0.58
    });
  }
}

const HOUSE_BODIES = ["#e8d5b5", "#d9b38c", "#c98f75", "#b56576"];
const HOUSE_ROOFS = ["#8d5b4f", "#7f4a3c", "#9c6644", "#6d597a"];

function generateHouses() {
  const count = 3 + Math.floor(Math.random() * 3);
  const houses = [];
  let attempts = 0;
  while (houses.length < count && attempts < 80) {
    attempts++;
    const w = 8 + Math.random() * 5;
    const x = 2 + Math.random() * (CONFIG.virtualWidth - 4 - w);
    if (houses.some((o) => Math.abs(o.x - x) < o.w / 2 + w / 2 + 3)) continue;
    houses.push({
      x,
      w,
      h: 6 + Math.random() * 4,
      roofH: 3 + Math.random() * 2,
      body: pick(HOUSE_BODIES),
      roof: pick(HOUSE_ROOFS)
    });
  }
  game.houses = houses;
}

function generateScenery() {
  generateStars();
  generateHouses();
}

function currentPhase() {
  let phase = CONFIG.phases[0];
  for (const p of CONFIG.phases) {
    if (game.elapsed >= p.at) phase = p;
  }
  return phase;
}

// Post-phase-4 gradual ramp: once the final phase begins, fall speed eases up
// toward CONFIG.ramp.maxFallSpeed and the spawn interval eases down toward
// CONFIG.ramp.minSpawnEvery. The pace is set by speedPerStep per `step` seconds,
// so one full ramp window = (cap - base) / speedPerStep * step.
function currentDifficulty(phase) {
  const last = CONFIG.phases[CONFIG.phases.length - 1];
  if (phase !== last) return { fallSpeed: phase.fallSpeed, spawnEvery: phase.spawnEvery };
  const into = Math.max(0, game.elapsed - last.at);
  const total = ((CONFIG.ramp.maxFallSpeed - last.fallSpeed) / CONFIG.ramp.speedPerStep) * CONFIG.ramp.step;
  const p = total > 0 ? Math.min(1, into / total) : 1;
  return {
    fallSpeed: Math.min(last.fallSpeed + (CONFIG.ramp.maxFallSpeed - last.fallSpeed) * p, CONFIG.ramp.maxFallSpeed),
    spawnEvery: Math.max(CONFIG.ramp.minSpawnEvery, last.spawnEvery - (last.spawnEvery - CONFIG.ramp.minSpawnEvery) * p)
  };
}

function spawnUfo() {
  const phase = currentPhase();
  const diff = currentDifficulty(phase);
   const table = pick(phase.tables);
   const other = 2 + Math.floor(Math.random() * 11);
  const pair = Math.random() < 0.5 ? [table, other] : [other, table];
  const a = pair[0];
  const b = pair[1];
  const margin = UFO.radius + 1;
  for (let attempt = 0; attempt < 8; attempt++) {
    const amp = UFO.wobbleAmpMin + Math.random() * (UFO.wobbleAmpMax - UFO.wobbleAmpMin);
    const lo = margin + amp;
    const hi = CONFIG.virtualWidth - margin - amp;
    const baseX = lo + Math.random() * (hi - lo);
    if (game.ufos.some((u) => u.y < 20 && Math.abs(u.baseX - baseX) < UFO.minGap)) continue;
    game.ufos.push({
      a,
      b,
      result: a * b,
      baseX,
      x: baseX,
      y: UFO.spawnY,
      speed: diff.fallSpeed,
      wobbleAmp: amp,
      wobblePhase: Math.random() * Math.PI * 2,
      wobbleSpeed: UFO.wobbleSpeedMin + Math.random() * (UFO.wobbleSpeedMax - UFO.wobbleSpeedMin)
    });
    return true;
  }
  return false;
}

function drawSky() {
  const w = CONFIG.virtualWidth;
  const h = CONFIG.virtualHeight;
  const sky = ctx.createLinearGradient(0, 0, 0, h);
  sky.addColorStop(0, "#070b21");
  sky.addColorStop(1, "#1c2452");
  ctx.fillStyle = sky;
  ctx.fillRect(0, 0, w, h);
}

function drawFadedTitle() {
  const maxW = CONFIG.virtualWidth - 8;
  const lines = ["TIMES TABLE", "INVADERS"];
  ctx.save();
  ctx.globalAlpha = CONFIG.fadedTitleAlpha;
  ctx.fillStyle = "#ffffff";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  let y = 24;
  for (const line of lines) {
    let size = 9;
    ctx.font = cartoonFont(size);
    const tw = ctx.measureText(line).width;
    if (tw > maxW) size *= maxW / tw;
    ctx.font = cartoonFont(size);
    ctx.fillText(line, CONFIG.virtualWidth / 2, y);
    y += size * 1.4;
  }
  ctx.restore();
}

function drawStars() {
  const t = game.animTime;
  ctx.fillStyle = "#dfe6ff";
  for (const s of game.stars) {
    const twinkle = 0.5 + 0.5 * Math.sin(t * s.speed + s.phase);
    ctx.globalAlpha = s.baseAlpha * (0.3 + 0.7 * twinkle);
    ctx.beginPath();
    ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
    ctx.fill();
    if (s.bright) {
      const len = s.r * (1.6 + 1.4 * twinkle);
      ctx.strokeStyle = "#dfe6ff";
      ctx.lineWidth = 0.12;
      ctx.beginPath();
      ctx.moveTo(s.x - len, s.y);
      ctx.lineTo(s.x + len, s.y);
      ctx.moveTo(s.x, s.y - len);
      ctx.lineTo(s.x, s.y + len);
      ctx.stroke();
    }
  }
  ctx.globalAlpha = 1;
}

function drawGround() {
  const w = CONFIG.virtualWidth;
  const h = CONFIG.virtualHeight;
  const top = h - CONFIG.groundHeight;
  const grass = ctx.createLinearGradient(0, top, 0, h);
  grass.addColorStop(0, "#3fae5a");
  grass.addColorStop(1, "#237a38");
  ctx.fillStyle = grass;
  ctx.fillRect(0, top, w, CONFIG.groundHeight);
  ctx.fillStyle = "rgba(255, 255, 255, 0.14)";
  ctx.fillRect(0, top, w, 0.5);
}

function drawHouse(house) {
  const groundTop = CONFIG.virtualHeight - CONFIG.groundHeight;
  const bodyTop = groundTop - house.h;
  ctx.fillStyle = house.body;
  ctx.fillRect(house.x, bodyTop, house.w, house.h);
  ctx.fillStyle = house.roof;
  ctx.beginPath();
  ctx.moveTo(house.x - 1, bodyTop);
  ctx.lineTo(house.x + house.w / 2, bodyTop - house.roofH);
  ctx.lineTo(house.x + house.w + 1, bodyTop);
  ctx.closePath();
  ctx.fill();
  const dw = Math.min(2.4, house.w * 0.3);
  const dh = Math.min(3.6, house.h * 0.55);
  ctx.fillStyle = "#5d4127";
  ctx.fillRect(house.x + house.w / 2 - dw / 2, groundTop - dh, dw, dh);
  const ww = Math.min(2, house.w * 0.26);
  ctx.fillStyle = "#ffe9a8";
  ctx.fillRect(house.x + house.w * 0.14, bodyTop + house.h * 0.28, ww, ww);
}

function getCannonPivot() {
  const baseTop = CONFIG.virtualHeight - CANNON.baseH;
  return { x: CONFIG.virtualWidth / 2, y: baseTop - CANNON.turretR * 0.55 };
}

function getCannonTip() {
  const pivot = getCannonPivot();
  const len = CANNON.barrelH - game.cannon.recoil * CANNON.recoilOffset;
  return {
    x: pivot.x + Math.cos(game.cannon.angle) * len,
    y: pivot.y + Math.sin(game.cannon.angle) * len
  };
}

function drawCannon() {
  const pivot = getCannonPivot();
  const h = CONFIG.virtualHeight;
  const baseTop = h - CANNON.baseH;
  const recoil = game.cannon.recoil * CANNON.recoilOffset;

  ctx.fillStyle = "#3d4668";
  ctx.beginPath();
  ctx.moveTo(pivot.x - CANNON.baseW / 2, h);
  ctx.lineTo(pivot.x - CANNON.baseW / 2 + 2, baseTop);
  ctx.lineTo(pivot.x + CANNON.baseW / 2 - 2, baseTop);
  ctx.lineTo(pivot.x + CANNON.baseW / 2, h);
  ctx.closePath();
  ctx.fill();

  ctx.save();
  ctx.translate(pivot.x, pivot.y);
  ctx.rotate(game.cannon.angle + Math.PI / 2);
  const barrel = ctx.createLinearGradient(-CANNON.barrelW / 2, 0, CANNON.barrelW / 2, 0);
  barrel.addColorStop(0, "#7d8ac0");
  barrel.addColorStop(0.5, "#c3cdf2");
  barrel.addColorStop(1, "#66739f");
  ctx.fillStyle = barrel;
  traceRoundRect(-CANNON.barrelW / 2, -CANNON.barrelH + recoil + CANNON.rimH, CANNON.barrelW, CANNON.barrelH - CANNON.rimH, 1.2);
  ctx.fill();

  ctx.fillStyle = "#aab6e0";
  traceRoundRect(-CANNON.rimW / 2, -CANNON.barrelH + recoil, CANNON.rimW, CANNON.rimH, 0.5);
  ctx.fill();
  ctx.restore();

  ctx.fillStyle = "#57648f";
  ctx.beginPath();
  ctx.arc(pivot.x, pivot.y, CANNON.turretR, 0, Math.PI * 2);
  ctx.fill();
}

function drawUfo(ufo) {
  const x = ufo.x;
  const y = ufo.y;
  const r = UFO.radius;

  const domeR = r * 0.58;
  const dome = ctx.createLinearGradient(0, y - domeR, 0, y);
  dome.addColorStop(0, "rgba(170, 235, 255, 0.95)");
  dome.addColorStop(1, "rgba(70, 130, 210, 0.5)");
  ctx.fillStyle = dome;
  ctx.beginPath();
  ctx.arc(x, y - r * 0.08, domeR, Math.PI, 0);
  ctx.closePath();
  ctx.fill();

  ctx.strokeStyle = "rgba(255, 255, 255, 0.75)";
  ctx.lineWidth = 0.3;
  ctx.beginPath();
  ctx.arc(x - domeR * 0.1, y - r * 0.08, domeR * 0.6, Math.PI * 1.15, Math.PI * 1.75);
  ctx.stroke();

  const body = ctx.createLinearGradient(0, y - r * 0.3, 0, y + r * 0.42);
  body.addColorStop(0, "#e6ecff");
  body.addColorStop(0.55, "#9fb0e8");
  body.addColorStop(1, "#5a699e");
  ctx.fillStyle = body;
  ctx.beginPath();
  ctx.ellipse(x, y + r * 0.06, r, r * 0.36, 0, 0, Math.PI * 2);
  ctx.fill();

  const t = game.animTime;
  for (let i = -1; i <= 1; i++) {
    const on = Math.sin(t * 4 + ufo.wobblePhase + i * 2.1) > 0;
    ctx.fillStyle = on ? "#ffd76a" : "#6d6236";
    ctx.beginPath();
    ctx.arc(x + i * r * 0.52, y + r * 0.14, 0.45, 0, Math.PI * 2);
    ctx.fill();
  }

  const label = ufo.a + " \u00d7 " + ufo.b;
  ctx.font = cartoonFont(2.3);
  const tw = ctx.measureText(label).width;
  const pw = Math.max(tw + 2.4, r * 1.1);
  const ph = 3.1;
  const py = y + r * 0.42 + 0.9;
  traceRoundRect(x - pw / 2, py, pw, ph, 1.4);
  ctx.fillStyle = "rgba(8, 12, 30, 0.85)";
  ctx.fill();
  ctx.strokeStyle = "rgba(150, 180, 255, 0.65)";
  ctx.lineWidth = 0.18;
  ctx.stroke();
  ctx.fillStyle = "#ffffff";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText(label, x, py + ph / 2 + 0.08);
}

function drawLaser() {
  const laser = game.laser;
  if (!laser) return;
  let end;
  if (laser.target && game.ufos.includes(laser.target)) {
    end = { x: laser.target.x, y: laser.target.y };
  } else {
    end = { x: laser.origin.x, y: -2 };
  }
  const fade = Math.max(0, 1 - laser.t / CONFIG.laserDuration);
  ctx.save();
  ctx.lineCap = "round";
  ctx.strokeStyle = "rgba(120, 220, 255, " + 0.3 * fade + ")";
  ctx.lineWidth = 1.8;
  ctx.beginPath();
  ctx.moveTo(laser.origin.x, laser.origin.y);
  ctx.lineTo(end.x, end.y);
  ctx.stroke();
  ctx.strokeStyle = "rgba(255, 255, 255, " + 0.95 * fade + ")";
  ctx.lineWidth = 0.5;
  ctx.beginPath();
  ctx.moveTo(laser.origin.x, laser.origin.y);
  ctx.lineTo(end.x, end.y);
  ctx.stroke();

  const fr = 0.6 + 1.4 * fade;
  const flash = ctx.createRadialGradient(laser.origin.x, laser.origin.y, 0, laser.origin.x, laser.origin.y, fr);
  flash.addColorStop(0, "rgba(255, 255, 255, " + 0.9 * fade + ")");
  flash.addColorStop(1, "rgba(140, 220, 255, 0)");
  ctx.fillStyle = flash;
  ctx.beginPath();
  ctx.arc(laser.origin.x, laser.origin.y, fr, 0, Math.PI * 2);
  ctx.fill();
  ctx.restore();
}

function drawEffects() {
  for (const ring of game.rings) {
    const p = ring.t / ring.duration;
    ctx.strokeStyle = "rgba(180, 230, 255, " + 0.7 * (1 - p) + ")";
    ctx.lineWidth = 0.5 * (1 - p) + 0.1;
    ctx.beginPath();
    ctx.arc(ring.x, ring.y, 1 + p * 7, 0, Math.PI * 2);
    ctx.stroke();
  }
  for (const pt of game.particles) {
    const p = Math.max(0, pt.life / pt.maxLife);
    ctx.globalAlpha = p;
    ctx.fillStyle = pt.color;
    ctx.beginPath();
    ctx.arc(pt.x, pt.y, pt.r * (0.5 + 0.5 * p), 0, Math.PI * 2);
    ctx.fill();
  }
  ctx.globalAlpha = 1;
}

function draw() {
  const w = CONFIG.virtualWidth;
  const h = CONFIG.virtualHeight;
  ctx.setTransform(viewScale, 0, 0, viewScale, 0, 0);
  drawSky();
  drawFadedTitle();
  drawStars();
  drawGround();
  for (const house of game.houses) drawHouse(house);
  for (const ufo of game.ufos) drawUfo(ufo);
  drawLaser();
  drawCannon();
  drawEffects();
}

function wireResize() {
  if (typeof ResizeObserver !== "undefined") {
    new ResizeObserver(resizeCanvas).observe(els.canvas);
  }
  window.addEventListener("resize", resizeCanvas);
}

function init() {
  resizeCanvas();
  generateScenery();
  wireResize();
  wireInput();
  wireOverlays();
  game.leaderboard = loadLeaderboard();
  updateScoreDisplay();
  enterWelcome();
  requestAnimationFrame(frame);
}

init();