如何在HTML文本冒险游戏中插入图片、选择选项后更新页面内容

1 实现玩家选选项后追加新文本 #

你现有代码的逻辑是每次选完选项会清空所有内容再替换新内容，要实现追加文本只需要修改两个函数即可：

修改clearPage函数 #

仅清空选项内容，保留之前的故事文本：

function clearPage() {
  // 移除清空Story的逻辑，只清空选项
  Choice1Here.innerHTML = '';
  Choice2Here.innerHTML = '';
}

修改postPage函数 #

故事内容采用追加而非替换的方式写入，可自行添加换行、分隔线区分不同段落：

function postPage() {
  // += 表示在原有内容后追加新内容，<br><br>用来和之前的内容做间隔
  StoryHere.innerHTML += `<br><br>${MyStory[BookMark]}`;
  Choice1Here.innerHTML = MyStory[BookMark + 1];
  Choice2Here.innerHTML = MyStory[BookMark + 2];
}

2 实现游戏内插入图片 #

不需要用CSS实现，你当前用innerHTML渲染内容的逻辑可以直接解析HTML标签，直接在MyStory数组的对应章节内容里插入<img>标签即可：

示例：修改存储故事内容的story_book.js #

// 章节内容里可以直接写img标签，alt填图片对应的场景说明
var MyStory = [
  '<img src="forest.jpg" alt="幽暗森林"><br>你在一片幽暗的森林中醒来，手边有一个打火石，前方延伸出两条小路',
  '走左侧被杂草覆盖的小路',
  '走右侧铺着碎石的小路',
  // 后续章节示例
  '<img src="cabin.jpg" alt="林中木屋"><br>你沿着杂草路走了十分钟，看到林间立着一座亮着暖光的小木屋',
  '上前敲门',
  '绕到木屋后面查看'
];

// Page数组按你原有跳转逻辑填写即可，每个章节对应3个元素（内容+选项1+选项2）
const Page = [0, 1, 2];

可选：统一设置图片样式 #

可以在你的style.css文件里添加规则，全局控制故事里的图片样式，不需要每个img标签单独写样式：

#Story img {
  max-width: 100%;
  height: auto;
  margin: 12px 0;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

注意事项 #

• 图片路径要和你的项目文件结构匹配，如果你把图片统一存在项目的images文件夹下，src属性要写images/forest.jpg
• 现有script引入顺序是正确的（先引入故事内容文件，再引入逻辑文件），不要调换顺序，否则会出现变量未定义的报错

内容的提问来源于stack exchange，提问作者B00