暴雪夜，雪山温泉庄院连环命案。一名无名侦探受邀而来，却在封山的第一夜，听见了旧账的回响。

这是《雪见庄·长夜》的开场白。它不是一个视频，也不是一个需要下载几百兆客户端才能运行的游戏，而是一份纯静态网页——打开浏览器就能玩。本文拆解它的技术实现与工程结构。

项目概览

为什么是「纯前端 + 零后端」

文字冒险（AVG）的体验本质上是线性/分支叙事 + 演出层：剧本、立绘、背景、CG、音频都在客户端加载即可，不存在需要服务端实时计算的状态。因此作者把所有剧情、美术与音频随包发布，游戏运行本身纯静态，部署时只需一份 dist/ 目录。

这让分发成本降到极低：无需服务器、无需数据库、无需备案（国内用云开发静态托管即可走 CDN）。小圈子分享基本零成本。

自研 AVG 引擎能做什么

位于 src/engine/ 的引擎并不只是「逐行显示文本」，而是覆盖了一个完整 AVG 所需的核心模块：

• 场景与对话：背景切换、对话框、打字机式文本演出。
• 立绘系统：角色立绘（含 blink 眨眼帧序列），支持多状态切换。
• 背景 / CG：72 张背景与 CG 资源统一管理。
• 探索与线索：玩家可在场景中探索、收集线索，驱动推理流程。
• 推理与选择分支：基于线索的推理环节 + 分支选择，影响剧情走向。
• 结局收集：多结局设计，支持在游戏内完成收集。

这套引擎是更通用的 avg-game-maker-skill（已发布 v1.0.0）的实例，《雪见庄·长夜》是从该 skill 仓库中剥离其他示例 story 与脚手架后的独立成品包。

美术与音频

• 美术：AI 生成，写实 noir（黑色电影）风格。共 72 张背景 + CG、51 张角色立绘（含 blink 帧）、12 张道具图。
• 音频：12 首 BGM（无缝循环）+ 13 个 SE（单次音效）。BGM 由音乐 AI 生成，SE 由程序化合成，全部通过浏览器 Web Audio API 播放。

音频资源目录：

public/audio/xuejian/
├── bgm/   # 12 首，无缝循环
└── se/    # 13 个，单次音效

工程结构

xuejian-changye/
├── index.html              # 入口（标题「雪见庄·长夜」）
├── src/
│   ├── engine/             # AVG 引擎（渲染 / 音频 / UI）
│   └── game/story14/       # 《雪见庄·长夜》剧本与资源声明
├── public/
│   ├── images/bg/xuejian/      # 背景 + CG（72 张）
│   ├── images/sprite/xuejian/  # 角色立绘（51 张）
│   ├── images/items/xuejian/   # 道具（12 张）
│   └── audio/xuejian/          # 12 BGM + 13 SE
└── dist/                   # 构建产物（部署用）

本地运行与部署

开发体验很轻量：

npm install      # 安装依赖（首次需联网，约几十 MB）
npm run dev      # 本地开发预览（默认 http://localhost:3000）
npm run build    # 构建生产产物到 dist/
npm run preview  # 本地预览构建产物

部署到静态托管（以OnePage为例）：

op login  登录
op init  初始化
op push  部署

游戏本身纯静态，部署时只需 dist/ 目录。

在线体验

项目已部署到云开发静态托管，无需下载、浏览器直接打开即可游玩：

整体而言，《雪见庄·长夜》是一次「用工程化方式做小体量叙事游戏」的务实示范：把引擎、剧本、资源打包成一份可静态托管的成品，既降低了分发与运维成本，也方便二次开发——换一套 story 剧本，就能产出下一个独立 AVG。