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

[cleberlima.cls]

Tell us what’s happening: Where this [fighting] is coming from?

I didn’t get it. I have a “fighting” variable assigned in the beginning with no value and a “monsters” variable with 3 objects in an array. So why there is a monsters[fighting]? I understood the is used to find something within an array, I m wrong?

Your code so far

let xp = 0;
let health = 100;
let gold = 50;
let currentWeapon = 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 (currentWeapon < weapons.length - 1) {
    if (gold >= 30) {
      gold -= 30;
      currentWeapon++;
      goldText.innerText = gold;
      let newWeapon = weapons[currentWeapon].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 " + monster[fighting].name + " attacks.";
}


function dodge() {

}

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Challenge Information:

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

freeCodeCamp.org

[bbsmooth]

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

[bbsmooth]

@cleberlima.cls

monster[fighting].name

Is it monster singular or monsters plural?

[cleberlima.cls]

It is “monsters” plural. I corrected later. My question is more related to the [fighting] i didn’t understand since [fighting] is not part of the monsters array.

[bbsmooth]

@cleberlima.cls

i didn’t understand since [fighting] is not part of the monsters array

What is in the monsters array? A bunch of objects, each one representing a specific monster.

So what is in the fighting variable?

[cleberlima.cls]

As far I under stood Monsters array has 3 objects and the variable “fighting” was declared at the beginning but nothing was assigned it.
To me, the logic would be find the [fighting] value inside the array monsters. But there is no fighting in this array. Sorry if I getting comfused. Im very begginer. Finished html/css and now im here. (Btw JS is way harder than those two ) almost giving up

[bbsmooth]

Yes, JS is much more challenging than HTML/CSS, so being confused or feeling frustrated when you are still learning is perfectly normal.

@cleberlima.cls

But there is no fighting in this array.

Remember, an array is just a bunch storage locations for data. We access an item in an array using its index number, which starts at 0. So if we want to access the second item in an array then we would use the notation someArray[1]. Thus, if you want to access a specific monster object in the monsters array, what value do you think the variable fighting should be holding?

@cleberlima.cls

the variable “fighting” was declared at the beginning but nothing was assigned it.

Look at the three function you set up earlier to fight specific monsters:

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

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

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

What’s the first thing those functions do?

[cleberlima.cls]

I still don`t get the relation of fighting and the array. Access a item in a array is simples to understand: const array = [a, b, c] array[1] is b. But this “fighting” variable is in a function. so why monsters[fighting].name? I know that, is going to access the name of the monster. But I didst understand the logic behind. Also, Why a exercise/lesson so hard like this to begin the course???

[anon28508191]

Hi @cleberlima.cls
If I may, I think I understand that you are considering the frustrating aspect of something that might be foreigner, at this point, for you. You have to have a little of faith that eventually you will get it and also trust a bit that those that crafted the lesson were trying to teach something important (as flawed as it may be).
Of course, you do not have to believe anything I am telling you.
There are reasons why the variable “fighting” is used here instead of a generic meaningless letter or number. Words convey meaning, and meaning can represent state, action and objects. A letter or a number is too ambiguous to do so for a human.

[cleberlima.cls]

I believe and understand what you are saying. (not the lesson tough lol) but tks

[anon28508191]

I appreciate you saying so!
It reminded me when I decided to learn C programming many, many years ago. I could not believe why I needed to make a function to add two numbers. I thought, I can add two numbers without wrapping it in a function.

[bbsmooth]

@cleberlima.cls

But this “fighting” variable is in a function

Look at the top of your code. You declared the fighting variable as a global variable. That means it can be used anywhere in your code. When it is used in the fightSlime function:

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

It is being set to 0 and anywhere you use fighting variable it will have the value 0 until you call another one of those fighting functions to change its value. So if you first call fightSlime and that sets fighting to 0, then when you call the attack function and reference monsters[fighting].name, the variable fighting will be 0 and thus you are accessing the 0th, or first item in the monsters array.

[cleberlima.cls]

I think Im getting it. So the variable “fighting” will be the value stored in the respective function. If the function called is “fightSlime”, will be zero, “fightBeast” will be 1 and “fightDragon” 2. Cool.