JS Text-Adventure Spiel

[Sempervivum]

Ich hatte angenommen, dass Du das img-Element dynamisch anlegen musst, aber wie ich sehe ist das gar nicht erforderlich:
Im HTML das img-Tag einfügen:

        <div class="container">
            <img id="image">
            <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>

und im Javascript das src-Attribut zuweisen:

// zunaechst das Element fuer das Bild bereit stellen:
const imgElement = document.getElementById ('image');
const textElement = document.getElementById('text')
const optionButtonsElement = document.getElementById('option-buttons')

// und dann weiter unten das src-Attribut zuweisen:
function showTextNode(textNodeIndex) {
  const textNode = textNodes.find(textNode => textNode.id === textNodeIndex)
  textElement.innerText = textNode.text
  imgElement.src = textNode.image; // <-- hier
  while (optionButtonsElement.firstChild) {
    optionButtonsElement.removeChild(optionButtonsElement.firstChild)
  }

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

 

[Benkho]

Das Funktioniert wunderbar. Vielen vielen Dank für deine mega schnelle Hilfe.

 

[Benkho]

Guten Abend,

eine Frage habe ich noch. Wie kann ich in der folgenden Stelle ein weiteres kleines Minigame starten? Dabei muss berücksichtigt werden können, wenn das Game gewonnen wurde kommt man weiter und wenn nicht kommt man direkt wieder zum Anfang.

{
        text: 'Ja',
        nextText: 2
      },

 

[Sempervivum]

Das würde ich so lösen: Du hast ja diese Struktur

let textNodes = [
  { // usw.

die die gesamten Daten des Spiels enthält. Lege für jedes Spiel eine eigene Struktur an, z. B. textNodes1 und textNode2 und weise die der allgemeinen Variablen textNodes zu, also vor dem Beginn des ersten Spiels:

let textNodes = textNodes1;
startGame()

und dann wenn das nächste Spiel gestartet werden soll ebenso:

let textNodes = testNodes2;
startGame()

Damit das ganze auch mit noch mehr Spielen funktioniert, schlage ich vor, die Referenz des nächsten Spiels jeweils in die Datenstruktur einzutragen, etwa so:

    id: 10,
    text: 'Sie haben dieses Spiel gewonnen! Möchten Sie es noch einmal spielen oder mit dem nächsten beginnen?',
    options: [
      {
        text: 'Neustart',
        nextText: -1,
        nextGame: textNodes1
      },
      {
        text: 'Nächstes Spiel',
        nextText: -1
        nextGame: textNodes2
      }
    ]
  }
]

ungefähr so.