项目 02 / 04 · 推理游戏
雾海挽歌
蓝室谋杀案
暴风雨困住的庄园,上锁的书房,一杯没喝完的茶。 两位侦探,各自能去到对方去不了的地方 —— 但真凶只有一个, 对谁来查都得讲得通。
正在准备演示……
如果没有自动出现,在新标签页打开完整版 →
在手机上是整页打开的体验更好 —— 上方演示框是给桌面端用的。
游戏里长什么样
美术 · 十四张
两位主角,十二个场景。下面这些立绘全部由 AI 生成 —— 但在这之前,它们先被用代码手绘过一遍。
左右滑动看全部 14 张 · 立绘由 AI 生成,美术方向参考了《明日方舟》的赛璐璐风格。
设计说明 · 四段
一、为什么是 1930 年代的英国庄园
推理故事的舞台决定了它能容纳多少种诡计。选庄园是因为它天然自带三件东西: 封闭(暴风雨、断桥、没人能进出)、 关系网(一屋子人彼此都有动机)、 规矩(谁在几点去了哪、谁该在哪个房间 —— 时间线才有意义)。
年代定在 1930 年代也是同一个道理:那时候没有手机、没有监控, 证据只能靠人证和物证,侦探的推理过程才成为必要的。 如果背景放在今天,一个监控就结案了。
二、双主角:整个设计里最难的一处
两位侦探的能力刻意做成互补的:
- 洛肯火红长发,三十岁,雷厉风行。体力强 —— 能撬动沉重的物件、搬开挡路的家具。
- 薇欧拉十五岁,病弱苍白,略微毒舌。体力弱但洞察强 —— 能钻进狭窄的缝隙、看见别人忽略的细微痕迹。
难点在于:两条线各给一条专属线索,如何保证最后指认的真凶对谁来查都成立?
我的做法是把专属线索设计成通路而不是结论。 男侦探撬开柜子拿到的是一张纸,女侦探从缝隙里看见的是同一个柜子里的另一件东西 —— 两条线索指向的是同一件事,只是到达方式不同。 任何人都拿不到「只有他知道的答案」,但每个人都会有一条「只有他走得通的路」。
三、美术:先用代码撑住,再换真图
立绘分了两步走,这个顺序是刻意的:
第一步,用内嵌 SVG 手绘。 把两个主角和十几个场景全部用代码画成赛璐璐风格的插画 —— 这一步的目的不是好看,是让游戏先能玩。 美术是可以后置的,玩法不能。
第二步,接上生图接口,换成 14 张真立绘。 我把生成好的图存成文件,再用一个脚本把图片路径注入到 HTML 里的 window.ART 映射表。 关键设计是缺图自动回退:映射表里没有的图,就自动用回 SVG 手绘版。 所以换图的过程中游戏从来没有坏过,哪一张没生成好,那一张就还是手绘的。
四、为什么坚持做成一个文件
整个游戏最后是一个 HTML 文件,双击就能玩,不需要装任何东西、不需要联网、 不需要服务器。
这不是技术洁癖,是为了让「分享」这件事的成本降到零。 发给朋友的时候不用解释「你先装个什么」,直接发文件就行。 对一个小体量的叙事游戏来说,能不能被玩到,比它做得多精致更重要。
结果
它证明了什么
一款完整的叙事推理游戏 —— 世界观、案情、双线公平性、美术、交互 —— 可以只放在一个 HTML 文件里,而且不牺牲可玩性。 页面上方那个演示是真实的成品,不是录像。
如果继续做,下一步是加第二个案子,并且让两位侦探的专属线索开始互相影响 —— 也就是让「选谁」不只是选一条路径,而是选一种视角。