一、构思:先找到那个"必须做下去"的核心
主角追了一路的"王国崩塌的元凶",最后发现钥匙就是他自己。
Demo:
https://game.mickeyai.top/game/plague-demo/plague-trace.html
- "愧疚与救赎"用什么机制表达? → 对话选项带善恶值,队友价值观冲突需要玩家站队。
- "失忆"怎么玩? → 碎片化叙事:环境叙事 + NPC 口述 + 记忆闪回,真相分层解锁。
- "瘟疫废土"的压迫感怎么落地? → 环境本身即敌人:腐瘴区域持续掉血、地图失效、只能凭记忆导航。
二、落地:跑起来的 Demo
技术选型上我们做了最保守也最务实的决定:纯前端单文件(HTML + CSS + JavaScript),零依赖、零构建、双击即玩。Demo 直接部署在了网站,任何浏览器打开就能体验。
核心战斗循环的几个关键实现片段:
- 行动条填充与插队判定
// 每帧推进所有存活单位的行动条
function tick(delta) {
for (const unit of units) {
if (!unit.alive) continue;
unit.gauge += unit.speed * delta;
if (unit.gauge >= 150 && unit.burstSlots > 0) {
unit.canInsert = true; // 即时行动可用
}
if (unit.gauge >= 100 && !unit.acted) {
takeTurn(unit);
}
}
}
function insertAction(unit) {
unit.gauge -= 10; // 插队消耗
unit.burstSlots--;
doAttack(unit, pickTarget(unit));
}
- QTE 判定(以空格键为例)
function startQTE(windowMs = 800) {
const start = performance.now();
hud.showQTE(windowMs);
return new Promise(resolve => {
const onKey = (e) => {
if (e.code !== 'Space') return;
const elapsed = performance.now() - start;
document.removeEventListener('keydown', onKey);
if (elapsed <= 300) resolve('perfect'); // 完美闪避
else if (elapsed <= windowMs) resolve('good');
else resolve('fail');
};
document.addEventListener('keydown', onKey);
setTimeout(() => { // 超时算失败
document.removeEventListener('keydown', onKey);
resolve('fail');
}, windowMs);
});
}
整个 Demo 包括:场景环境,人物造型,对话界面等。所有 UI 走黑金暗色中世纪风格,与设定集的美术基调一致。
三、美术:用提示词工业化生产设定集

这个项目的特殊之处在于:设定集本身也是一件美术资产。全站几十张场景、角色、怪物、物品图,全部由 AI 生成,靠一套固定的提示词模板保证风格统一:
Medieval Nordic style, realistic scene, photorealistic 3D, highly detailed, 8K, cinematic lighting, [主体描述], dark fantasy, unreal engine 5, octane render, masterpiece
前半段是"风格锁",永远不变;后半段是"主体描述",每张图只改这一段。这样做的好处是:任何人拿着这份设定集,都能批量生成同风格的新图,美术资产可以无限扩展。
四、现状与下一步
目前项目处于"设定集 v1.0 + 可玩 Demo"阶段。Demo 验证了核心战斗循环(行动条、插队、QTE)的手感,下一步计划:
- 接入善恶值与多结局分支;
- 加入探索层(腐瘴浓度地图 + 安全区经营);
- 把 Demo 的回合逻辑抽出来,为正式版的存档系统做准备。
回顾整个过程,最大的心得是:设定集、代码、美术三者必须同源。很多项目里策划文档写着一套、代码实现另一套、美术画的又是第三套,最后散架。而让三者咬合的钩子,就是那个最初定下的核心情感 —— "一个失忆的父亲,发现自己才是灾难的钥匙"。