玩法拆解、规则引擎、PixiJS 表现层、关卡流程、验收文档与演示闭环

重庆益之趣三消关卡 Demo

短周期面试交付：把目标收集型三消参考素材拆成可运行的多关卡 Demo，覆盖关卡选择、三关难度序列、9 x 9 棋盘、行李箱 HP 目标、交换回退、匹配结算、特殊棋子、通关续关、游戏内按钮层、测试和录屏验收。

项目背景

这是一个面向游戏岗位/互动 Demo 的短周期面试项目。任务核心不是做一张静态三消棋盘，而是把目标收集型三消玩法拆成可运行、可验收、可继续扩展的前端 Demo。

我把项目分成两层交付：

• 先写开发设计书，明确玩法假设、模块边界、验收标准和演示路线。
• 再实现可运行 Demo，用关卡选择、固定种子、测试和录屏保证评审时能稳定看到关键机制。

交付范围

当前 Demo 使用 Vite + TypeScript + PixiJS + Vitest 实现，已从单关卡扩展到可选择关卡和循环续关的收尾版。

已经实现的能力包括：

• 首屏关卡选择层，包含 Level 1 · Warmup、Level 2 · Thicker Luggage、Level 3 · Hard Cases。
• 三个基础关卡有不同难度标签、目标 HP、seed、说明文案和强调色。
• 第 4 关开始循环模板并提高 round、seed、目标 HP 和生成权重压力。
• 9 x 9 棋盘、四类普通棋子和不同 HP 的行李箱目标物。
• 顶部 HUD 显示当前关卡和剩余 Suitcases 数量。
• 点击相邻棋子交换，非相邻选择切换，非法交换短暂停留后回退。
• 横向/纵向匹配清除，结算后掉落、补位并继续检查连锁。
• 行李箱被相邻普通消除或特殊效果命中后收集，目标数量随之减少。
• 横向火箭、纵向火箭、炸弹、飞机四类特殊棋子。
• 关卡内常态按钮为 重试 和 退出，中途退出后可继续当前关。
• 通关后弹出 Level N Clear 操作层，支持 重试、退出、下一关，也会自动续关。

架构拆分

项目刻意把“规则真值”和“表现反馈”分开。规则层负责棋盘状态、交换合法性、匹配检测、目标收集、掉落补位和事件输出；表现层只消费这些事件并更新 PixiJS 棋盘。

核心设计取舍：

• 关卡数据用配置描述，而不是把棋盘写死在渲染逻辑里。
• 关卡选择、关卡内控制层和通关操作层独立于规则层，便于继续接入步数限制、失败条件或商业化系统。
• 棋盘格和棋盘实体分离，便于后续支持不可落子格、多层障碍、特殊重力和更复杂目标。
• 结算流程输出结构化事件，事件日志既服务调试，也能说明后续如何做难度和节奏分析。
• 固定随机种子保证每个关卡的演示状态稳定可复现。

工程实现

实现上优先保证三件事：

1. 玩法闭环完整：交换、匹配、收集、掉落、补位、连锁和胜利可以串起来跑。
2. 状态边界清楚：输入锁定、非法交换回退、中途退出、继续当前关、通关续关都由状态控制。
3. 演示路径稳定：三关配置、HP 目标、按钮层、录屏和运行手册共同固定验收路线。

这让 Demo 更像一个可继续迭代的游戏核心，而不是一次性动画页面。

验证方式

项目保留了两类验证：

• 单元测试覆盖棋盘生成、交换判断、匹配检测、目标收集、特殊效果、掉落补位、事件日志和渲染辅助逻辑。
• 构建验证通过 TypeScript 编译和 Vite 打包，确认 Demo 可以作为静态前端产物交付。

常用验收命令：

npm test
npm run build

收尾验收记录显示：主项目和交付包副本共 26 个测试文件、156 条测试通过；生产构建通过。浏览器验收覆盖桌面 1280 x 720 和移动 390 x 844，确认关卡选择、棋盘、HUD、按钮层、通关层、下一关跳转和控制台状态正常。

演示重点

面试展示时我会按以下顺序讲：

1. 先展示关卡选择层，说明三关差异化难度和 HP 目标设计。
2. 进入关卡后展示棋盘、目标栏、行李箱目标和常态按钮。
3. 演示有效交换、普通三消、目标数量减少和无效交换回退。
4. 演示中途退出、继续当前关、通关层和下一关跳转。
5. 展示第 4 关开始的循环续关策略，说明从 Demo 到关卡系统的扩展口。
6. 最后说明当前边界：这是面试 Demo，不包含账号、经济系统、联网服务或商业级美术音效。

公开边界

这个页面只公开我完成的工程方法、功能范围和可复用经验，不公开面试方原始题面、参考视频、内部链接或任何未授权材料。

复盘

这个项目的价值不在于三消规则本身复杂，而在于短时间内把一个开放素材转成可验收交付：先定义范围和假设，再拆规则层与表现层，然后用关卡配置、测试、构建、运行手册、录屏和在线 Demo 把结果固定下来。