# 崩坏童话:蜜糖村(网页版) 一个看起来百分之百治愈的像素童话村庄,实际是一场情绪疗程的沉浸幻境。 纯单机网页游戏:无存档、无后端、无 localStorage,浏览器打开即玩。完整流程约 25–35 分钟,含 4 个结局(E1 糖衣 / E2 回收 / E3 苏醒 / E4 静默)。 ## 启动方式 ```bash npm install # 安装依赖(phaser / vite / typescript) npm run build # 产出纯静态 dist/ npm run preview # 本地游玩 → http://127.0.0.1:4815/ ``` 开发模式可用 `npm run dev`(热更新)。构建产物为纯静态文件,无外部网络请求、无外部音频/字体文件。 ## 按键 | 按键 | 功能 | |---|---| | WASD / 方向键 | 移动(96 像素/秒,四向动画) | | E | 交互 / 推进对话(靠近对象 ≤24 像素出现「按 E」提示) | | ↑ / ↓ + E 或 1 / 2 / 3 | 对话选项(温柔 / 迟疑 / 否定) | | `` ` ``(反引号) | Debug 面板开关 | ## Debug 面板(PRD §13) 默认关闭、无 UI 痕迹,不影响正常游玩。按反引号键 `` ` `` 开关,功能: - 直接设置幸福值(0–100)、觉知值(0–100)、当前日(1–7) - 传送到任意场景(10 选) - 置齐全部线索(9 处) - 强制触发四个结局之一(E1–E4) ## 玩法提示(无剧透) 每天早上看广场公告板接「今日幸福任务」,完成后黄昏钟声响起,回小屋睡觉进入次日。幸福值由左上角向日葵表盘显示(12 瓣,无数字)。村里的规则是「必须幸福」——但通往真相的路,恰恰是那些系统禁止的悲伤。古井与雾墙从第 5 天起可以靠近。 ## 素材与地图制作流程(全部原创,无现成素材) 所有像素素材与地图均为本项目内程序化自制,未使用任何素材包或开源 tileset。生成脚本全部保留在仓库内,可一键复现。 ### 像素素材(Aseprite 1.3,`tools/aseprite/`) - 脚本:`gen_all.lua` 总编排,dofile 组织 `helpers.lua`(糖果色板/白色层灰板 + 像素原语)、`gen_tileset.lua`、`gen_player.lua`、`gen_npcs.lua`、`gen_extras.lua`、`gen_portraits.lua`。 - 复现命令: ```bash /Applications/Aseprite.app/Contents/MacOS/aseprite -b --script tools/aseprite/gen_all.lua ``` - 产出(`public/assets/`): - `tileset.png` 256×128:16×16 瓦片 ×128(草地/石路/湖水/花丛/莓果丛/树/房屋/室内家具/井/雾/白色层,瓦片 id 表见 `CONTRACT.md` §2) - `sprites/player.png` 64×96:16×24/帧,4 朝向 × 4 帧行走,第 0 帧兼待机 - `sprites/npc_*.png`:7 组具名 NPC 各 3 档表情(smile/flat/off,off 与 smile 仅差 1–2 像素)+ 双子鸟 2 帧张嘴 + 群演 ×5 各 2 帧循环 - `portraits/*.png`:主角微笑头像、E3 专用「真实的脸」头像、7 张 NPC 头像,各 32×32 ### 地图(Tiled 1.12,`tools/tiled/`) - 脚本:`genmaps.js`(Tiled 脚本运行时 `Tiled -e` 执行,TextFile 写出 .tmx),再用 Tiled CLI 导出 JSON。 - 复现命令: ```bash /Applications/Tiled.app/Contents/MacOS/Tiled -e tools/tiled/genmaps.js for m in house plaza bakery shop clinic lake field well fog white; do /Applications/Tiled.app/Contents/MacOS/Tiled --export-map --embed-tilesets \ public/assets/maps/$m.tmx public/assets/maps/$m.json done ``` - 产出(`public/assets/maps/`):10 张地图(小屋 12×8 / 广场 30×20 / 面包房 15×10 / 杂货店 15×10 / 诊所 12×8 / 湖畔 24×16 / 花田 20×14 / 古井 14×10 / 雾墙 20×8 / 白色层 20×14),统一 `ground` / `obstacles`(`collides=true`)/ `objects`(spawn、NPC 点位、door、交互点)三层结构;所有室外场景经村广场互通,门双向成对。 ## 技术架构(PRD §12) - Phaser 3 + TypeScript + Vite;逻辑分辨率 320×180,整数倍放大居中,`pixelArt: true` 禁用纹理平滑。 - 场景:BootScene / TitleScene / 10 个地图 Scene(共用 MapScene 基类)/ 常驻 UIScene(对话框、向日葵表盘、提示)/ DreamScene / EndingScene。 - `CorruptionDirector`:普通 TS 单例 + 事件发射器,持有幸福/觉知/日期/任务标记/线索集合/侵蚀阶段,是全部状态与视听参数的唯一真源;饱和度与晕影用相机 postFX(ColorMatrix / Vignette),负片闪帧用 ColorMatrix negative 单帧切换。 - BGM 与音效全部 Web Audio 程序合成(8 小节 8-bit 循环:方波主旋律 + 三角波低音 + 鸟鸣声部;音效 4 个),playbackRate 与低通由 CorruptionDirector 按 §6.4 矩阵驱动。 - 文本腐蚀在对话渲染层实施(§6.5 十组同音错字,原文案保持干净),优先命中咪咪。 ## 验收 `tools/acceptance.mjs` 为自动化验收脚本(puppeteer-core + 本机 Chrome),覆盖 PRD §14 的 20 条清单(静态逐字校验 + 真实浏览器全流程游玩 + Debug 面板 + 四结局 + 截图): ```bash npm run build && (npm run preview &) && node tools/acceptance.mjs ``` 截图输出在 `tools/shots/`。