对于基于文本的冒险游戏，如何将图像添加到 javascript 中常量中的不同 ID？

Question

我在关注this tutorial to build a text based adventure game. Here整个游戏的代码也是我的

我想为游戏的每个页面添加一张图片。例如，这个：

const textNodes = [
  {
    id: 1,
    text: 'you walk down the road blah blah',
    options: [
      {
        text: 'Take the goo',
        setState: { blueGoo: true },
        nextText: 2
      },
      {
        text: 'Leave the goo',
        nextText: 2
      }
    ]

是一个常量，我想将图像添加到其中。这个：

var imagesDatabase = {
    '1': src="images/bs1.jpg",
    '2': src="images/bs2.jpg",
    '3':src="images/bulb.png"
} 

  var theImageDiv = document.createElement('div');
  theImageDiv.innerHTML = "<img id='the-image-bro' src='" + imagesDatabase[textNodeIndex] + "' height=150 length=500 style='position: fixed; top: 50%'>"
  
  document.getElementById('imagediv').appendChild(theImageDiv);

是评论中有人建议的代码，但它对我不起作用。特别是 innerHTML = 我不知道在那里写什么。我只想在游戏的每一页上添加一张图片。

Answer 1

将图像添加到 textNodes 对象中，您可以从中轻松使用。

Here is my solution for this problem

const textElement = document.getElementById('text');
const image = document.getElementById('illustration');
const optionButtonsElement = document.getElementById('option-buttons');

let state = {};

function startGame() {
  state = {};
  showTextNode(1);
}

const textNodes = [
    {
      id: 1,
      img: 'kezdet.png',
      text: 'Kalandod egy faluban kezdődik. Egy falusi áll elötted. Mit teszel?',
      options: [
        {
          text: 'Odamegyek hozzá',
          nextText: 2
        },
        {
          text: 'Kimegyek a faluból',
          nextText: 3
        }
      ]
    },
    {
      id: 2,
      img: 'beszel.png',
      text: 'A falusi köszön neked: - Jó napot kívánok! Mit teszel?',
      options: [
          {
          text: 'Elfutok',
          //requiredState: (currentState) => currentState.blueGoo,
          //setState: { blueGoo: false, shield: true },
          nextText: 3
        },
        {
          text: 'Köszönöm neki.',
          //requiredState: (currentState) => currentState.blueGoo,
          //setState: { blueGoo: false, sword: true },
          nextText: 4
        }
      ]
    },
  ];
    
    
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 showImage(textNodeIndex) {
    const textNode = textNodes.find(textNode => textNode.id === textNodeIndex);
    image.style.backgroundImage="url(" + textNode.img + ")"; 
}

function showOption(option) {
  return option.requiredState == null || option.requiredState(state);
}

function selectOption(option) {
  const nextTextNodeId = option.nextText;
  if (nextTextNodeId <= 0) {
    return startGame();
  }
  state = Object.assign(state, option.setState);
  console.log('állapot: ' + JSON.stringify(state));
  showTextNode(nextTextNodeId);
  showImage(nextTextNodeId);
}

startGame();

body {
    font-family: sans-serif;
    padding: 0;
    margin: 0;
    background-color: #333;
}

div#title{
    margin-left: auto;
    margin-right: auto;
    min-height: 100px;
    height: 30%;
    width: 90%;
    background: url(logo.png);
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center center;
}

.container {
    margin: 0px auto;
    margin-top: 50px;
    display: block;
    width: 90%;
    max-width: 1000px;
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 10px 2px;
}

div#illustration {
    box-sizing: content-box;
    margin: 20px auto;
    padding: 5px;
    max-width: 800px;
    width: 90%;
    min-height: 300px;
    background: url(kezdet.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

div#text {
    box-sizing: content-box;
    padding: 10px;
    background-color: lightblue;
    border-radius: 5px;
    box-shadow: 1px 2px 5px grey;
    text-align: center;
    font-size: 24px;
    height: 100px;
    margin-bottom: 20px;
}

div#option-buttons {
    border-radius: 5px;
}

.btn-grid {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 10px;
    margin-top: 20px;
}

.btn {
    font-size: 24px;
    background-color: hsl(200, 100%, 50%);
    border: 1px solid hsl(200, 100%, 30%);
    border-radius: 5px;
    padding: 15px 10px;
    color: white;
    outline: none;
    box-shadow: 1px 2px 5px grey;
}

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

<!DOCTYPE html>
<html lang="hu">
<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="styles.css" rel="stylesheet">
  <script defer src="game.js"></script>
  <title>Peti Minecraft kalandja</title>
</head>
<body>
  <div class="container">
        <div id="title"></div>
        <div id="illustration"></div>
        <div id="text">Text</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>
</body>
</html>

对于基于文本的冒险游戏，如何将图像添加到 javascript 中常量中的不同 ID？

How does one add an image to different id's in a constant in javascript for a text based adventure game?

html

javascript

image