实战:创作你的第一个冒险故事
现在,你已经掌握了场景、对话、选项、动作和结局等所有基础积木。让我们动手将它们拼装成一个真正可玩的故事。
我们将创作一个微型文字冒险游戏,它拥有以下几个情节节点:
- 在阁楼中醒来:主角发现自己躺在一间陌生的阁楼里,身边只有一本破旧日记。
- 阅读日记:日记中记载了关于这栋房子的一段秘密往事,并给出了两条截然不同的出路暗示。
- 做出选择:玩家必须决定是“爬出窗户”还是“推开阁楼的门”。
- 两种结局:不同的选择会导向截然不同的结局。
接下来,我们一步步来实现它。
第一步:编写游戏配置
打开 src/script/game.config.ts,将其内容替换为以下代码:
typescript
export default Adv.defineConfig({
mainScene: 'attic',
gameName: '阁楼迷踪'
});这里我们将入口指向了 'attic' 场景,并把游戏名定为“阁楼迷踪”。
第二步:编写场景
在 src/script 文件夹中新建 scene.ts,并写入:
typescript
Adv.appendScene('attic', {
name: '阁楼',
next: 'diary-dialog',
onEnter: () => {
console.log('主角在阁楼中醒来……');
}
});
Adv.appendScene('corridor', {
name: '幽暗走廊',
next: 'corridor-dialog',
});
Adv.appendScene('garden', {
name: '后花园',
next: 'garden-end',
});- 我们定义了三个场景:阁楼、幽暗走廊 和 后花园。
attic场景在进入时会在控制台输出一条日志,然后立刻触发diary-dialog对话。
第三步:编写对话与选项
新建 src/script/dialog.ts,这里将写上所有的对话和分支逻辑。
typescript
// 发现日记的对话
Adv.appendDialog('diary-dialog', {
script: [
'你揉了揉眼睛,发现自己正置身于一间布满灰尘的阁楼。',
'阳光从屋顶的裂缝中挤进来,照亮了地板上的一本旧日记。',
'你犹豫了一下,还是拾起日记,轻轻翻开。',
'日记的笔迹已经泛黄,但依然清晰可辨:<br><i>"房子建于1873年,原本属于一位古怪的发明家。传言他在此进行了许多危险的实验,最终不知所踪。这栋房子也因此被废弃。"</i>',
'你又往后翻了几页,上面写道:<br><i>"若想离开,阁楼的窗户通向屋外的巨大树冠,相对安全;但若想解开秘密,不妨走进那扇通往走廊的大门。"</i>',
'合上日记,你陷入了沉思……'
],
next: [
{
content: '爬出窗户,沿着树干滑下',
next: 'garden-end',
maxTimes: 1,
},
{
content: '推开阁楼的门,走进走廊',
next: 'corridor-dialog',
maxTimes: 1,
},
],
onStart: () => {
// 对话开始前,可以在控制台显示一点提示
console.log('玩家发现了日记');
}
});
// 选择“走进走廊”后的对话
Adv.appendDialog('corridor-dialog', {
script: [
'木门发出咯吱的声响,你走进了一条幽暗的走廊。',
'墙壁上挂着早已褪色的油画,画中人物的目光仿佛在跟随你移动。',
'走廊尽头有一扇铁门,上面刻着一行字:"踏入者,勿忘初心。"',
'你伸手推开门,一道刺眼的白光瞬间将你吞没……',
'当你再次睁开眼时,发现自己已经站在了街角,身后是那栋破败的老宅。',
'你摸了摸口袋,发现里面多了一把样式古老的钥匙。',
'也许有一天,你还会再回来探寻这栋房子的全部秘密。'
],
next: Adv.end("你带着钥匙与谜团离开了老宅,但你知道,一切才刚开始...")
});
// 选择“爬出窗户”的结局
Adv.appendDialog('garden-end', {
script: [
'你小心翼翼地翻出窗户,抓住了窗外那棵大树的粗壮枝干。',
'粗糙的树皮蹭破了你的手掌,但你还是成功滑到了地面。',
'你回头望了一眼那栋房子,它静静地矗立在暮色里,仿佛什么都没发生过。',
'你转身走入花园小径,不久便来到了大街上。'
],
next: Adv.end("你安全地离开了房子,但关于阁楼的谜团,或许将永远埋藏在时光里。")
});第四步:检查文件结构
确保你的 src/script 文件夹下包含以下三个文件:
src/script/
├── game.config.ts
├── scene.ts
└── dialog.ts第五步:运行游戏
确保开发服务器正在运行(npm run dev),刷新浏览器。现在你应该能体验到:
- 游戏标题显示为“阁楼迷踪”。
- 屏幕中央逐句展示阁楼和日记的内容,玩家需要点击屏幕继续。
- 台词播放完毕后,下方弹出两个选项:“爬出窗户”或“推开阁楼的门”。
- 根据选择,你将看到不同的后续剧情,并最终看到结尾画面和重新开始按钮。
给你自己一个掌声! 你刚刚已经使用 ADVMaker 完整地创作并运行了第一个互动故事。从这个简单的模版出发,你可以无限制地增加场景、对话和选项,让故事变得越来越庞大、越来越精彩。
下一步:扩展你的世界
你现在已经掌握了创造世界的所有基础工具。为了让你的故事更有深度和变化,你可以尝试以下方向:
- 添加更多场景:比如“地下室”、“书房”、“密室”,用场景的切换模拟移动。
- 利用
visible实现条件选项:例如,只有当你从走廊里拿到了“古老钥匙”,才能打开后花园的“铁门”。 - 尝试使用 HTML 和 Vue 组件:让你的文本拥有颜色、大小,甚至嵌入小型交互零件。
学习更多?
- 探索检定系统(后续文档将详细介绍):为关键行为加入随机性判定,让游戏更具挑战性。