创作2：用 AI 做互动故事

先确定作品要解决什么

把故事看成有向图：场景是节点，选择是边。渲染函数只负责把当前节点显示出来。内容越多，越容易拼错目标 id 或留下永远到不了的结局，因此需要对数据做检查。

给 AI 的任务卡

把主题和内容换成自己的版本，先检查助手复述的需求再生成代码。使用家长或学校允许的编程工具；本站提供的代码是预写参考，没有调用实时 AI。记录实际借助了什么帮助。

请做单文件 HTML 分支故事，用 scenes 对象管理节点，节点含 title、text、choices。每个 choice 有文字与目标 id。渲染时清空旧按钮。保留重新开始，加入返回上一步和路径记录；返回不能复制历史。检查所有目标存在，并找出从 start 不可到达的节点。先给数据结构与测试表，再实现。

从可运行的起点开始

下方是完整参考代码，也已放入练习草稿。点击“导出当前草稿”，再在预览中点击“下载文件”；把下载的文件重命名为 story.html，保留 .html 后缀，在电脑浏览器中打开。先验证原版，再另存自己的版本。代码在本地运行，不会训练或调用 GuppyLM。

<!doctype html>
<html lang="zh-CN">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>小鱼的海底选择</title>
<style>
*{box-sizing:border-box}body{font:18px/1.7 system-ui;margin:24px auto;padding:0 20px;max-width:720px;color:#183b36;background:#f7faf9}
h1{font-size:28px}h2{font-size:22px}button,input{font:inherit}button,a{touch-action:manipulation}button{padding:10px 16px;margin:4px;border:1px solid #287b68;border-radius:6px;background:white;color:#183b36;cursor:pointer}button:disabled{opacity:.5;cursor:default}a{color:#1468a0}label{display:block;padding:6px 0}section{border-top:1px solid #bfcfc8;padding:16px 0}p,li{overflow-wrap:anywhere}img{max-width:100%}:focus-visible{outline:3px solid #cc7600;outline-offset:3px}
</style>
<h1>小鱼的海底选择</h1>
<p>虚构故事</p><section><h2 id="scene-title"></h2><p id="scene-text"></p><div id="choices"></div></section>
<button id="restart">回到故事开头</button>
<script>
const scenes = {
  start:{title:'出发',text:'小鱼想为海底图书角找一个安静的位置。它先去哪里？',choices:[['观察海草区','garden'],['观察礁石区','reef']]},
  garden:{title:'海草旁的图书角',text:'这里水流平缓。小鱼邀请伙伴一起整理书架，完成了计划。',choices:[]},
  reef:{title:'礁石边',text:'这里很热闹。怎样让图书角更安静？',choices:[['与伙伴商量安静时段','quiet'],['换到海草区','garden']]},
  quiet:{title:'一起商量',text:'伙伴们约好阅读时段，小鱼把计划画在公告板上。',choices:[]}
};
function show(id) {
  const scene = scenes[id];
  if (!scene) { document.getElementById('scene-text').textContent = '这一页还没写好，请回到开头。'; document.getElementById('choices').replaceChildren(); return; }
  document.getElementById('scene-title').textContent = scene.title;
  document.getElementById('scene-text').textContent = scene.text;
  const choices = document.getElementById('choices');
  choices.replaceChildren();
  for (const [label,target] of scene.choices) {
    const button = document.createElement('button');
    button.textContent = label;
    button.onclick = () => show(target);
    choices.append(button);
  }
}
document.getElementById('restart').onclick = () => show('start');
show('start');
</script>
</html>

做一次有理由的修改

在参考实现上加入 history 数组，规定前进、后退、重启各自怎样更新它；再加入目标检查。用虚构文本试一次无效 id，给用户可恢复的提示，不要让整页崩溃。

用实际操作验收

覆盖每条分支、连续后退、开头后退、结尾重启、无效目标、不可达节点与循环路线。可达性检查使用 visited 集合，遇到循环也应结束；静态检查通过仍需实际走读故事。