{ACHIEVEMENTS.map((a) => {
const unlocked = !!achievements[a.id];
return (
diff --git a/src/components/game/CruiseMode.tsx b/src/components/game/CruiseMode.tsx
new file mode 100644
index 000000000..1fab9a006
--- /dev/null
+++ b/src/components/game/CruiseMode.tsx
@@ -0,0 +1,1350 @@
+"use client";
+// 回响星核 / Echo Nexus — 深空巡航 Canvas 2D 实时玩法渲染层
+// 全屏 fixed 覆盖，rAF 驱动游戏循环，HTML HUD 叠层 + Canvas 实体绘制。
+import { useState, useEffect, useRef, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import {
+ X,
+ Play,
+ RotateCcw,
+ ChevronRight,
+ Pause,
+ Gem,
+ Brain,
+ Radio,
+ Shield,
+ Zap,
+ Clock,
+ Trophy,
+} from "lucide-react";
+import {
+ CRUISE_CONFIG,
+ generateLevel,
+ updateCruise,
+ cruiseSeed,
+ loadCruiseStats,
+ recordRun,
+ type CruiseState,
+ type CruisePhase,
+ type CruiseRunResult,
+ type CruiseInput,
+ type CruiseStats,
+ type ShipEntity,
+ type AsteroidEntity,
+ type StormEntity,
+ type CrystalEntity,
+ type InsightEntity,
+ type BeaconEntity,
+ type StargateEntity,
+ type ParticleEntity,
+} from "@/lib/game/cruise";
+import { useGameStore } from "@/store/gameStore";
+import { formatNum } from "@/lib/game/config";
+
+// ============================================================
+// 颜色常量（避开蓝色/靛色，使用 emerald/rose/amber/fuchsia 四色全息色谱）
+// ============================================================
+const C = {
+ ship: "#34d399",
+ shipCore: "#a7f3d0",
+ asteroid: "#3a2a2a",
+ asteroidStroke: "#7f1d1d",
+ asteroidGlow: "#fb7185",
+ storm: "#e879f9",
+ stormCore: "#fdf4ff",
+ crystal: "#34d399",
+ crystalCore: "#d1fae5",
+ insight: "#e879f9",
+ insightCore: "#fae8ff",
+ beacon: "#fbbf24",
+ beaconCore: "#fef3c7",
+ stargate: "#fb7185",
+ stargateCore: "#ffe4e6",
+};
+
+// ============================================================
+// 视差星空
+// ============================================================
+interface Star {
+ x: number;
+ y: number;
+ size: number;
+ brightness: number;
+ twinkle: number;
+ twinkleSpeed: number;
+}
+interface StarLayer {
+ stars: Star[];
+ speed: number;
+ parallax: number;
+}
+
+function generateStars(w: number, h: number): StarLayer[] {
+ const layers: StarLayer[] = [
+ { stars: [], speed: 8, parallax: 0.1 }, // 远层：慢、小、暗
+ { stars: [], speed: 18, parallax: 0.25 }, // 中层
+ { stars: [], speed: 36, parallax: 0.5 }, // 近层：快、大、亮
+ ];
+ const counts = [100, 60, 30];
+ for (let li = 0; li < layers.length; li++) {
+ const layer = layers[li];
+ for (let i = 0; i < counts[li]; i++) {
+ layer.stars.push({
+ x: Math.random() * w,
+ y: Math.random() * h,
+ size: 0.5 + li * 0.6 + Math.random() * (0.5 + li * 0.5),
+ brightness: 0.2 + li * 0.25 + Math.random() * 0.25,
+ twinkle: Math.random() * Math.PI * 2,
+ twinkleSpeed: 0.5 + Math.random() * 2,
+ });
+ }
+ }
+ return layers;
+}
+
+function drawStars(
+ ctx: CanvasRenderingContext2D,
+ layers: StarLayer[],
+ dt: number,
+ w: number,
+ h: number,
+ shipVx: number,
+ shipVy: number
+) {
+ for (const layer of layers) {
+ for (const s of layer.stars) {
+ // 向下漂移 + 受飞船速度影响的视差
+ s.y += (layer.speed + shipVy * layer.parallax) * dt;
+ s.x -= shipVx * layer.parallax * dt;
+ // 环绕
+ if (s.y > h + 5) s.y = -5;
+ if (s.y < -5) s.y = h + 5;
+ if (s.x > w + 5) s.x = -5;
+ if (s.x < -5) s.x = w + 5;
+ s.twinkle += s.twinkleSpeed * dt;
+ const tw = 0.6 + 0.4 * Math.sin(s.twinkle);
+ const alpha = s.brightness * tw;
+ ctx.fillStyle = `rgba(220,230,255,${alpha})`;
+ ctx.beginPath();
+ ctx.arc(s.x, s.y, s.size, 0, Math.PI * 2);
+ ctx.fill();
+ }
+ }
+}
+
+// ============================================================
+// 实体绘制函数
+// ============================================================
+
+function drawShip(ctx: CanvasRenderingContext2D, ship: ShipEntity, invuln: boolean) {
+ ctx.save();
+ ctx.translate(ship.x, ship.y);
+ ctx.rotate(ship.heading);
+
+ // 受击闪烁
+ const blink = invuln && Math.floor(Date.now() / 80) % 2 === 0;
+
+ // 尾焰（在飞船后方）
+ if (ship.thrust > 0.1) {
+ const flameLen = ship.radius * (1.5 + ship.thrust * 1.5);
+ const grad = ctx.createLinearGradient(-ship.radius * 0.4, 0, -flameLen, 0);
+ grad.addColorStop(0, `rgba(251,191,36,${0.8 * ship.thrust})`);
+ grad.addColorStop(0.5, `rgba(232,121,249,${0.4 * ship.thrust})`);
+ grad.addColorStop(1, "rgba(232,121,249,0)");
+ ctx.fillStyle = grad;
+ ctx.beginPath();
+ ctx.moveTo(-ship.radius * 0.4, ship.radius * 0.4);
+ ctx.lineTo(-flameLen, 0);
+ ctx.lineTo(-ship.radius * 0.4, -ship.radius * 0.4);
+ ctx.closePath();
+ ctx.fill();
+ }
+
+ // 飞船辉光
+ ctx.shadowBlur = 22;
+ ctx.shadowColor = C.ship;
+
+ // 飞船主体（三角形）
+ const r = ship.radius;
+ ctx.beginPath();
+ ctx.moveTo(r, 0);
+ ctx.lineTo(-r * 0.7, r * 0.75);
+ ctx.lineTo(-r * 0.35, 0);
+ ctx.lineTo(-r * 0.7, -r * 0.75);
+ ctx.closePath();
+
+ const bodyGrad = ctx.createLinearGradient(-r, 0, r, 0);
+ bodyGrad.addColorStop(0, blink ? "#fb7185" : "#065f46");
+ bodyGrad.addColorStop(0.5, blink ? "#fda4af" : C.ship);
+ bodyGrad.addColorStop(1, blink ? "#fecdd3" : C.shipCore);
+ ctx.fillStyle = bodyGrad;
+ ctx.fill();
+
+ ctx.shadowBlur = 0;
+ ctx.lineWidth = 1.5;
+ ctx.strokeStyle = blink ? "#ffe4e6" : "#d1fae5";
+ ctx.stroke();
+
+ // 驾驶舱
+ ctx.beginPath();
+ ctx.arc(r * 0.15, 0, r * 0.22, 0, Math.PI * 2);
+ ctx.fillStyle = "rgba(255,255,255,0.85)";
+ ctx.fill();
+
+ ctx.restore();
+}
+
+function drawAsteroid(ctx: CanvasRenderingContext2D, a: AsteroidEntity) {
+ ctx.save();
+ ctx.translate(a.x, a.y);
+ ctx.rotate(a.rotation);
+ ctx.shadowBlur = 14;
+ ctx.shadowColor = C.asteroidGlow;
+ ctx.beginPath();
+ const n = a.vertices.length;
+ for (let i = 0; i < n; i++) {
+ const ang = (i / n) * Math.PI * 2;
+ const rad = a.radius * a.vertices[i];
+ const x = Math.cos(ang) * rad;
+ const y = Math.sin(ang) * rad;
+ if (i === 0) ctx.moveTo(x, y);
+ else ctx.lineTo(x, y);
+ }
+ ctx.closePath();
+ const grad = ctx.createRadialGradient(0, 0, a.radius * 0.2, 0, 0, a.radius);
+ grad.addColorStop(0, "#5a3a3a");
+ grad.addColorStop(0.7, C.asteroid);
+ grad.addColorStop(1, "#1a0808");
+ ctx.fillStyle = grad;
+ ctx.fill();
+ ctx.shadowBlur = 0;
+ ctx.lineWidth = 1.2;
+ ctx.strokeStyle = C.asteroidStroke;
+ ctx.stroke();
+ // 内部裂纹
+ ctx.beginPath();
+ ctx.moveTo(-a.radius * 0.3, -a.radius * 0.2);
+ ctx.lineTo(a.radius * 0.2, a.radius * 0.3);
+ ctx.strokeStyle = "rgba(127,29,29,0.5)";
+ ctx.lineWidth = 1;
+ ctx.stroke();
+ ctx.restore();
+}
+
+function drawStorm(ctx: CanvasRenderingContext2D, s: StormEntity) {
+ ctx.save();
+ ctx.translate(s.x, s.y);
+ ctx.shadowBlur = 30;
+ ctx.shadowColor = C.storm;
+
+ // 多层云团
+ const cloudCount = 5;
+ for (let i = 0; i < cloudCount; i++) {
+ const ang = (i / cloudCount) * Math.PI * 2 + s.rotation;
+ const dist = s.radius * 0.4 * (0.5 + 0.5 * Math.sin(s.cloudSeed + i));
+ const cx = Math.cos(ang) * dist;
+ const cy = Math.sin(ang) * dist;
+ const cr = s.radius * (0.5 + 0.2 * Math.sin(s.cloudSeed * 0.7 + i * 2));
+ const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, cr);
+ grad.addColorStop(0, "rgba(232,121,249,0.55)");
+ grad.addColorStop(0.6, "rgba(168,85,247,0.3)");
+ grad.addColorStop(1, "rgba(88,28,135,0)");
+ ctx.fillStyle = grad;
+ ctx.beginPath();
+ ctx.arc(cx, cy, cr, 0, Math.PI * 2);
+ ctx.fill();
+ }
+
+ // 核心
+ ctx.shadowBlur = 0;
+ const coreGrad = ctx.createRadialGradient(0, 0, 0, 0, 0, s.radius * 0.3);
+ coreGrad.addColorStop(0, "rgba(253,244,255,0.8)");
+ coreGrad.addColorStop(1, "rgba(232,121,249,0)");
+ ctx.fillStyle = coreGrad;
+ ctx.beginPath();
+ ctx.arc(0, 0, s.radius * 0.3, 0, Math.PI * 2);
+ ctx.fill();
+
+ // 闪电
+ if (s.lightningTimer < 0.12) {
+ ctx.strokeStyle = "rgba(253,244,255,0.9)";
+ ctx.lineWidth = 2;
+ ctx.shadowBlur = 12;
+ ctx.shadowColor = C.stormCore;
+ ctx.beginPath();
+ let lx = 0,
+ ly = 0;
+ ctx.moveTo(lx, ly);
+ for (let i = 0; i < 4; i++) {
+ lx += (Math.random() - 0.5) * s.radius * 0.5;
+ ly += (Math.random() - 0.5) * s.radius * 0.5;
+ ctx.lineTo(lx, ly);
+ }
+ ctx.stroke();
+ }
+ ctx.restore();
+}
+
+function drawCrystal(ctx: CanvasRenderingContext2D, c: CrystalEntity) {
+ if (c.collected) return;
+ ctx.save();
+ ctx.translate(c.x, c.y);
+ // 脉冲光环
+ const pulse = 0.5 + 0.5 * Math.sin(c.pulsePhase);
+ ctx.shadowBlur = 20;
+ ctx.shadowColor = C.crystal;
+ ctx.beginPath();
+ ctx.arc(0, 0, c.radius * (1.4 + pulse * 0.4), 0, Math.PI * 2);
+ ctx.strokeStyle = `rgba(52,211,153,${0.15 + pulse * 0.2})`;
+ ctx.lineWidth = 2;
+ ctx.stroke();
+
+ // 菱形
+ ctx.rotate(c.rotation);
+ ctx.beginPath();
+ ctx.moveTo(0, -c.radius);
+ ctx.lineTo(c.radius * 0.7, 0);
+ ctx.lineTo(0, c.radius);
+ ctx.lineTo(-c.radius * 0.7, 0);
+ ctx.closePath();
+ const grad = ctx.createLinearGradient(-c.radius, -c.radius, c.radius, c.radius);
+ grad.addColorStop(0, "#065f46");
+ grad.addColorStop(0.5, C.crystal);
+ grad.addColorStop(1, C.crystalCore);
+ ctx.fillStyle = grad;
+ ctx.fill();
+ ctx.shadowBlur = 0;
+ ctx.lineWidth = 1.2;
+ ctx.strokeStyle = C.crystalCore;
+ ctx.stroke();
+ // 高光
+ ctx.beginPath();
+ ctx.moveTo(0, -c.radius * 0.7);
+ ctx.lineTo(c.radius * 0.3, -c.radius * 0.2);
+ ctx.strokeStyle = "rgba(255,255,255,0.6)";
+ ctx.lineWidth = 1;
+ ctx.stroke();
+ ctx.restore();
+}
+
+function drawInsight(ctx: CanvasRenderingContext2D, i: InsightEntity) {
+ if (i.collected) return;
+ ctx.save();
+ ctx.translate(i.x, i.y);
+ const pulse = 0.5 + 0.5 * Math.sin(i.pulsePhase);
+ ctx.shadowBlur = 22;
+ ctx.shadowColor = C.insight;
+
+ // 外光环
+ ctx.beginPath();
+ ctx.arc(0, 0, i.radius * (1.3 + pulse * 0.3), 0, Math.PI * 2);
+ ctx.strokeStyle = `rgba(232,121,249,${0.2 + pulse * 0.2})`;
+ ctx.lineWidth = 2;
+ ctx.stroke();
+
+ // 球体
+ const grad = ctx.createRadialGradient(
+ -i.radius * 0.3,
+ -i.radius * 0.3,
+ 0,
+ 0,
+ 0,
+ i.radius
+ );
+ grad.addColorStop(0, C.insightCore);
+ grad.addColorStop(0.5, C.insight);
+ grad.addColorStop(1, "#86198f");
+ ctx.fillStyle = grad;
+ ctx.beginPath();
+ ctx.arc(0, 0, i.radius, 0, Math.PI * 2);
+ ctx.fill();
+
+ // 内部漩涡
+ ctx.shadowBlur = 0;
+ ctx.rotate(i.swirlAngle);
+ ctx.strokeStyle = "rgba(253,244,255,0.7)";
+ ctx.lineWidth = 1.5;
+ ctx.beginPath();
+ for (let t = 0; t < Math.PI * 2; t += 0.3) {
+ const r = (t / (Math.PI * 2)) * i.radius * 0.8;
+ const x = Math.cos(t * 2) * r;
+ const y = Math.sin(t * 2) * r;
+ if (t === 0) ctx.moveTo(x, y);
+ else ctx.lineTo(x, y);
+ }
+ ctx.stroke();
+ ctx.restore();
+}
+
+function drawBeacon(ctx: CanvasRenderingContext2D, b: BeaconEntity) {
+ if (b.collected) return;
+ ctx.save();
+ ctx.translate(b.x, b.y);
+ const pulse = 0.5 + 0.5 * Math.sin(b.pulsePhase);
+ ctx.shadowBlur = 25;
+ ctx.shadowColor = C.beacon;
+
+ // 立柱光束（向上）
+ const beamGrad = ctx.createLinearGradient(0, -b.radius * 4, 0, b.radius);
+ beamGrad.addColorStop(0, "rgba(251,191,36,0)");
+ beamGrad.addColorStop(0.5, `rgba(251,191,36,${0.3 + pulse * 0.2})`);
+ beamGrad.addColorStop(1, `rgba(251,191,36,${0.5 + pulse * 0.3})`);
+ ctx.fillStyle = beamGrad;
+ ctx.beginPath();
+ ctx.moveTo(-b.radius * 0.5, 0);
+ ctx.lineTo(-b.radius * 0.2, -b.radius * 4);
+ ctx.lineTo(b.radius * 0.2, -b.radius * 4);
+ ctx.lineTo(b.radius * 0.5, 0);
+ ctx.closePath();
+ ctx.fill();
+
+ // 旋转光环
+ ctx.rotate(b.rotation);
+ ctx.beginPath();
+ ctx.ellipse(0, 0, b.radius * (1.2 + pulse * 0.2), b.radius * 0.4, 0, 0, Math.PI * 2);
+ ctx.strokeStyle = `rgba(251,191,36,${0.5 + pulse * 0.3})`;
+ ctx.lineWidth = 2;
+ ctx.stroke();
+
+ // 核心
+ ctx.shadowBlur = 0;
+ const coreGrad = ctx.createRadialGradient(0, 0, 0, 0, 0, b.radius * 0.6);
+ coreGrad.addColorStop(0, C.beaconCore);
+ coreGrad.addColorStop(0.7, C.beacon);
+ coreGrad.addColorStop(1, "#92400e");
+ ctx.fillStyle = coreGrad;
+ ctx.beginPath();
+ ctx.arc(0, 0, b.radius * 0.6, 0, Math.PI * 2);
+ ctx.fill();
+ ctx.restore();
+}
+
+function drawStargate(
+ ctx: CanvasRenderingContext2D,
+ g: StargateEntity,
+ ship: ShipEntity
+) {
+ ctx.save();
+ ctx.translate(g.x, g.y);
+ const dist = Math.hypot(ship.x - g.x, ship.y - g.y);
+ const proximity = Math.max(0, 1 - dist / 300);
+ const pulse = 0.5 + 0.5 * Math.sin(g.pulsePhase);
+ ctx.shadowBlur = 25 + proximity * 30;
+ ctx.shadowColor = C.stargate;
+
+ // 外旋涡（多层旋转弧）
+ for (let i = 0; i < 4; i++) {
+ ctx.save();
+ ctx.rotate(g.rotation * (i % 2 === 0 ? 1 : -1) * (1 + i * 0.3));
+ ctx.beginPath();
+ const ringR = g.radius * (1 + i * 0.25);
+ ctx.arc(0, 0, ringR, 0, Math.PI * 1.5);
+ ctx.strokeStyle = `rgba(251,113,133,${(0.3 + pulse * 0.2) * (1 - i * 0.15)})`;
+ ctx.lineWidth = 3 - i * 0.5;
+ ctx.stroke();
+ ctx.restore();
+ }
+
+ // 核心旋涡
+ const coreGrad = ctx.createRadialGradient(0, 0, 0, 0, 0, g.radius);
+ coreGrad.addColorStop(0, C.stargateCore);
+ coreGrad.addColorStop(0.4, C.stargate);
+ coreGrad.addColorStop(0.8, "#9f1239");
+ coreGrad.addColorStop(1, "rgba(159,18,57,0)");
+ ctx.fillStyle = coreGrad;
+ ctx.beginPath();
+ ctx.arc(0, 0, g.radius * (0.9 + pulse * 0.1), 0, Math.PI * 2);
+ ctx.fill();
+
+ // 吸入粒子（接近时）
+ ctx.shadowBlur = 0;
+ if (proximity > 0.1) {
+ for (let i = 0; i < 8; i++) {
+ const ang = g.rotation * 2 + (i / 8) * Math.PI * 2;
+ const r = g.radius * (0.8 + 0.6 * Math.sin(g.pulsePhase + i));
+ const px = Math.cos(ang) * r;
+ const py = Math.sin(ang) * r;
+ ctx.fillStyle = `rgba(254,205,211,${proximity * 0.8})`;
+ ctx.beginPath();
+ ctx.arc(px, py, 2, 0, Math.PI * 2);
+ ctx.fill();
+ }
+ }
+
+ // 提示光环（接近时）
+ if (proximity > 0.3) {
+ ctx.beginPath();
+ ctx.arc(0, 0, g.radius * 1.6, 0, Math.PI * 2);
+ ctx.strokeStyle = `rgba(251,113,133,${proximity * 0.4})`;
+ ctx.lineWidth = 2;
+ ctx.setLineDash([8, 8]);
+ ctx.stroke();
+ ctx.setLineDash([]);
+ }
+
+ ctx.restore();
+}
+
+function drawParticle(ctx: CanvasRenderingContext2D, p: ParticleEntity) {
+ const alpha = Math.max(0, p.life / p.maxLife);
+ const size = p.shrink ? p.size * alpha : p.size;
+ if (size < 0.3) return;
+ ctx.globalAlpha = alpha;
+ ctx.fillStyle = p.color;
+ ctx.beginPath();
+ ctx.arc(p.x, p.y, size, 0, Math.PI * 2);
+ ctx.fill();
+ ctx.globalAlpha = 1;
+}
+
+// ============================================================
+// HUD 值
+// ============================================================
+interface HudValues {
+ shield: number;
+ energy: number;
+ score: number;
+ time: number;
+ duration: number;
+ crystals: number;
+ totalCrystals: number;
+ insights: number;
+ totalInsights: number;
+ beacons: number;
+ totalBeacons: number;
+ lowShield: boolean;
+}
+
+// ============================================================
+// 主组件
+// ============================================================
+export function CruiseMode({ onClose }: { onClose: () => void }) {
+ const canvasRef = useRef
(null);
+ const stateRef = useRef(null);
+ const rafRef = useRef(0);
+ const lastTimeRef = useRef(0);
+ const starsRef = useRef([]);
+ const keysRef = useRef>(new Set());
+ const joystickRef = useRef<{
+ active: boolean;
+ baseX: number;
+ baseY: number;
+ knobX: number;
+ knobY: number;
+ touchId: number | null;
+ }>({ active: false, baseX: 0, baseY: 0, knobX: 0, knobY: 0, touchId: null });
+ const rewardGrantedRef = useRef(false);
+ const pausedRef = useRef(false);
+ const phaseRef = useRef("ready");
+ const hudRef = useRef({
+ shield: 100,
+ energy: 100,
+ score: 0,
+ time: 0,
+ duration: 60,
+ crystals: 0,
+ totalCrystals: 0,
+ insights: 0,
+ totalInsights: 0,
+ beacons: 0,
+ totalBeacons: 0,
+ lowShield: false,
+ });
+ const lastHudUpdateRef = useRef(0);
+ const sizeRef = useRef<{ w: number; h: number }>({ w: 0, h: 0 });
+
+ const [phase, setPhase] = useState("ready");
+ const [level, setLevel] = useState(1);
+ const [result, setResult] = useState(null);
+ const [stats, setStats] = useState(null);
+ const [paused, setPaused] = useState(false);
+ const [isTouch, setIsTouch] = useState(false);
+ const [joystickVisual, setJoystickVisual] = useState<{
+ baseX: number;
+ baseY: number;
+ knobX: number;
+ knobY: number;
+ active: boolean;
+ }>({ baseX: 0, baseY: 0, knobX: 0, knobY: 0, active: false });
+ const [hud, setHud] = useState({
+ shield: 100,
+ energy: 100,
+ score: 0,
+ time: 0,
+ duration: 60,
+ crystals: 0,
+ totalCrystals: 0,
+ insights: 0,
+ totalInsights: 0,
+ beacons: 0,
+ totalBeacons: 0,
+ lowShield: false,
+ });
+
+ // ---- 启动一局 ----
+ const startGame = useCallback((lvl: number) => {
+ const { w, h } = sizeRef.current;
+ if (w === 0 || h === 0) return;
+ const seed = cruiseSeed(lvl);
+ const state = generateLevel(lvl, seed, w, h);
+ state.phase = "playing";
+ stateRef.current = state;
+ rewardGrantedRef.current = false;
+ setResult(null);
+ setLevel(lvl);
+ setPhase("playing");
+ phaseRef.current = "playing";
+ setPaused(false);
+ pausedRef.current = false;
+ // 重置 HUD
+ hudRef.current = {
+ shield: state.ship.shield,
+ energy: state.ship.energy,
+ score: 0,
+ time: 0,
+ duration: state.durationSec,
+ crystals: 0,
+ totalCrystals: state.totalCrystals,
+ insights: 0,
+ totalInsights: state.totalInsights,
+ beacons: 0,
+ totalBeacons: state.totalBeacons,
+ lowShield: false,
+ };
+ setHud({ ...hudRef.current });
+ }, []);
+
+ // ---- 加载统计 ----
+ useEffect(() => {
+ // eslint-disable-next-line react-hooks/set-state-in-effect
+ setStats(loadCruiseStats());
+ }, []);
+
+ // ---- 检测触摸设备 ----
+ useEffect(() => {
+ // eslint-disable-next-line react-hooks/set-state-in-effect
+ setIsTouch(
+ typeof window !== "undefined" &&
+ ("ontouchstart" in window || navigator.maxTouchPoints > 0)
+ );
+ }, []);
+
+ // ---- Canvas 初始化 + Resize ----
+ useEffect(() => {
+ const canvas = canvasRef.current;
+ if (!canvas) return;
+ const ctx = canvas.getContext("2d");
+ if (!ctx) return;
+
+ const resize = () => {
+ const dpr = Math.min(window.devicePixelRatio || 1, 2);
+ const w = window.innerWidth;
+ const h = window.innerHeight;
+ canvas.width = Math.floor(w * dpr);
+ canvas.height = Math.floor(h * dpr);
+ canvas.style.width = w + "px";
+ canvas.style.height = h + "px";
+ ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+ sizeRef.current = { w, h };
+ starsRef.current = generateStars(w, h);
+ if (stateRef.current) {
+ stateRef.current.worldWidth = w;
+ stateRef.current.worldHeight = h;
+ }
+ };
+ resize();
+ window.addEventListener("resize", resize);
+ return () => window.removeEventListener("resize", resize);
+ }, []);
+
+ // ---- 键盘控制 ----
+ useEffect(() => {
+ const down = (e: KeyboardEvent) => {
+ const k = e.key.toLowerCase();
+ if (["w", "a", "s", "d", "arrowup", "arrowdown", "arrowleft", "arrowright"].includes(k)) {
+ keysRef.current.add(k);
+ e.preventDefault();
+ } else if (k === "p") {
+ if (phaseRef.current === "playing") {
+ const np = !pausedRef.current;
+ pausedRef.current = np;
+ setPaused(np);
+ }
+ } else if (k === "escape") {
+ onClose();
+ }
+ };
+ const up = (e: KeyboardEvent) => {
+ const k = e.key.toLowerCase();
+ keysRef.current.delete(k);
+ };
+ window.addEventListener("keydown", down);
+ window.addEventListener("keyup", up);
+ return () => {
+ window.removeEventListener("keydown", down);
+ window.removeEventListener("keyup", up);
+ };
+ }, [onClose]);
+
+ // ---- 失焦自动暂停 ----
+ useEffect(() => {
+ const onBlur = () => {
+ if (phaseRef.current === "playing") {
+ pausedRef.current = true;
+ setPaused(true);
+ }
+ };
+ window.addEventListener("blur", onBlur);
+ document.addEventListener("visibilitychange", onBlur);
+ return () => {
+ window.removeEventListener("blur", onBlur);
+ document.removeEventListener("visibilitychange", onBlur);
+ };
+ }, []);
+
+ // ---- 触摸摇杆 ----
+ useEffect(() => {
+ const onStart = (e: TouchEvent) => {
+ if (phaseRef.current !== "playing" || pausedRef.current) return;
+ for (let i = 0; i < e.changedTouches.length; i++) {
+ const t = e.changedTouches[i];
+ // 左下区域激活摇杆
+ if (t.clientX < window.innerWidth * 0.5 && t.clientY > window.innerHeight * 0.35) {
+ if (joystickRef.current.active) continue;
+ joystickRef.current = {
+ active: true,
+ baseX: t.clientX,
+ baseY: t.clientY,
+ knobX: 0,
+ knobY: 0,
+ touchId: t.identifier,
+ };
+ setJoystickVisual({
+ baseX: t.clientX,
+ baseY: t.clientY,
+ knobX: 0,
+ knobY: 0,
+ active: true,
+ });
+ e.preventDefault();
+ return;
+ }
+ }
+ };
+ const onMove = (e: TouchEvent) => {
+ if (!joystickRef.current.active) return;
+ for (let i = 0; i < e.changedTouches.length; i++) {
+ const t = e.changedTouches[i];
+ if (t.identifier !== joystickRef.current.touchId) continue;
+ const dx = t.clientX - joystickRef.current.baseX;
+ const dy = t.clientY - joystickRef.current.baseY;
+ const maxR = 55;
+ const mag = Math.hypot(dx, dy);
+ const clampedMag = Math.min(mag, maxR);
+ const nx = mag > 0 ? (dx / mag) * clampedMag : 0;
+ const ny = mag > 0 ? (dy / mag) * clampedMag : 0;
+ joystickRef.current.knobX = nx / maxR; // -1 ~ 1
+ joystickRef.current.knobY = ny / maxR;
+ setJoystickVisual({
+ baseX: joystickRef.current.baseX,
+ baseY: joystickRef.current.baseY,
+ knobX: nx,
+ knobY: ny,
+ active: true,
+ });
+ e.preventDefault();
+ return;
+ }
+ };
+ const onEnd = (e: TouchEvent) => {
+ if (!joystickRef.current.active) return;
+ for (let i = 0; i < e.changedTouches.length; i++) {
+ const t = e.changedTouches[i];
+ if (t.identifier !== joystickRef.current.touchId) continue;
+ joystickRef.current = {
+ active: false,
+ baseX: 0,
+ baseY: 0,
+ knobX: 0,
+ knobY: 0,
+ touchId: null,
+ };
+ setJoystickVisual({ baseX: 0, baseY: 0, knobX: 0, knobY: 0, active: false });
+ e.preventDefault();
+ return;
+ }
+ };
+ window.addEventListener("touchstart", onStart, { passive: false });
+ window.addEventListener("touchmove", onMove, { passive: false });
+ window.addEventListener("touchend", onEnd, { passive: false });
+ window.addEventListener("touchcancel", onEnd, { passive: false });
+ return () => {
+ window.removeEventListener("touchstart", onStart);
+ window.removeEventListener("touchmove", onMove);
+ window.removeEventListener("touchend", onEnd);
+ window.removeEventListener("touchcancel", onEnd);
+ };
+ }, []);
+
+ // ---- 游戏主循环 ----
+ useEffect(() => {
+ const canvas = canvasRef.current;
+ if (!canvas) return;
+ const ctx = canvas.getContext("2d");
+ if (!ctx) return;
+
+ const loop = (time: number) => {
+ rafRef.current = requestAnimationFrame(loop);
+ const dt = lastTimeRef.current === 0 ? 16 : time - lastTimeRef.current;
+ lastTimeRef.current = time;
+ const dtSec = Math.min(dt / 1000, 0.05);
+ const { w, h } = sizeRef.current;
+ if (w === 0 || h === 0) return;
+
+ const state = stateRef.current;
+ const playing = state && state.phase === "playing" && !pausedRef.current;
+
+ // ---- 更新 ----
+ if (playing && state) {
+ // 计算输入
+ let dx = 0;
+ let dy = 0;
+ const keys = keysRef.current;
+ 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;
+ // 摇杆覆盖
+ if (joystickRef.current.active) {
+ dx = joystickRef.current.knobX;
+ dy = joystickRef.current.knobY;
+ }
+ const input: CruiseInput = {
+ dx,
+ dy,
+ active: Math.abs(dx) > 0.05 || Math.abs(dy) > 0.05,
+ };
+ const res = updateCruise(state, dt, input);
+ if (res) {
+ // 结算
+ setResult(res);
+ setPhase(res.phase);
+ phaseRef.current = res.phase;
+ if (!rewardGrantedRef.current) {
+ rewardGrantedRef.current = true;
+ useGameStore.getState().grantCruiseReward(res.rewards);
+ const newStats = recordRun(res);
+ setStats(newStats);
+ }
+ }
+ // 更新 HUD ref
+ hudRef.current = {
+ shield: state.ship.shield,
+ energy: state.ship.energy,
+ score: state.score,
+ time: state.timeSec,
+ duration: state.durationSec,
+ crystals: state.collectedCrystals,
+ totalCrystals: state.totalCrystals,
+ insights: state.collectedInsights,
+ totalInsights: state.totalInsights,
+ beacons: state.collectedBeacons,
+ totalBeacons: state.totalBeacons,
+ lowShield: state.flashLowShield,
+ };
+ // 节流更新 React HUD（~12fps）
+ if (time - lastHudUpdateRef.current > 80) {
+ lastHudUpdateRef.current = time;
+ setHud({ ...hudRef.current });
+ }
+ }
+
+ // ---- 渲染 ----
+ // 背景
+ ctx.fillStyle = "#050410";
+ ctx.fillRect(0, 0, w, h);
+
+ // 屏幕震动偏移
+ let shakeX = 0;
+ let shakeY = 0;
+ if (state && state.shakeTimer > 0) {
+ const intensity = state.shakeAmount * (state.shakeTimer / CRUISE_CONFIG.shakeMs);
+ shakeX = (Math.random() - 0.5) * intensity;
+ shakeY = (Math.random() - 0.5) * intensity;
+ }
+ ctx.save();
+ ctx.translate(shakeX, shakeY);
+
+ // 视差星空
+ const shipVx = state ? state.ship.vx : 0;
+ const shipVy = state ? state.ship.vy : 0;
+ drawStars(ctx, starsRef.current, dtSec, w, h, shipVx, shipVy);
+
+ // 实体
+ if (state) {
+ // 星门优先（在底层）
+ for (const e of state.entities) {
+ if (e.type === "stargate") drawStargate(ctx, e, state.ship);
+ }
+ // 风暴
+ for (const e of state.entities) {
+ if (e.type === "storm") drawStorm(ctx, e);
+ }
+ // 陨石
+ for (const e of state.entities) {
+ if (e.type === "asteroid") drawAsteroid(ctx, e);
+ }
+ // 收集物
+ for (const e of state.entities) {
+ if (e.type === "crystal") drawCrystal(ctx, e);
+ else if (e.type === "insight") drawInsight(ctx, e);
+ else if (e.type === "beacon") drawBeacon(ctx, e);
+ }
+ // 粒子
+ for (const p of state.particles) drawParticle(ctx, p);
+ // 飞船（最上层）
+ if (state.phase === "playing" || state.phase === "won") {
+ drawShip(ctx, state.ship, state.invulnTimer > 0);
+ }
+ }
+
+ ctx.restore();
+
+ // 低护盾红色边框（不受震动影响）
+ if (state && state.flashLowShield && state.phase === "playing") {
+ const pulse = 0.3 + 0.3 * Math.sin(time / 150);
+ ctx.strokeStyle = `rgba(251,113,133,${pulse})`;
+ ctx.lineWidth = 6;
+ ctx.strokeRect(3, 3, w - 6, h - 6);
+ }
+ };
+ rafRef.current = requestAnimationFrame(loop);
+ return () => cancelAnimationFrame(rafRef.current);
+ }, []);
+
+ // ---- 暂停切换 ----
+ const togglePause = useCallback(() => {
+ if (phaseRef.current !== "playing") return;
+ const np = !pausedRef.current;
+ pausedRef.current = np;
+ setPaused(np);
+ }, []);
+
+ // ---- 退出 ----
+ const handleExit = useCallback(() => {
+ onClose();
+ }, [onClose]);
+
+ // ============================================================
+ // 渲染
+ // ============================================================
+ const shieldPct = Math.max(0, Math.min(100, hud.shield));
+ const shieldColor =
+ shieldPct > 60 ? "#34d399" : shieldPct > 30 ? "#fbbf24" : "#fb7185";
+ const energyPct = Math.max(0, Math.min(100, hud.energy));
+ const timeLeft = Math.max(0, hud.duration - hud.time);
+
+ return (
+
+
+
+ {/* ============ 顶部 HUD ============ */}
+ {phase === "playing" && (
+ <>
+ {/* 左上：护盾 + 能量 */}
+
+
+
+ 护盾
+
+ {Math.round(shieldPct)}
+
+
+
+
+
+ 能量
+
+ {Math.round(energyPct)}
+
+
+
+
+
+ {/* 中上：分数 + 关卡 + 用时 */}
+
+
+
+
+
分数
+
{formatNum(hud.score)}
+
+
+
+
+ 用时
+
+
+ {Math.floor(timeLeft / 60)}:{String(Math.floor(timeLeft % 60)).padStart(2, "0")}
+
+
+
+
+ {/* 右上：收集计数 + 暂停 + 退出 */}
+
+
+
+
+
+ {hud.crystals}/{hud.totalCrystals}
+
+
+
+
+
+ {hud.insights}/{hud.totalInsights}
+
+
+
+
+
+ {hud.beacons}/{hud.totalBeacons}
+
+
+
+
+
+
+
+ {/* 底部：操作提示 / 摇杆 */}
+ {!isTouch && (
+
+ WASD / 方向键 移动 · P 暂停 · Esc 退出
+
+ )}
+ {isTouch && (
+
+ 左下区域拖动操控
+
+ )}
+
+ {/* 虚拟摇杆（触屏） */}
+ {isTouch && joystickVisual.active && (
+
+ )}
+
+ {/* 暂停遮罩 */}
+ {paused && (
+
+ )}
+
+ )}
+
+ {/* ============ Ready 界面 ============ */}
+ {phase === "ready" && (
+
+
+
+
+
+
DEEP SPACE CRUISE
+
深空巡航
+
操控飞船穿越陨石带，抵达星门
+
+
+
+
+
历史最高分
+
+ {stats ? formatNum(stats.highScore) : "—"}
+
+
+
+
通关次数
+
+ {stats ? stats.totalWins : 0}
+
+
+
+
最高关卡
+
+ {stats && stats.bestLevel > 0 ? `L${stats.bestLevel}` : "—"}
+
+
+
+
+
+
+
+ 收集晶体碎片 → 晶体奖励
+
+
+
+ 收集洞见光球 → 洞见奖励
+
+
+
+ 收集信标 → 接触进度
+
+
+
+ 抵达星门通关 → +50% 奖励
+
+
+
+
+
+
+
+
+ {isTouch ? "左下区域拖动操控飞船" : "WASD / 方向键操控 · P 暂停 · Esc 退出"}
+
+
+
+
+ )}
+
+ {/* ============ 结算界面 ============ */}
+ {(phase === "won" || phase === "lost") && result && (
+
+
+
+
+
+ {phase === "won" ? "MISSION COMPLETE" : "MISSION FAILED"}
+
+
+ {phase === "won" ? "巡航成功" : "巡航失败"}
+
+
+ 关卡 L{result.level} · 用时 {Math.floor(result.durationSec / 60)}:
+ {String(Math.floor(result.durationSec % 60)).padStart(2, "0")}
+
+
+ {/* 收集统计 */}
+
+
+
+
+ {result.collectedCrystals}
+
+
晶体碎片
+
+
+
+
+ {result.collectedInsights}
+
+
洞见光球
+
+
+
+
+ {result.collectedBeacons}
+
+
信标
+
+
+
+ {/* 剩余护盾 + 分数 */}
+
+
+
+
+
剩余护盾
+
+ {result.remainingShield}
+
+
+
+
+
+
+
得分
+
+ {formatNum(result.score)}
+
+
+
+
+
+ {/* 奖励明细 */}
+
+
+ {phase === "won" ? "通关奖励 (+50%)" : "残骸回收 (×50%)"}
+
+
+
+
+ 晶体
+
+
+ +{formatNum(result.rewards.crystals)}
+
+
+
+
+ 洞见
+
+
+ +{result.rewards.insights.toFixed(1)}
+
+
+
+
+ 接触
+
+
+ +{result.rewards.contact.toFixed(1)}%
+
+
+
+
+ 奖励已同步至主游戏
+
+
+
+ {/* 按钮 */}
+
+ {phase === "won" && (
+
+ )}
+
+
+
+
+
+
+ )}
+