Learn Basic JavaScript by Building a Role Playing Game - Step 120

JavaScript
1

This is the current code:

let xp = 0;
let health = 100;
let gold = 50;
let currentWeaponIndex = 0;
let fighting;
let monsterHealth;
let inventory = ["stick"];

const button1 = document.querySelector('#button1');
const button2 = document.querySelector("#button2");
const button3 = document.querySelector("#button3");
const text = document.querySelector("#text");
const xpText = document.querySelector("#xpText");
const healthText = document.querySelector("#healthText");
const goldText = document.querySelector("#goldText");
const monsterStats = document.querySelector("#monsterStats");
const monsterName = document.querySelector("#monsterName");
const monsterHealthText = document.querySelector("#monsterHealth");
const weapons = [
  { name: 'stick', power: 5 },
  { name: 'dagger', power: 30 },
  { name: 'claw hammer', power: 50 },
  { name: 'sword', power: 100 }
];
const monsters = [
  {
    name: "slime",
    level: 2,
    health: 15
  },
  {
    name: "fanged beast",
    level: 8,
    health: 60
  },
  {
    name: "dragon",
    level: 20,
    health: 300
  }
]
const locations = [
  {
    name: "town square",
    "button text": ["Go to store", "Go to cave", "Fight dragon"],
    "button functions": [goStore, goCave, fightDragon],
    text: "You are in the town square. You see a sign that says \"Store\"."
  },
  {
    name: "store",
    "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
    "button functions": [buyHealth, buyWeapon, goTown],
    text: "You enter the store."
  },
  {
    name: "cave",
    "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
    "button functions": [fightSlime, fightBeast, goTown],
    text: "You enter the cave. You see some monsters."
  },
  {
    name: "fight",
    "button text": ["Attack", "Dodge", "Run"],
    "button functions": [attack, dodge, goTown],
    text: "You are fighting a monster."
  }
];

// initialize buttons
button1.onclick = goStore;
button2.onclick = goCave;
button3.onclick = fightDragon;

function update(location) {
  button1.innerText = location["button text"][0];
  button2.innerText = location["button text"][1];
  button3.innerText = location["button text"][2];
  button1.onclick = location["button functions"][0];
  button2.onclick = location["button functions"][1];
  button3.onclick = location["button functions"][2];
  text.innerText = location.text;
}

function goTown() {
  update(locations[0]);
}

function goStore() {
  update(locations[1]);
}

function goCave() {
  update(locations[2]);
}

function buyHealth() {
  if (gold >= 10) {
    gold -= 10;
    health += 10;
    goldText.innerText = gold;
    healthText.innerText = health;
  } else {
    text.innerText = "You do not have enough gold to buy health.";
  }
}

function buyWeapon() {
  if (currentWeaponIndex < weapons.length - 1) {
    if (gold >= 30) {
      gold -= 30;
      currentWeaponIndex++;
      goldText.innerText = gold;
      let newWeapon = weapons[currentWeaponIndex].name;
      text.innerText = "You now have a " + newWeapon + ".";
      inventory.push(newWeapon);
      text.innerText += " In your inventory you have: " + inventory;
    } else {
      text.innerText = "You do not have enough gold to buy a weapon.";
    }
  } else {
    text.innerText = "You already have the most powerful weapon!";
    button2.innerText = "Sell weapon for 15 gold";
    button2.onclick = sellWeapon;
  }
}

function sellWeapon() {
  if (inventory.length > 1) {
    gold += 15;
    goldText.innerText = gold;
    let currentWeapon = inventory.shift();
    text.innerText = "You sold a " + currentWeapon + ".";
    text.innerText += " In your inventory you have: " + inventory;
  } else {
    text.innerText = "Don't sell your only weapon!";
  }
}

function fightSlime() {
  fighting = 0;
  goFight();
}

function fightBeast() {
  fighting = 1;
  goFight();
}

function fightDragon() {
  fighting = 2;
  goFight();
}

function goFight() {
  update(locations[3]);
  monsterHealth = monsters[fighting].health;
  monsterStats.style.display = "block";
  monsterName.innerText = monsters[fighting].name;
  monsterHealthText.innerText = monsterHealth;
}

function attack() {
  text.innerText = "The " + monsters[fighting].name + " attacks.";
}

function dodge() {

}

And these are the important parts of the code for my question (I think…):

let xp = 0;
let health = 100;
let gold = 50;
let currentWeaponIndex = 0;
let fighting;
let monsterHealth;
let inventory = ["stick"];

const monsters = [
  {
    name: "slime",
    level: 2,
    health: 15
  },
  {
    name: "fanged beast",
    level: 8,
    health: 60
  },
  {
    name: "dragon",
    level: 20,
    health: 300
  }
]
function fightSlime() {
  fighting = 0;
  goFight();
}

function fightBeast() {
  fighting = 1;
  goFight();
}

function fightDragon() {
  fighting = 2;
  goFight();
}

function attack() {
  text.innerText = "The " + monsters[fighting].name + " attacks.";
}

HELP
HELP1030Ă—529 14.5 KB

HELP2.0
HELP2.01031Ă—521 14.1 KB

HELP3.0
HELP3.01030Ă—527 15 KB

I am so confused… I understand that within the attack function, we are using this code monsters[fighting].name to reference the monster’s name using the fighting variable, which holds the index value for that monster within the monsters array. What I do not understand is how the attack function can access the value of the fighting that is assigned within the monster’s function (i.e. fightSlime, fightBeast, fightDragon)… because in the global scope the fighting variable is not initialized; it has no value. I hope my question is clear ^^’

2

I think the that you are building the attack function so that whichever monsterName is selected will attack. You’re pretty your calling the action for the monsterName to attack.

3

We are using the fighting variable as an index to specify which monster we are fighting from the monsters array, but in the global scope the fighting variable is uninitialized and has no value… only within each fighting function does the fighting variable have a value, and I don’t understand how the attack function is able to access those values there are set within the function not in the global scope :confused:

4

Something has to trigger the update of the fighting variable in the attack function so that it represents the monster selected by the user. Not all of code has been built to do this at step 120 so you will need to wait to see how it hangs together.

Working backwards from the attack function:

  1. The attack function shows that “fighting” variable represents the index in the monsters’ array.
  2. In the monsters array there are 3 objects each representing a monster, slime, fanged beast or dragon.
  3. The correct monster is triggered by the user selecting the button for the option. The game starts with 3 button options. If the user presses fightDragon at this point this triggers the fightDragon function. The fightDragon function sets the fighting variable to 2 and triggers the goFight function. So the fighting variable now holds a value, it has been declared.
  4. The goFight function triggers the update function and passes locations[3] as the parameter.
  5. Locations[3] holds the button options and associated functions for fighting the selected monster. The update function then sets the button options for this point. Remember “location” in the update function represents “locations[3]”. So it will display the buttons for attack, dodge and run. If the first button is clicked (index 0), on the click the button function at index 0 (location[3][“button functions”][0] is triggered]. This holds the attack function, so that function is triggered.
  6. The reference to fighting variable in the attack function has already been set (see above - it is 2 if fightDragon is selected). The user is still fighting the dragon, the attack function has been selected. If dodge had been selecting, that too refers to the same fighting variable set when the dragon was selected.
1 Like
5

here you are changing the value of fighting