文字冒险游戏中为文本节点添加图片的实现问题求助

问题定位 #

你的代码主要存在以下几个问题导致图片无法正常切换：

1. 初始图片未加载：游戏启动时只调用了showTextNode(1)，没有触发showImage函数，导致初始图片无法显示。
2. 图片路径错误：textNodes中配置的图片路径是hunter.jpg，但实际图片存放在../img/目录下，路径不匹配导致图片找不到。
3. 语法错误：textNodes数组末尾缺少闭合符号，导致JS代码无法正常执行。
4. 音乐播放逻辑冗余：每次创建选项按钮都会重复播放背景音乐，应该只在游戏启动时触发一次。

修复后的完整代码 #

HTML（保持原结构）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Monsterjægeren</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/script.js" defer></script>
</head>
<body>
    <div class="container">
        <div class="text1" id="text">Text</div>
        <div id="illustration"></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>
        <div class="stat">Health: <strong><span id="healthText">100</span></strong></div>
    </div>
</body>
</html>

CSS（保持原样式）

*, *::before, *::after {
    box-sizing: border-box;
    font-family: ;
}

body {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-color: black;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    font-family: WitcherFont;
}

div#illustration {
    box-sizing: content-box;
    margin: 20px auto;
    padding: 10px;
    max-width: 900px;
    width: 90%;
    min-height: 300px;
    background: url(../img/hunter2.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.container {
    width: 850px;
    height: 600px;
    max-width: 100%;
    background-color: lightgrey;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px 2px;
    color: lightgrey;
    opacity: .9;
}

.btn-grid {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.btn {
    background-color: white;
    border-radius: 5px;
    border-color: lightgrey;
    padding: 5px 10px;
    outline: none;
    font-size: 14px;
    color: black;
}

.btn:hover {
    border-color: grey;
}

.text1 {
    text-align: center;
    font-size: 20px;
    color: black;
}
@font-face {
    font-family: WitcherFont;
    src: url(../font/PTC55F.ttf);
}

.stat {
    color: red;
    font-size: medium;
}

JS（修复后的代码）

const textElement = document.getElementById('text')
const optionButtonsElement = document.getElementById('option-buttons')
const image = document.getElementById('illustration');
const backgroundMusic = new Audio('./sound/darkambience.mp3')

let state = {} 

function startGame() {
    state = {} 
    showTextNode(1)
    showImage(1) // 启动时加载初始图片
    // 仅在启动时播放背景音乐
    backgroundMusic.play()
    backgroundMusic.volume = 0.5
    backgroundMusic.loop = true
}

function showTextNode(textNodeIndex) {
    const textNode = textNodes.find(textNode => textNode.id === textNodeIndex)
    textElement.innerText = textNode.text
    while (optionButtonsElement.firstChild) {
        optionButtonsElement.removeChild(optionButtonsElement.firstChild)
    }

    textNode.options.forEach(option => {
        if (showOption(option)) {
           const button = document.createElement('button')
           button.innerText = option.text
           button.classList.add('btn')
           button.addEventListener('click', () => selectOption(option))
           optionButtonsElement.appendChild(button)
        }
    })
}

function showOption(option) {
    return true
}

function showImage(textNodeIndex) {
    const textNode = textNodes.find(textNode => textNode.id === textNodeIndex)
    // 修复图片路径，匹配实际文件位置
    image.style.backgroundImage = `url(../img/${textNode.img})`
}


function selectOption(option) {
    const nextTextNodeId = option.nextText
    if (nextTextNodeId <= 0) { 
        return startGame()
    }
    state = Object.assign(state, option.setState)
    showTextNode(nextTextNodeId)
    showImage(nextTextNodeId)
}

// 补全数组闭合符号，修复语法错误
const textNodes = [
    {
        id:1,
        img:'hunter.jpg',
        text: 'Monsterjægeren',
        options: [
            {
                text: 'Start',
                nextText: 4
            },
            {
                text: 'Intro til historien',
                nextText: 3
            },
            {
                text: 'Hjælp',
                nextText: 2
            }
        ]
    },
    {
        id: 2,
        img:'hunter2.jpg',
        text: 'Spillet spilles ved hjælp af musen, som trækkes hen over den svarmulighed, du vil gå med. Tryk derefter “venstre museklik" for at gå med den svarmulighed. Alle dine beslutninger får konsekvenser i historien. Bemærk: Spillet kan ikke gemmes af hensyn til exploits. ',
        options: [
            {
                text: 'Tilbage',
                nextText: 1
            }
        ]
    }
]

startGame()

修复说明 #

1. 在startGame函数中添加showImage(1)，确保游戏启动时加载初始图片。
2. 修改showImage函数中的图片路径，加上../img/前缀，匹配实际文件位置。
3. 补全textNodes数组的闭合符号，修复JS语法错误。
4. 将背景音乐的播放逻辑移到startGame中，避免重复触发。

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