'Manipulating Variables in a game based on HTML Radio Buttons

I am building a text adventure game in javascript and constructing it based off the tutorial case documented here: https://www.youtube.com/watch?v=R1S_NhKkvGA with the code being available here: https://github.com/WebDevSimplified/JavaScript-Text-Adventure

This was a great tutorial however for the game I am building there needs to be a series of variables ands arrays for exapmle, defence budget, number of tanks, diplomacy levels etc. which can be manipulated by the players actions and read back out on an analysis screen.

The currernt tutorial code allows you to set states for example having a sword or not, but not mainpulation of variables and arrays.

I have apttempted to set selection of the option to call a function which modifies the variable which is then read back out to the player, however the original value of the variable (50 as opposed to 60) is always read back out.

I will provide the code both html file and javascript file below in addition to comments detailing the things I have attempted!

HTML File 

<!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="styles.css" rel="stylesheet">
  <script defer src="game.js"></script>
  <title>Mr. Variable Simulator</title>
</head>
<body>
  <h1>Mr. Variable Simulator</h1>
  <div class="container">
    <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>
      <button class="btn">Option 5</button>
      <button class="btn">Option 6</button>
      <button class="btn">Option 7</button>
      <button class="btn">Option 8</button>
      <button class="btn">Option 9</button>
      <button class="btn">Option 10</button>
    </div>
  </div>
</body>
</html>

Javascript file

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

//--------------------------------------------------------------------------------------------
//setting Mr Variable
let MrVaraible =50;
//--------------------------------------------------------------------------------------------
let state = {}

//starts the game
function startGame() {
  state = {}
  showTextNode(1)
}

//Making it return to the scond menu after variablke is modified
function ReturnToMenu() {
  showTextNode(2)
}


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 option.requiredState == null || option.requiredState(state)
}

function selectOption(option) {
  const nextTextNodeId = option.nextText

//Changing Mr Variable
//----------------------------------------------------------------------
  if (nextTextNodeId == -5) {
    MrVaraible=60;
    return ReturnToMenu()
  }
 //---------------------------------------------------------------------
  if (nextTextNodeId == -100) {
    return startGame()
  }
  state = Object.assign(state, option.setState)
  showTextNode(nextTextNodeId)
}

let textNodes = [
  {
    id: 1,
    text: 'Mr. Varaible is set to 50 press the button to make him larger by 10',
    options: [
      {
        text: 'Increase Mr. Variable',
        nextText:-5
      },
    ]
  },
 
  {
    id: 2,
    text: MrVaraible, 
    options: [
      {
        text: 'It',
        nextText: -100
      },
      {
        text: 'Did',
        nextText: -100
      },
      {
        text: 'Not',
        nextText: -100
      },
      {
        text: 'Increase',
        nextText: -100
      }
    ]
  },
 
]

startGame()

Thanks in advance,

Ivor

P.S. it does acknowege the change of the variable if a cnsole log is done the variable does change but the readout does not. enter image description here

javascripthtml


Solution 1:[1]

OK I see your issue.

Just before startGame() you define the list let textNodes = [ .

When these lines are called

  {
    id: 2,
    text: MrVaraible, 
    options: [

What happens is your browser sees:

  {
    id: 2,
    text: 50
    options: [

So from then onwards, whenever you want to use textNodes 2, it will always be 50.

Try moving your textNodes list into the inside of the function showTextNode so it is regenerated every time:

function showTextNode(textNodeIndex) {
    let textNodes = [

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions