Super_Z
fafa2ee20a
## 玩法拓展（回应用户: 玩法太单调/全是点点点） - 新增「深空巡航」Canvas 2D 全屏实时玩法 - 飞船操控(WASD/方向键/移动端虚拟摇杆) - 实时躲避陨石/虚空风暴，收集晶体/洞见/信标 - 到达星门通关，护盾归零失败 - 3层视差星空 + 粒子系统(尾焰/收集/碰撞/烟花) + 辉光 + 屏幕震动 - 奖励同步主游戏(grantCruiseReward) - 独立 localStorage 记录最高分/通关数 ## UI 修复（回应用户: 解析球左上偏移/成就小屏重叠） - DecodeArray 节点: 移除 Tailwind translate 与 inline transform 冲突 - AchievementsPanel: 移除固定 max-h, 改 flex-1 min-h-0 自适应 - page.tsx 布局: 小屏减小 min-h, 避免挤压重叠 ## 集成 - gameStore 新增 grantCruiseReward action - header 新增 amber 主题「巡航」按钮 + 全屏 CruiseMode 渲染 ## 文件 - src/lib/game/cruise.ts (新增, ~1008行) - src/components/game/CruiseMode.tsx (新增, ~1350行) - src/app/page.tsx (集成巡航入口) - src/store/gameStore.ts (grantCruiseReward action) - src/components/game/DecodeArray.tsx (节点偏移修复) - src/components/game/AchievementsPanel.tsx (小屏重叠修复) QA: lint 零错误; agent-browser+VLM 验证主界面无偏移+巡航玩法正常运行
53 lines
2.9 KiB
Markdown
53 lines
2.9 KiB
Markdown
# 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 && <CruiseMode onClose={...} />}
|
||
- 未破坏现有 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) 四色全息色谱，零蓝色/靛色
|