4.6 KiB
崩坏童话:蜜糖村
一个看起来百分之百治愈的像素童话村庄,实际是一场情绪疗程的沉浸幻境。 纯单机网页游戏:无存档、无后端、无 localStorage、无外部网络请求,浏览器打开即玩。 完整流程约 25–35 分钟,含 4 个结局。
启动方式
npm install
npm run dev # 开发模式(Vite,默认 http://localhost:5173)
npm run build # 类型检查 + 产出纯静态 dist/
npm run preview # 本地游玩 dist/ 构建产物
技术栈:Phaser 3 + TypeScript + Vite。逻辑分辨率 320×180,任意窗口尺寸整数倍放大居中,pixelArt 关闭纹理平滑。
按键
| 按键 | 功能 |
|---|---|
| WASD / 方向键 | 四向移动 |
| E(或回车) | 交互 / 推进对话 / 确认选项 |
| W/S 或 ↑/↓ | 对话中切换选项 |
`(反引号) |
开关 Debug 面板 |
标题画面输入名字后回车开始(留空默认「小满」)。
Debug 面板(服务验收)
按反引号 ` 开关,默认关闭、无 UI 痕迹,不影响正常游玩。功能:
- 直接设置幸福值(0–100,观察侵蚀矩阵五档:10/40/70/90/100)与觉知值
- 跳转当前日(1–7,回到当日清晨小屋)
- 传送到全部 11 张地图(10 个场景,白色层含走廊+病房两张图)
- 置齐全部线索(C1–C9)
- 强制触发四个结局(E1 糖衣 / E2 回收 / E3 苏醒 / E4 静默)
素材制作流程(全部本项目内自制,无任何外部资产)
像素美术(Aseprite)
全部图片由 tools/gen_art.lua 在 Aseprite 内逐像素绘制生成——瓦片集(80 枚 16×16:草地/石板路/湖水/花丛/莓果丛/树/房屋墙顶门/室内地板/家具/井/雾/白色层墙地等)、主角(16×24,四朝向 × 4 帧行走,首帧兼待机)、对话头像(微笑 + E3 专用「真实的脸」)、7 组具名 NPC 立绘(各 smile/flat/off/blink 四档,off 档与 smile 仅差 1 像素——右眼低 1 像素)、双子鸟 2 帧张嘴动画、群演 ×5 各 2 帧循环、灰麻雀、向日葵表盘 14 帧。
# 重新生成全部素材(PNG → public/assets/,Aseprite 源文件 → art/)
aseprite -b --script tools/gen_art.lua
# macOS 应用包路径:/Applications/Aseprite.app/Contents/MacOS/aseprite
色板:村庄用糖果色(草绿/奶油黄/蜜糖橙/天空蓝),白色层独立灰白色板;无抗锯齿、无描边渐变。
地图(Tiled)
10 个场景 11 张地图由 tools/gen_maps.mjs 生成 Tiled .tmx 源文件(maps/,统一 ground / obstacles(collides=true)/ objects(spawn、NPC 点位、door、交互点)三层结构),再经 Tiled 命令行导出 JSON:
node tools/gen_maps.mjs
for f in maps/*.tmx; do
tiled --export-map --embed-tilesets "$f" "public/assets/maps/$(basename "$f" .tmx).json"
done
# macOS 应用包路径:/Applications/Tiled.app/Contents/MacOS/Tiled
场景清单:小满小屋 12×8、村广场 30×20(枢纽)、面包房 15×10、杂货店 15×10、诊所 12×8、湖畔 24×16、花田 20×14、古井空地 14×10、雾墙边界 20×8、白色层(走廊 20×6 + 病房 10×8)。所有室外场景经村广场互通,门与出入口成对。
音频
无任何音频文件。BGM 为 Web Audio 程序合成的 8 小节 8-bit 治愈循环(方波主旋律 + 三角波低音 + 独立鸟鸣声部),音效仅 4 个(对话哔哔、任务完成叮、黄昏钟声、心电监护滴声),全部程序合成,见 src/core/audio.ts。playbackRate / 低通滤波 / 鸟鸣静音由侵蚀矩阵(CorruptionDirector)统一驱动。
自动化验收(可选)
npm i -D playwright && npx playwright install chromium
node tools/e2e.mjs # 标题→Day1、侵蚀五档截图、全场景传送、四结局强制触发、控制台零报错
node tools/e2e_flow.mjs # 七日全流程:15 任务、9 线索、黄昏/梦境/脚本雨、E3 苏醒线
node tools/e2e_mech.mjs # 悲伤行为 5 项、强制欢乐庆典与逃离计数、S4 文本腐蚀、四结局判定
代码结构
src/core/director.ts CorruptionDirector:幸福/觉知/日期/任务/线索/侵蚀阶段的唯一真源
src/core/textcorrupt.ts 文本腐蚀(10 组同音错字对照表,渲染层替换,优先命中咪咪)
src/core/audio.ts Web Audio BGM/SFX 合成与矩阵联动
src/core/debug.ts Debug 面板
src/data/story.ts 全部台词(阿福公告 D1–D7 逐字、龟爷爷 C9 三段链、结局文案等)
src/scenes/ Boot / Title / 11 张地图各一个 Scene / 常驻 UI / Dream / Ending