实战：创作你的第一个冒险故事

现在，你已经掌握了场景、对话、选项、动作和结局等所有基础积木。让我们动手将它们拼装成一个真正可玩的故事。

我们将创作一个微型文字冒险游戏，它拥有以下几个情节节点：

1. 在阁楼中醒来：主角发现自己躺在一间陌生的阁楼里，身边只有一本破旧日记。
2. 阅读日记：日记中记载了关于这栋房子的一段秘密往事，并给出了两条截然不同的出路暗示。
3. 做出选择：玩家必须决定是“爬出窗户”还是“推开阁楼的门”。
4. 两种结局：不同的选择会导向截然不同的结局。

接下来，我们一步步来实现它。

第一步：确保 App.vue 已就绪

在开始编写故事之前，请先确认 src/App.vue 文件中已经包含了 <AShell> 组件。<AShell> 是游戏运行的核心容器——它负责渲染游戏界面（标题栏、状态栏、对话区域等），所有故事内容都必须在这个容器内才能正常工作。

你的 src/App.vue 应该看起来像这样：

<template>
    <AShell>
        <!-- 你的游戏内容将会在这里 -->
    </AShell>
</template>

<script setup lang="ts">
import { AShell } from '@advmaker/core';
</script>

如果你是从项目模板开始的，这个文件已经为你准备好了。在接下来的步骤中，我们不会直接编辑 App.vue，而是将故事写在独立的 .ts 文件中，通过 API 注册到游戏引擎——这两种方式可以共存。

第二步：编写游戏配置

打开 src/game.config.ts，将其内容替换为以下代码：

export default Adv.defineConfig({
    mainScene: 'attic',
    gameName: '阁楼迷踪',
});

这里我们将入口指向了 'attic' 场景，并把游戏名定为“阁楼迷踪”。

第三步：编写场景

在 src 文件夹中新建 scene.ts，并写入：

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/dialog.ts，这里将写上所有的对话和分支逻辑。

// 发现日记的对话
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.ending('你带着钥匙与谜团离开了老宅，但你知道，一切才刚开始...'),
});

// 选择“爬出窗户”的结局
Adv.appendDialog('garden-end', {
    script: [
        '你小心翼翼地翻出窗户，抓住了窗外那棵大树的粗壮枝干。',
        '粗糙的树皮蹭破了你的手掌，但你还是成功滑到了地面。',
        '你回头望了一眼那栋房子，它静静地矗立在暮色里，仿佛什么都没发生过。',
        '你转身走入花园小径，不久便来到了大街上。',
    ],
    next: Adv.ending('你安全地离开了房子，但关于阁楼的谜团，或许将永远埋藏在时光里。'),
});

第五步：检查文件结构

确保你的 src 文件夹下包含这些文件：

src/
├── main.ts        # Vue 应用入口（模板自带，无需修改）
├── App.vue        # 根组件，包含 <AShell> 容器（模板自带，无需修改）
├── game.config.ts # 游戏配置
├── scene.ts       # 场景定义
└── dialog.ts      # 对话与分支逻辑

第六步：运行游戏

确保开发服务器正在运行（npm run dev），刷新浏览器。现在你应该能体验到：

• 游戏标题显示为“阁楼迷踪”。
• 屏幕中央逐句展示阁楼和日记的内容，玩家需要点击屏幕继续。
• 台词播放完毕后，下方弹出两个选项：“爬出窗户”或“推开阁楼的门”。
• 根据选择，你将看到不同的后续剧情，并最终看到结尾画面和重新开始按钮。

---

给你自己一个掌声！ 你刚刚已经使用 ADVMaker 完整地创作并运行了第一个互动故事。从这个简单的模版出发，你可以无限制地增加场景、对话和选项，让故事变得越来越庞大、越来越精彩。

下一步：扩展你的世界

你现在已经掌握了创造世界的所有基础工具。为了让你的故事更有深度和变化，你可以尝试以下方向：

• 添加更多场景：比如“地下室”、“书房”、“密室”，用场景的切换模拟移动。
• 利用 visible 实现条件选项：例如，只有当你从走廊里拿到了“古老钥匙”，才能打开后花园的“铁门”。
• 尝试使用 HTML 和 Vue 组件：让你的文本拥有颜色、大小，甚至嵌入小型交互零件。

学习更多？

• 探索检定系统（后续文档将详细介绍）：为关键行为加入随机性判定，让游戏更具挑战性。