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

重庆益之趣三消关卡 Demo

短周期面试交付：把目标收集型三消参考素材拆成可运行单关卡 Demo，覆盖 9 x 9 棋盘、行李箱目标、交换回退、匹配结算、掉落补位、特殊棋子、胜利锁定、调试面板和验收文档。

项目背景

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

我把项目分成两层交付：

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

交付范围

当前 Demo 使用 Vite + TypeScript + PixiJS + Vitest 实现。第一版范围控制在单关卡，但保留了从 Demo 扩展到关卡系统的基础结构。

已经实现的能力包括：

• 9 x 9 棋盘和四类普通棋子。
• 行李箱目标物，顶部显示剩余 Suitcases 数量，初始目标数为 33。
• 点击相邻棋子交换，非相邻选择切换，非法交换短暂停留后回退。
• 横向/纵向匹配清除，结算后掉落、补位并继续检查连锁。
• 行李箱被相邻普通消除或特殊效果命中后收集，目标数量随之减少。
• 横向火箭、纵向火箭、炸弹、飞机四类特殊棋子。
• 目标清零后显示 Great 并锁定输入。
• 调试控件支持重开、查看事件日志、指定特殊棋子类型和强制放置特殊棋子。

架构拆分

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

核心设计取舍：

• 关卡数据用配置描述，而不是把棋盘写死在渲染逻辑里。
• 棋盘格和棋盘实体分离，便于后续支持不可落子格、多层障碍和特殊重力。
• 结算流程输出结构化事件，事件日志既服务调试，也能说明后续如何做难度和节奏分析。
• 固定随机种子保证每次重开进入稳定演示状态。

工程实现

实现上优先保证三件事：

1. 玩法闭环完整：交换、匹配、收集、掉落、补位、连锁和胜利可以串起来跑。
2. 状态边界清楚：输入锁定、非法交换回退、目标清零后的胜利锁定都由状态控制。
3. 演示路径稳定：debug 面板能快速触发特殊棋子，避免评审现场只靠随机局面等待。

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

验证方式

项目保留了两类验证：

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

常用验收命令：

npm test
npm run build

同时保留了运行手册和桌面/移动端浏览器截图，用于回看最终 UI 是否成功渲染、棋盘是否非空、调试控件是否可见。

演示重点

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

1. 先展示棋盘、目标栏和行李箱目标，说明这是目标收集型三消关卡。
2. 演示有效交换、普通三消和目标数量减少。
3. 演示无效交换回退，说明规则边界和反馈。
4. 用 debug 控件触发火箭、炸弹或飞机，展示特殊效果和目标收集。
5. 展示事件日志，说明如何把 demo 扩展成可调参、可验证的三消核心系统。
6. 最后说明当前边界：这是单关卡面试 Demo，不包含账号、关卡选择、经济系统、联网服务或商业级美术音效。

公开边界

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

复盘

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