闫文洁PORTFOLIO

项目 02 / 04 · 推理游戏

雾海挽歌
蓝室谋杀案

暴风雨困住的庄园,上锁的书房,一杯没喝完的茶。 两位侦探,各自能去到对方去不了的地方 —— 但真凶只有一个, 对谁来查都得讲得通

时间
2026
角色
世界观与案情设定 · 推理结构设计 · 美术方案 · 与 Claude Code 协作开发
技术
单文件 HTML / CSS / JavaScript,零依赖,双击即玩
规模
2 位主角 · 12 个场景 · 14 张 AI 生成立绘 · 单文件约 87 KB
在哪
本页下方可直接试玩
可以直接玩 · 一个 HTML 文件,不联网也能跑 建议横屏 · 有声音吗?没有,靠雨
DEMO

正在准备演示……
如果没有自动出现,在新标签页打开完整版 →

在手机上是整页打开的体验更好 —— 上方演示框是给桌面端用的。

游戏里长什么样

游戏开局:选择你的侦探,两位角色的立绘与能力标注
开局第一屏先选侦探,两个人都标了「体力 / 洞察」的强弱。下面那行小字是全部设计里最难的一处 —— 两条线索各有隐秘收获,但真凶无论谁来都查得出来。

美术 · 十四张

两位主角,十二个场景。下面这些立绘全部由 AI 生成 —— 但在这之前,它们先被用代码手绘过一遍。

男主角立绘:侦探洛肯,火红长发,三十岁左右
01 洛肯 · 侦探
女主角立绘:侦探薇欧拉,金色长卷发,十五岁,面色苍白
02 薇欧拉 · 侦探
场景立绘:庄园厅堂
03 厅堂 · hub
场景立绘:书房,也就是案发现场
04 书房 · study
场景立绘:验尸
05 验尸 · autopsy
场景立绘:茶具
06 茶具 · teaset
场景立绘:药草
07 药草 · herbs
场景立绘:时间线推演
08 时间线 · timeline
场景立绘:遗嘱
09 遗嘱 · will
场景立绘:信件
10 信件 · letter
场景立绘:账本
11 账本 · ledger
场景立绘:池塘
12 池塘 · fish
场景立绘:只能由男侦探触发的力量线索
13 力量线 · strong
场景立绘:只能由女侦探触发的洞察线索
14 洞察线 · insight

左右滑动看全部 14 张 · 立绘由 AI 生成,美术方向参考了《明日方舟》的赛璐璐风格。

设计说明 · 四段

一、为什么是 1930 年代的英国庄园

推理故事的舞台决定了它能容纳多少种诡计。选庄园是因为它天然自带三件东西: 封闭(暴风雨、断桥、没人能进出)、 关系网(一屋子人彼此都有动机)、 规矩(谁在几点去了哪、谁该在哪个房间 —— 时间线才有意义)。

年代定在 1930 年代也是同一个道理:那时候没有手机、没有监控, 证据只能靠人证和物证,侦探的推理过程才成为必要的。 如果背景放在今天,一个监控就结案了。

二、双主角:整个设计里最难的一处

两位侦探的能力刻意做成互补的:

  • 洛肯火红长发,三十岁,雷厉风行。体力强 —— 能撬动沉重的物件、搬开挡路的家具。
  • 薇欧拉十五岁,病弱苍白,略微毒舌。体力弱但洞察强 —— 能钻进狭窄的缝隙、看见别人忽略的细微痕迹。

难点在于:两条线各给一条专属线索,如何保证最后指认的真凶对谁来查都成立?

我的做法是把专属线索设计成通路而不是结论。 男侦探撬开柜子拿到的是一张纸,女侦探从缝隙里看见的是同一个柜子里的另一件东西 —— 两条线索指向的是同一件事,只是到达方式不同。 任何人都拿不到「只有他知道的答案」,但每个人都会有一条「只有他走得通的路」。

三、美术:先用代码撑住,再换真图

立绘分了两步走,这个顺序是刻意的:

第一步,用内嵌 SVG 手绘。 把两个主角和十几个场景全部用代码画成赛璐璐风格的插画 —— 这一步的目的不是好看,是让游戏先能玩。 美术是可以后置的,玩法不能。

第二步,接上生图接口,换成 14 张真立绘。 我把生成好的图存成文件,再用一个脚本把图片路径注入到 HTML 里的 window.ART 映射表。 关键设计是缺图自动回退:映射表里没有的图,就自动用回 SVG 手绘版。 所以换图的过程中游戏从来没有坏过,哪一张没生成好,那一张就还是手绘的。

四、为什么坚持做成一个文件

整个游戏最后是一个 HTML 文件,双击就能玩,不需要装任何东西、不需要联网、 不需要服务器。

这不是技术洁癖,是为了让「分享」这件事的成本降到零。 发给朋友的时候不用解释「你先装个什么」,直接发文件就行。 对一个小体量的叙事游戏来说,能不能被玩到,比它做得多精致更重要。

结果

它证明了什么

一款完整的叙事推理游戏 —— 世界观、案情、双线公平性、美术、交互 —— 可以只放在一个 HTML 文件里,而且不牺牲可玩性。 页面上方那个演示是真实的成品,不是录像。

如果继续做,下一步是加第二个案子,并且让两位侦探的专属线索开始互相影响 —— 也就是让「选谁」不只是选一条路径,而是选一种视角。