一个纯前端(HTML + CSS + JS,无构建、无依赖)的文字类冒险游戏框架, 附带一份由 LLM 生成、由生图 API 配图的完整剧本《崇祯模拟器》。
每一幕 = 背景图 + 打字机文字 + 若干选项。玩家点选项跳转下一幕,直到结局。
👉 https://esrrhs.github.io/TheMandate/
内置剧本:《崇祯模拟器》——你穿越到崇祯十六年冬,附身即将亡国的朱由检。 173 幕、多路径分支、若干结局(自缢、南迁割据、出海远走、抗清、隐居……)。
本项目由 AI 全流程驱动:框架代码、生成器代码、173 幕正文、173 张背景图、 音效——全部由 Claude Code + LLM + 文生图 API 产出。人工只在剧情大纲 (
content/outline.txt)层面做了方向性干预。
/
├── index.html # 根跳转(GitHub Pages 入口)→ framework/
├── framework/ # 游戏框架(表现逻辑)
│ ├── index.html
│ ├── css/style.css
│ └── js/game.js
├── content/ # 《崇祯模拟器》剧本内容
│ ├── meta.txt # 标题、起始幕、打字速度
│ ├── outline.txt # 剧情大纲(树结构,生成器输入)
│ ├── pairs.txt # 幕间衔接检查产物
│ └── scenes/
│ └── <数字ID>/
│ ├── bg.png # 背景图
│ ├── text.txt # 正文
│ ├── choices.txt # 选项 → 下一幕 ID
│ └── img.txt # 文生图 prompt(生成器产物)
├── content_demo/ # 极简 7 幕示例(含 SVG 占位背景),学格式用
├── generator/ # Go 生成器:调 LLM 写正文、调生图 API 出背景
├── cover.jpg # 项目封面图
└── README.md
框架和内容彻底解耦:框架只负责"读取 → 表现",任何按下述格式产出的
content/ 目录都能直接跑。
- 背景图铺满屏幕,切换时交叉淡入淡出。
- 文字打字机效果逐字出现,点击屏幕跳过打字动画。
- 文字打完后,选项按钮才依次浮现。
- 结局幕(
choices.txt内容为结局或文件不存在)显示「重新开始」按钮。 - 点击选项、跳过、场景切换、重开各有一枚 WebAudio 合成音效。
- 资源加载失败会在文字区红字提示。
key=value,每行一条:
title=崇祯模拟器 # 浏览器标签标题
start=1 # 起始幕的数字 ID
typeSpeed=40 # 打字速度(毫秒/字),可选,默认 40
每一幕一个文件夹,文件夹名是数字(1, 2, 42 …,不要求连续)。
框架实际读的文件:
| 文件 | 内容 |
|---|---|
bg.<ext> |
背景图。框架依次尝试 bg.png / bg.jpg / bg.webp / bg.jpeg / bg.gif / bg.svg,找到即用。建议 16:9。 |
text.txt |
正文。原样保留换行,末尾空白会被裁掉。 |
choices.txt |
每行一个选项,格式 选项文字 | 下一幕ID。内容为 结局 或文件不存在 = 结局幕。 |
img.txt 是生成器留下的文生图 prompt,框架会忽略。
choices.txt 例:
召汤若望造火器北上抗清 | 2
率禁军突围南下割据 | 43
改装商船出海远走海外 | 77
约束:
next指向的幕 ID 存在即可,跳转关系任意(分支、合流、循环都行)。- 选项文字里出现
|会用 最后一个|做分隔,前面的|保留为文字。
fetch 加载相对路径文件,file:// 会被 CORS 拦截,需要一个静态服务器:
python3 -m http.server 8000
# 浏览器打开 http://localhost:8000/
# 或直接 http://localhost:8000/framework/Node 用户可用 npx http-server -p 8000。
generator/ 是一个 Go 程序,从大纲 outline.txt(树形结构,每行一条根到叶的路径)
出发,串行调 LLM 生成每幕正文,可选串行调生图 API 出背景图。
| 类别 | 引擎 | 环境变量 |
|---|---|---|
| LLM | 美团 LongCat(OpenAI 兼容) | LONGCAT_API_KEY |
| LLM | mimo(本地/自建 CLI) | — |
| LLM | mock(走假数据调流程) | — |
| 生图 | 硅基流动 Kolors(2016×1120 PNG) | KOLORS_API_KEY |
| 生图 | 智谱 CogView-3-Flash(1344×768 JPG) | COGVIEW_API_KEY |
cd generator
go build -o generator .
# 生成正文
export LONGCAT_API_KEY=xxx
./generator -provider longcat
# 生成背景图
export KOLORS_API_KEY=xxx
./generator -provider longcat -image -imgengine kolors常用 flag:
-provider:longcat|mimo|mock-image:图片模式(每幕先让 LLM 写 img.txt,再调生图 API 出 bg)-imgengine:kolors|cogview-max:本次最多处理多少幕-longcat-key:直接传 key(也可用环境变量)
续跑:直接再跑一次即可。已存在 text.txt 的幕会 [跳过],只有缺失的才调 API。
MIT。剧本内容为 LLM 生成,仅供娱乐。
