Upload star-voyager.html

star-voyager.html

@@ -0,0 +1,601 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Star Voyager</title>
+<style>
+  * { -webkit-tap-highlight-color: transparent; user-select: none; touch-action: none; }
+  html, body {
+    margin: 0; padding: 0; min-height: 100%;
+    background: radial-gradient(circle at 50% 10%, #0f1a2a, #04070c 70%);
+    display: flex; align-items: center; justify-content: center;
+    font-family: 'Segoe UI', Arial, sans-serif;
+  }
+  #wrap { text-align: center; padding: 12px 0; }
+  #logo {
+    font-size: 28px; font-weight: 900; letter-spacing: 4px;
+    color: #4ecbff;
+    text-shadow: 0 0 10px #2a8fd8, 0 0 22px #4ecbff;
+    margin-bottom: 6px;
+  }
+  #logo span { color: #ff8a3d; text-shadow: 0 0 10px #b35a1a, 0 0 22px #ff8a3d; }
+  #tableFrame {
+    display: inline-block; position: relative;
+    padding: 10px; border-radius: 16px;
+    background: linear-gradient(160deg, #16243a, #08101c 60%);
+    box-shadow: 0 0 0 2px #000, 0 0 30px #4ecbff44, 0 10px 24px #000a;
+  }
+  canvas {
+    background: #000;
+    border: 3px solid #4ecbff;
+    box-shadow: 0 0 30px #4ecbff55, inset 0 0 40px #000a;
+    border-radius: 10px;
+    display: block;
+  }
+  #msg {
+    position: absolute; color: #fff; font-size: 26px; font-weight: bold;
+    text-shadow: 0 0 20px #4ecbff, 0 0 40px #ff5a5a;
+    display: none; text-align: center; pointer-events: none;
+    left: 50%; top: 45%; transform: translate(-50%,-50%); width: 90%;
+  }
+  #msg span { display:block; font-size: 14px; font-weight: normal; margin-top: 10px; color: #cbe6ff; }
+  #pad {
+    display: grid; grid-template-columns: 70px 70px 70px 70px 100px;
+    gap: 6px; justify-content: center; margin-top: 10px;
+  }
+  .pbtn {
+    background: linear-gradient(160deg, #16243a, #0a121e);
+    border: 1px solid #4ecbff55; border-radius: 8px; color: #d9f0ff;
+    font-size: 13px; font-weight: bold; display: flex; align-items: center; justify-content: center;
+    cursor: pointer; padding: 12px 0;
+  }
+  .pbtn:active { background: linear-gradient(160deg, #4ecbff44, #0a121e); }
+  #controls { color: #7f9ec9; font-size: 11px; margin-top: 6px; }
+</style>
+</head>
+<body>
+<a href="index.html" style="position:fixed; top:10px; left:10px; z-index:999; display:inline-flex; align-items:center; gap:5px; padding:7px 12px; border-radius:20px; background:rgba(10,10,20,0.75); color:#fff; font-family:'Segoe UI', Arial, sans-serif; font-size:13px; font-weight:bold; text-decoration:none; border:1px solid rgba(255,255,255,0.25); backdrop-filter: blur(3px);">← Home</a>
+<div id="wrap">
+  <div id="logo">STAR <span>VOYAGER</span></div>
+  <div id="tableFrame">
+    <canvas id="game" width="800" height="560"></canvas>
+    <div id="msg"></div>
+  </div>
+  <div id="pad">
+    <div class="pbtn" id="btnLeft">◄</div>
+    <div class="pbtn" id="btnUp">▲</div>
+    <div class="pbtn" id="btnDown">▼</div>
+    <div class="pbtn" id="btnRight">►</div>
+    <div class="pbtn" id="btnFire">FIRE</div>
+  </div>
+  <div id="controls">WASD / Arrow keys to steer · Space to fire · dodge or destroy asteroids before they hit the cockpit</div>
+</div>
+
+<script>
+const canvas = document.getElementById('game');
+const ctx = canvas.getContext('2d');
+const W = canvas.width, H = canvas.height;
+const CX = W/2, CY = H*0.46;
+const msgEl = document.getElementById('msg');
+
+const PROJ_SCALE = 260;
+const Z_NEAR = 0.35;
+const Z_FAR = 40;
+const FORWARD_SPEED = 5.2;
+const MAX_SHIELD = 100;
+
+let state = 'playing'; // playing | gameover
+let score = 0, best = 0;
+let shield = MAX_SHIELD;
+let shootCooldown = 0;
+let hitFlashT = 0;
+let shakeT = 0;
+
+let cam = { x: 0, y: 0, vx: 0, vy: 0, bank: 0 };
+let keys = { left:false, right:false, up:false, down:false, fire:false };
+
+let stars = [];
+let asteroids = [];
+let lasers = [];
+let particles = [];
+
+function rand(min, max){ return Math.random()*(max-min)+min; }
+
+function makeStar(){
+  return { x: rand(-14,14), y: rand(-10,10), z: rand(2, Z_FAR) };
+}
+function resetStar(s){ s.x = rand(-14,14); s.y = rand(-10,10); s.z = Z_FAR; }
+
+function makeAsteroid(farSpawn){
+  return {
+    x: rand(-6,6), y: rand(-4,4), z: farSpawn ? rand(20, Z_FAR) : rand(10, Z_FAR),
+    size: rand(0.5, 1.3),
+    rot: rand(0, Math.PI*2), rotSpeed: rand(-1,1),
+    seed: Math.random()*1000,
+    alive: true
+  };
+}
+function resetAsteroid(a){
+  a.x = rand(-6,6); a.y = rand(-4,4); a.z = rand(24, Z_FAR);
+  a.size = rand(0.5, 1.3);
+  a.seed = Math.random()*1000;
+}
+
+function initField(){
+  stars = []; for (let i=0;i<220;i++) stars.push(makeStar());
+  asteroids = []; for (let i=0;i<12;i++) asteroids.push(makeAsteroid(true));
+  lasers = []; particles = [];
+}
+initField();
+
+function project(x, y, z){
+  const scale = PROJ_SCALE / z;
+  return {
+    sx: CX + (x - cam.x) * scale,
+    sy: CY + (y - cam.y) * scale,
+    scale
+  };
+}
+
+function spawnBurst(sx, sy, color, count, spread){
+  spread = spread || 3;
+  for (let i=0;i<count;i++){
+    const a = Math.random()*Math.PI*2, sp = 0.5+Math.random()*spread;
+    particles.push({ x: sx, y: sy, vx: Math.cos(a)*sp, vy: Math.sin(a)*sp, life: 1, color });
+  }
+}
+
+function newGame(){
+  score = 0; shield = MAX_SHIELD; shootCooldown = 0;
+  hitFlashT = 0; shakeT = 0;
+  cam = { x:0, y:0, vx:0, vy:0, bank:0 };
+  initField();
+  state = 'playing';
+  msgEl.style.display = 'none';
+}
+
+function gameOver(){
+  state = 'gameover';
+  if (score > best) best = score;
+  msgEl.style.display = 'block';
+  msgEl.innerHTML = `HULL BREACH<span>Score: ${score} — best: ${best} — click/tap to fly again</span>`;
+}
+
+// ---- Input ----
+document.addEventListener('keydown', e => {
+  if (state === 'gameover'){ if (e.key === ' ' || e.key === 'Enter') newGame(); return; }
+  if (e.key === 'ArrowLeft' || e.key === 'a' || e.key === 'A') keys.left = true;
+  if (e.key === 'ArrowRight' || e.key === 'd' || e.key === 'D') keys.right = true;
+  if (e.key === 'ArrowUp' || e.key === 'w' || e.key === 'W') keys.up = true;
+  if (e.key === 'ArrowDown' || e.key === 's' || e.key === 'S') keys.down = true;
+  if (e.key === ' '){ e.preventDefault(); keys.fire = true; }
+});
+document.addEventListener('keyup', e => {
+  if (e.key === 'ArrowLeft' || e.key === 'a' || e.key === 'A') keys.left = false;
+  if (e.key === 'ArrowRight' || e.key === 'd' || e.key === 'D') keys.right = false;
+  if (e.key === 'ArrowUp' || e.key === 'w' || e.key === 'W') keys.up = false;
+  if (e.key === 'ArrowDown' || e.key === 's' || e.key === 'S') keys.down = false;
+  if (e.key === ' ') keys.fire = false;
+});
+function bindHold(el, onDown, onUp){
+  el.addEventListener('pointerdown', e => { e.preventDefault(); onDown(); });
+  el.addEventListener('pointerup', () => onUp());
+  el.addEventListener('pointerleave', () => onUp());
+  el.addEventListener('pointercancel', () => onUp());
+}
+bindHold(document.getElementById('btnLeft'), () => keys.left=true, () => keys.left=false);
+bindHold(document.getElementById('btnRight'), () => keys.right=true, () => keys.right=false);
+bindHold(document.getElementById('btnUp'), () => keys.up=true, () => keys.up=false);
+bindHold(document.getElementById('btnDown'), () => keys.down=true, () => keys.down=false);
+bindHold(document.getElementById('btnFire'), () => keys.fire=true, () => keys.fire=false);
+canvas.addEventListener('pointerdown', () => { if (state === 'gameover') newGame(); });
+
+let muzzleFlashT = 0;
+function fireLaser(){
+  lasers.push({ x: cam.x, y: cam.y, z: Z_NEAR, alive: true });
+  spawnBurst(CX, H*0.86, '#4ecbff', 4, 1.5);
+  muzzleFlashT = 0.08;
+}
+
+// ---- Update ----
+function updateCamera(dt){
+  const accel = 3.4, damp = 2.4, maxV = 2.6;
+  if (keys.left) cam.vx -= accel*dt;
+  if (keys.right) cam.vx += accel*dt;
+  if (keys.up) cam.vy -= accel*dt;
+  if (keys.down) cam.vy += accel*dt;
+  cam.vx *= Math.max(0, 1 - damp*dt);
+  cam.vy *= Math.max(0, 1 - damp*dt);
+  cam.vx = Math.max(-maxV, Math.min(maxV, cam.vx));
+  cam.vy = Math.max(-maxV, Math.min(maxV, cam.vy));
+  cam.x += cam.vx*dt;
+  cam.y += cam.vy*dt;
+  cam.x = Math.max(-5, Math.min(5, cam.x));
+  cam.y = Math.max(-3.5, Math.min(3.5, cam.y));
+
+  const targetBank = -cam.vx * 0.32;
+  cam.bank += (targetBank - cam.bank) * Math.min(1, dt*6);
+
+  if (keys.fire && shootCooldown <= 0){
+    fireLaser();
+    shootCooldown = 0.22;
+  }
+  if (shootCooldown > 0) shootCooldown -= dt;
+}
+
+function updateStars(dt){
+  stars.forEach(s => {
+    s.z -= FORWARD_SPEED*dt;
+    if (s.z <= 0.1) resetStar(s);
+  });
+}
+
+function updateAsteroids(dt){
+  asteroids.forEach(a => {
+    if (!a.alive) return;
+    a.z -= FORWARD_SPEED*dt;
+    a.rot += a.rotSpeed*dt;
+
+    // danger check: close to camera AND near the center of the screen = hull hit
+    if (a.z < 1.4 && a.z > 0.05){
+      const p = project(a.x, a.y, Math.max(a.z, 0.2));
+      const dist = Math.hypot(p.sx - CX, p.sy - CY);
+      const dangerRadius = 90;
+      if (dist < dangerRadius){
+        takeDamage(14);
+        spawnBurst(p.sx, p.sy, '#ff8a3d', 16, 5);
+        resetAsteroid(a);
+        return;
+      }
+    }
+    if (a.z <= 0.05) resetAsteroid(a);
+  });
+}
+
+function updateLasers(dt){
+  const LASER_SPEED = 16;
+  lasers.forEach(l => { l.z += LASER_SPEED*dt; if (l.z > Z_FAR) l.alive = false; });
+  lasers = lasers.filter(l => l.alive);
+
+  for (const l of lasers){
+    if (!l.alive) continue;
+    for (const a of asteroids){
+      if (!a.alive) continue;
+      if (Math.abs(a.z - l.z) < 1.1){
+        const dx = a.x - l.x, dy = a.y - l.y;
+        const hitR = a.size * 1.1 + 0.15;
+        if (dx*dx + dy*dy < hitR*hitR){
+          l.alive = false;
+          const p = project(a.x, a.y, Math.max(a.z, 0.2));
+          spawnBurst(p.sx, p.sy, '#ffe14e', 18, 4.5);
+          score += Math.round(50 / Math.max(0.4, a.size));
+          resetAsteroid(a);
+          shakeT = Math.max(shakeT, 0.08);
+          break;
+        }
+      }
+    }
+  }
+  lasers = lasers.filter(l => l.alive);
+}
+
+function takeDamage(amt){
+  shield = Math.max(0, shield - amt);
+  hitFlashT = 0.35;
+  shakeT = 0.3;
+  if (shield <= 0) gameOver();
+}
+
+function update(dt){
+  if (state !== 'playing') return;
+  updateCamera(dt);
+  updateStars(dt);
+  updateAsteroids(dt);
+  updateLasers(dt);
+  particles.forEach(p => { p.x+=p.vx; p.y+=p.vy; p.vx*=0.94; p.vy*=0.94; p.life-=0.03; });
+  particles = particles.filter(p => p.life > 0);
+  if (hitFlashT > 0) hitFlashT -= dt;
+  if (muzzleFlashT > 0) muzzleFlashT -= dt;
+  if (shakeT > 0) shakeT -= dt;
+}
+
+// ---- Draw ----
+function drawStars(){
+  ctx.save();
+  stars.forEach(s => {
+    const p = project(s.x, s.y, s.z);
+    if (p.sx < -20 || p.sx > W+20 || p.sy < -20 || p.sy > H+20) return;
+    const b = Math.max(0.35, Math.min(1, 1 - s.z/Z_FAR));
+    const r = Math.max(1, 2.6*b);
+    ctx.fillStyle = `rgba(220,235,255,${b})`;
+    ctx.shadowColor = '#cfe6ff'; ctx.shadowBlur = r*1.5;
+    ctx.fillRect(p.sx, p.sy, r, r);
+    ctx.shadowBlur = 0;
+  });
+  ctx.restore();
+}
+
+function drawHorizonGrid(){
+  // a floor-style wireframe grid below the ship — a strong geometric reference
+  // that makes steering and banking dramatically easier to perceive than stars alone
+  ctx.save();
+  ctx.strokeStyle = 'rgba(78,203,255,0.35)';
+  ctx.lineWidth = 1.5;
+  const gridY = 5.5;
+  for (let gz = 2; gz <= 34; gz += 4){
+    ctx.beginPath();
+    let started = false;
+    for (let gx = -12; gx <= 12; gx += 1){
+      const p = project(gx, gridY, gz);
+      if (started) ctx.lineTo(p.sx, p.sy); else { ctx.moveTo(p.sx, p.sy); started = true; }
+    }
+    ctx.stroke();
+  }
+  for (let gx = -12; gx <= 12; gx += 3){
+    ctx.beginPath();
+    const p1 = project(gx, gridY, 2);
+    const p2 = project(gx, gridY, 34);
+    ctx.moveTo(p1.sx, p1.sy);
+    ctx.lineTo(p2.sx, p2.sy);
+    ctx.stroke();
+  }
+  ctx.restore();
+}
+
+function drawAsteroidShape(sx, sy, r, seed, rot){
+  ctx.save();
+  ctx.translate(sx, sy);
+  ctx.rotate(rot);
+  const points = 9;
+  ctx.beginPath();
+  for (let i = 0; i <= points; i++){
+    const ang = (i/points) * Math.PI*2;
+    const jitter = 0.7 + 0.3*Math.sin(seed + i*2.1);
+    const rr = r * jitter;
+    const px = Math.cos(ang)*rr, py = Math.sin(ang)*rr;
+    if (i===0) ctx.moveTo(px,py); else ctx.lineTo(px,py);
+  }
+  ctx.closePath();
+  const grad = ctx.createRadialGradient(-r*0.3,-r*0.3,r*0.1,0,0,r);
+  grad.addColorStop(0, '#8a7a6a');
+  grad.addColorStop(1, '#3a3028');
+  ctx.fillStyle = grad;
+  ctx.fill();
+  ctx.strokeStyle = 'rgba(255,200,150,0.3)';
+  ctx.lineWidth = 1.5;
+  ctx.stroke();
+  ctx.restore();
+}
+
+function drawAsteroids(){
+  const drawList = asteroids.filter(a => a.alive && a.z > 0.05).sort((a,b) => b.z - a.z);
+  drawList.forEach(a => {
+    const p = project(a.x, a.y, a.z);
+    const r = a.size * p.scale * 0.6;
+    if (p.sx < -r-20 || p.sx > W+r+20 || p.sy < -r-20 || p.sy > H+r+20) return;
+    drawAsteroidShape(p.sx, p.sy, r, a.seed, a.rot);
+  });
+}
+
+function drawLasers(){
+  ctx.save();
+  lasers.forEach(l => {
+    const p = project(l.x, l.y, l.z);
+    const prevP = project(l.x, l.y, Math.max(0.05, l.z - 1.6));
+    ctx.strokeStyle = '#4ecbff';
+    ctx.shadowColor = '#4ecbff'; ctx.shadowBlur = 10;
+    ctx.lineWidth = Math.max(1, 6*p.scale);
+    ctx.beginPath();
+    ctx.moveTo(prevP.sx, prevP.sy);
+    ctx.lineTo(p.sx, p.sy);
+    ctx.stroke();
+    ctx.shadowBlur = 0;
+  });
+  ctx.restore();
+}
+
+function drawParticles(){
+  particles.forEach(p => {
+    ctx.save();
+    ctx.globalAlpha = Math.max(0, p.life);
+    ctx.fillStyle = p.color;
+    ctx.fillRect(p.x-2, p.y-2, 4, 4);
+    ctx.restore();
+  });
+}
+
+function drawReticle(){
+  ctx.save();
+  ctx.strokeStyle = '#4ecbff';
+  ctx.shadowColor = '#4ecbff'; ctx.shadowBlur = 6;
+  ctx.lineWidth = 2.5;
+  ctx.beginPath();
+  ctx.arc(CX, CY, 22, 0, Math.PI*2);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(CX-32, CY); ctx.lineTo(CX-14, CY);
+  ctx.moveTo(CX+14, CY); ctx.lineTo(CX+32, CY);
+  ctx.moveTo(CX, CY-32); ctx.lineTo(CX, CY-14);
+  ctx.moveTo(CX, CY+14); ctx.lineTo(CX, CY+32);
+  ctx.stroke();
+  ctx.shadowBlur = 0;
+  ctx.restore();
+}
+
+function drawCockpit(){
+  const sideW = 74;
+  const dashY = H*0.82, dashH = H - dashY;
+
+  // side panels — solid, opaque metal, not a fade-to-transparent gradient
+  [0, W-sideW].forEach((sx, i) => {
+    const grad = ctx.createLinearGradient(sx, 0, sx + (i===0?sideW:0), 0);
+    if (i === 0){ grad.addColorStop(0, '#1c2a3a'); grad.addColorStop(1, '#0d1520'); }
+    else { grad.addColorStop(0, '#0d1520'); grad.addColorStop(1, '#1c2a3a'); }
+    ctx.fillStyle = grad;
+    ctx.fillRect(sx, 0, sideW, dashY);
+    // rivet details
+    ctx.fillStyle = 'rgba(150,200,230,0.35)';
+    for (let y = 20; y < dashY; y += 46){
+      ctx.beginPath(); ctx.arc(sx + sideW/2, y, 3, 0, Math.PI*2); ctx.fill();
+    }
+    // small warning light
+    const lit = Math.floor(performance.now()/600)%2===0;
+    ctx.fillStyle = lit ? '#63ff8f' : '#1a3a28';
+    ctx.shadowColor = '#63ff8f'; ctx.shadowBlur = lit ? 8 : 0;
+    ctx.beginPath(); ctx.arc(sx + sideW/2, dashY - 30, 5, 0, Math.PI*2); ctx.fill();
+    ctx.shadowBlur = 0;
+  });
+  ctx.strokeStyle = '#4ecbff';
+  ctx.lineWidth = 3;
+  ctx.shadowColor = '#4ecbff'; ctx.shadowBlur = 8;
+  ctx.beginPath(); ctx.moveTo(sideW,0); ctx.lineTo(sideW,dashY); ctx.stroke();
+  ctx.beginPath(); ctx.moveTo(W-sideW,0); ctx.lineTo(W-sideW,dashY); ctx.stroke();
+  ctx.shadowBlur = 0;
+
+  // top strip — solid bar with a glowing edge
+  ctx.fillStyle = '#0f1a26';
+  ctx.fillRect(0,0,W,30);
+  ctx.strokeStyle = '#4ecbff';
+  ctx.lineWidth = 2;
+  ctx.beginPath(); ctx.moveTo(0,30); ctx.lineTo(W,30); ctx.stroke();
+  ctx.fillStyle = '#8fc4e8';
+  ctx.font = 'bold 12px Segoe UI';
+  ctx.textAlign = 'center';
+  ctx.fillText('S T A R   V O Y A G E R   —   N A V   S Y S T E M   O N L I N E', W/2, 20);
+
+  // bottom dashboard — solid opaque panel with a bright top bezel
+  const dashGrad = ctx.createLinearGradient(0, dashY, 0, H);
+  dashGrad.addColorStop(0, '#152234');
+  dashGrad.addColorStop(1, '#0a1420');
+  ctx.fillStyle = dashGrad;
+  ctx.fillRect(0, dashY, W, dashH);
+  ctx.strokeStyle = '#4ecbff';
+  ctx.lineWidth = 3;
+  ctx.shadowColor = '#4ecbff'; ctx.shadowBlur = 10;
+  ctx.beginPath(); ctx.moveTo(0, dashY); ctx.lineTo(W, dashY); ctx.stroke();
+  ctx.shadowBlur = 0;
+
+  // score
+  ctx.textAlign = 'left';
+  ctx.font = 'bold 13px Segoe UI';
+  ctx.fillStyle = '#8fc4e8';
+  ctx.fillText('SCORE', 90, dashY+22);
+  ctx.font = 'bold 24px Courier New';
+  ctx.fillStyle = '#ffe14e';
+  ctx.shadowColor = '#ffb300'; ctx.shadowBlur = 8;
+  ctx.fillText(String(score).padStart(6,'0'), 90, dashY+48);
+  ctx.shadowBlur = 0;
+
+  // shield
+  ctx.font = 'bold 13px Segoe UI';
+  ctx.fillStyle = '#8fc4e8';
+  ctx.fillText('SHIELD', 90, dashY+66);
+  const barW = 150, barX = 90, barY = dashY+72;
+  ctx.fillStyle = '#2a1418'; ctx.fillRect(barX, barY, barW, 12);
+  const shieldFrac = shield/MAX_SHIELD;
+  ctx.fillStyle = shieldFrac > 0.4 ? '#4ecbff' : '#ff5a5a';
+  ctx.fillRect(barX, barY, barW*shieldFrac, 12);
+  ctx.strokeStyle = '#000'; ctx.lineWidth = 1;
+  ctx.strokeRect(barX, barY, barW, 12);
+
+  drawRadar(W - 200, dashY + dashH/2);
+}
+
+function drawRadar(rx, ry){
+  const R = 46;
+  ctx.save();
+  ctx.beginPath();
+  ctx.arc(rx, ry, R, 0, Math.PI*2);
+  ctx.fillStyle = 'rgba(10,20,15,0.8)';
+  ctx.fill();
+  ctx.strokeStyle = 'rgba(99,255,143,0.6)'; ctx.lineWidth = 2;
+  ctx.stroke();
+  ctx.beginPath(); ctx.moveTo(rx-R,ry); ctx.lineTo(rx+R,ry); ctx.stroke();
+  ctx.beginPath(); ctx.moveTo(rx,ry-R); ctx.lineTo(rx,ry+R); ctx.stroke();
+
+  ctx.fillStyle = '#63ff8f';
+  asteroids.forEach(a => {
+    if (!a.alive || a.z > 18) return;
+    const rxp = rx + Math.max(-1,Math.min(1,(a.x-cam.x)/8)) * (R-4);
+    const ryp = ry + Math.max(-1,Math.min(1,(a.y-cam.y)/6)) * (R-4);
+    const alpha = Math.max(0.25, 1 - a.z/18);
+    ctx.globalAlpha = alpha;
+    ctx.beginPath();
+    ctx.arc(rxp, ryp, 3, 0, Math.PI*2);
+    ctx.fill();
+  });
+  ctx.globalAlpha = 1;
+
+  ctx.fillStyle = '#fff';
+  ctx.beginPath(); ctx.arc(rx, ry, 3, 0, Math.PI*2); ctx.fill();
+
+  ctx.font = 'bold 10px Segoe UI';
+  ctx.fillStyle = '#8fc4e8';
+  ctx.textAlign = 'center';
+  ctx.fillText('RADAR', rx, ry-R-8);
+  ctx.restore();
+}
+
+function drawHitFlash(){
+  if (hitFlashT <= 0) return;
+  ctx.save();
+  ctx.globalAlpha = Math.min(0.5, hitFlashT);
+  ctx.fillStyle = '#ff2a2a';
+  ctx.fillRect(0,0,W,H);
+  ctx.restore();
+}
+
+function drawGameOverBackdrop(){
+  if (state !== 'gameover') return;
+  ctx.save();
+  ctx.fillStyle = 'rgba(0,0,0,0.35)';
+  ctx.fillRect(0,0,W,H);
+  ctx.restore();
+}
+
+let lastTime = performance.now();
+function loop(){
+  const now = performance.now();
+  const dt = Math.min(0.05, (now-lastTime)/1000);
+  lastTime = now;
+
+  update(dt);
+
+  ctx.clearRect(0,0,W,H);
+  ctx.save();
+  if (shakeT > 0){
+    const mag = shakeT * 10;
+    ctx.translate((Math.random()-0.5)*mag, (Math.random()-0.5)*mag);
+  }
+  ctx.save();
+  ctx.translate(CX, CY);
+  ctx.rotate(cam.bank);
+  ctx.translate(-CX, -CY);
+  drawHorizonGrid();
+  drawStars();
+  drawAsteroids();
+  drawLasers();
+  ctx.restore();
+  drawParticles();
+  drawReticle();
+  drawCockpit();
+  drawHitFlash();
+  if (muzzleFlashT > 0){
+    ctx.save();
+    ctx.globalAlpha = muzzleFlashT / 0.08;
+    ctx.fillStyle = '#cfe8ff';
+    ctx.shadowColor = '#4ecbff'; ctx.shadowBlur = 20;
+    ctx.beginPath();
+    ctx.arc(CX, H*0.86, 14, 0, Math.PI*2);
+    ctx.fill();
+    ctx.restore();
+  }
+  drawGameOverBackdrop();
+  ctx.restore();
+
+  requestAnimationFrame(loop);
+}
+loop();
+</script>
+</body>
+</html>