echo-nexus/agent-ctx/6-full-stack-developer.md

Task 6: 开发 Canvas 2D 深空巡航实时玩法

Agent: full-stack-developer

完成状态: ✅ 全部完成

创建的文件

1. /home/z/my-project/src/lib/game/cruise.ts — 逻辑层（~520 行纯 TS）
2. /home/z/my-project/src/components/game/CruiseMode.tsx — Canvas 2D 渲染层（~830 行）

修改的文件

1. /home/z/my-project/src/app/page.tsx — 新增巡航入口按钮 + CruiseMode 渲染

关键实现细节

cruise.ts 逻辑层

• 类型系统：CruiseEntity 联合类型（8 种实体：ship/asteroid/storm/crystal/insight/beacon/stargate/particle），完整 CruiseState/Phase/RunResult/Stats/Input
• 关卡生成：mulberry32 + FNV-1a 种子化 RNG；陨石(8+level×2)、风暴(1+level/2)、晶体(5+level)、洞见(2+level/3)、信标(1+level/4)、星门；时长 60-90s
• 物理：飞船 8 方向加速度+摩擦+限速+边界反弹；陨石碰撞扣盾+击退+600ms 无敌；风暴持续 DPS；收集物吸引半径 90px 自动吸入
• 奖励：crystals=碎片×(8+lvl×2)、insights=洞见×(2+lvl×0.5)、contact=信标×(1.5+lvl×0.3)；通关×1.5、失败×0.5
• localStorage：独立 key echo-nexus-cruise-v1，记录最高分/通关数/最高关卡/累计奖励/最近 20 局

CruiseMode.tsx 渲染层

• 全屏 Canvas：fixed inset-0 z-50，DPR cap 2，resize 监听
• 3 层视差星空：远/中/近 100/60/30 星，独立漂移+飞船速度视差+闪烁
• 实体辉光绘制：全部使用 ctx.shadowBlur；飞船三角形+尾焰渐变；陨石不规则多边形；风暴 5 层云团+闪电；晶体菱形+脉冲环；洞见球体+漩涡；信标光束+旋转环；星门 4 层旋涡+吸入粒子
• 粒子系统：尾焰/收集/碰撞/烟花，上限 200
• 屏幕震动：受击 280ms 衰减抖动
• 低护盾警告：shield<30% 屏幕边缘 rose 脉冲边框
• HUD：HTML 叠层（非 canvas），glass+backdrop-blur；护盾/能量/分数/用时/收集计数；80ms 节流更新
• 控制：桌面 WASD/方向键；移动端 floating 虚拟摇杆；P 暂停；Esc 退出；失焦自动暂停
• 奖励同步：结算时 grantCruiseReward + recordRun，rewardGrantedRef 防重

page.tsx 集成

• header 按钮区新增「巡航」按钮（Navigation 图标，amber 主题）
• 新增 cruiseOpen state
• 组件末尾渲染 {cruiseOpen && }
• 未破坏现有 7 标签页和其他功能

QA 验证结果

• ✅ lint 零错误
• ✅ 巡航按钮出现在顶部 header
• ✅ 点击进入全屏 Canvas，ready 界面完整
• ✅ WASD 控制飞船移动，按 W 直冲星门通关
• ✅ 收集 2 晶体 → 奖励 +30（2×10×1.5=30 计算正确）
• ✅ localStorage 正确记录 highScore/totalWins/bestLevel
• ✅ 奖励同步到 gameStore
• ✅ 退出返回主界面，7 标签页完好
• ✅ 移动端 viewport 测试通过

色彩遵循

emerald(#34d399) / rose(#fb7185) / amber(#fbbf24) / fuchsia(#e879f9) 四色全息色谱，零蓝色/靛色