🐍 圈一圈（Ouroboros）：衔尾蛇的闭环生存游戏

发布时间：2026年8月8日

《圈一圈（Ouroboros）》是我们在 2026 BOKE VIBE JAM 上获得一等奖的作品。 玩家控制不断延伸的蛇身形成闭环，在循环中完成战斗与净化， 围绕“连接、循环与成长”展开玩法。

项目起源

灵感来自“衔尾蛇”——一条咬住自己尾巴的蛇，象征循环与无限。 我们希望把这种环形意象变成真正的玩法：不是把蛇当作一条线去躲避， 而是用它去包围、捕获敌人，形成自己的闭环。

核心玩法设计

游戏的核心机制很简单：

• 控制蛇身移动，环绕敌人
• 让首尾再次相遇，形成闭环并捕获敌人
• 在循环中完成战斗与净化，积累净化积分

简单的环形机制被转化为战斗、成长与阶段挑战，这也是整个项目最有意思的部分。

Boss 战：噬环者

净化积分首次达到 15 分时，噬环者 Boss 登场。 玩家需要通过闭环捕获外置核心来破坏它的护甲，才能进入下一阶段。 Boss 出场后会切换专属背景音乐，冲刺、破甲和击败都有独立的声音反馈。

技术架构

项目基于 Vue 3 + Phaser + TypeScript 开发，采用模块化架构：

• engine：纯 TypeScript 玩法规则
• phaser：Scene、渲染、碰撞与资源清单
• input：键盘到语义动作的映射
• audio：音频偏好与安全持久化

玩法规则与渲染层分离，让逻辑更容易测试和维护。

多端支持

Web 构建是唯一的游戏产物，Electron 与 Capacitor 只负责装载 dist， 因此同一套代码可以打包成 Windows 桌面版和 Android 应用。

团队协作与工程化

这是团队协作项目，我们建立了完整的工程化流程：

• 代码质量检查：vue-tsc 类型检查
• 单元测试：vitest
• 构建验证：npm run verify
• 文档化：架构、美术、打包规范都在 docs/ 中

开发收获

• 把抽象概念（衔尾蛇）转化为可玩的游戏机制
• Vue 与 Phaser 生命周期的协调
• 玩法规则与渲染解耦的架构实践
• 多端打包（Web / Electron / Capacitor）

项目链接

在线体验：圈一圈（Ouroboros）

源代码：GitHub

← 返回博客列表