如何在JavaScript实现的文字冒险游戏文本元素中插入图片

第一步：修正HTML图片标签 #

你之前用的<image>是非标准标签，换成标准<img>并添加id方便控制：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="OP1.0c.css" rel="stylesheet">
    <script defer src="OP1.0j.js"></script>
    <title>Text Adventure</title>
    <style>
        /* 新增样式，默认隐藏图片，需要显示时再打开 */
        #story-image {
            display: none;
            max-width: 100%;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="story"></div>
        <!-- 把图片移到文本容器里，和文本同步展示，也可以保留原来的位置 -->
        <img id="story-image" alt="剧情图片">
    </div>
    <div id="option-buttons" class="btn-grid">
        <button class="btn">Option 1</button>
        <button class="btn">Option 2</button>
        <button class="btn">Option 3</button>
        <button class="btn">Option 4</button>
    </div>
</body>
</html>

第二步：调整textNodes数据结构 #

不需要用数组存图片，直接在每个文本节点下加可选的imageUrl字段即可：

const textNodes = [
    {
        id: 1,
        text: "I did it all for you.",
        // 有需要展示的图片就填url，不需要就不写这个字段
        imageUrl: "https://images.unsplash.com/photo-1544526226-d4568090ffb8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aGQlMjBpbWFnZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80",
        options: [
            {
                text: '>>',
                nextText: 2,
            }
        ]
    },
    {
        id: 2,
        text: "这段剧情没有配图，图片会自动隐藏",
        options: [
            {
                text: '返回开头',
                nextText: 1,
            }
        ]
    }
]

第三步：修改JS的节点切换逻辑 #

在你原来负责切换文本的showTextNode函数里，新增图片控制的代码：

// 先提前拿到图片DOM元素
const storyImageElement = document.getElementById('story-image')
const textElement = document.getElementById('story')
const optionButtonsElement = document.getElementById('option-buttons')

function showTextNode(textNodeId) {
    const textNode = textNodes.find(node => node.id === textNodeId)
    textElement.innerText = textNode.text
    
    // 新增图片处理逻辑
    if (textNode.imageUrl) {
        storyImageElement.src = textNode.imageUrl
        storyImageElement.style.display = 'block'
    } else {
        storyImageElement.style.display = 'none'
    }

    // 下面是你原来处理选项按钮的逻辑，不用改
    while (optionButtonsElement.firstChild) {
        optionButtonsElement.removeChild(optionButtonsElement.firstChild)
    }
    textNode.options.forEach(option => {
        const button = document.createElement('button')
        button.innerText = option.text
        button.classList.add('btn')
        button.addEventListener('click', () => showTextNode(option.nextText))
        optionButtonsElement.appendChild(button)
    })
}

// 页面加载完成后初始化调用
document.addEventListener('DOMContentLoaded', () => {
    showTextNode(1)
})

按照上面三步修改完就能实现图片随文本、按钮同步切换显示/隐藏的效果。

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