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

JavaScript
1

Tell us what’s happening:

I don’t really have a problem with following the steps, I can do that, but I am still confused about why it is location[“button function”][0]; when I declared const locationS. Wouldn’t the code be wrong?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./styles.css">
    <title>RPG - Dragon Repeller</title>
  </head>
  <body>
    <div id="game">
      <div id="stats">
        <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
        <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
        <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
      </div>
      <div id="controls">
        <button id="button1">Go to store</button>
        <button id="button2">Go to cave</button>
        <button id="button3">Fight dragon</button>
      </div>
      <div id="monsterStats">
        <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
        <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
      </div>
      <div id="text">
        Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
      </div>
    </div>
    <script src="./script.js"></script>
  </body>
</html>

/* file: styles.css */
body {
  background-color: #0a0a23;
}

#text {
  background-color: #0a0a23;
  color: #ffffff;
  padding: 10px;
}

#game {
  max-width: 500px;
  max-height: 400px;
  background-color: #ffffff;
  color: #ffffff;
  margin: 30px auto 0px;
  padding: 10px;
}

#controls,
#stats {
  border: 1px solid #0a0a23;
  padding: 5px;
  color: #0a0a23;
}

#monsterStats {
  display: none;
  border: 1px solid #0a0a23;
  padding: 5px;
  color: #ffffff;
  background-color: #c70d0d;
}

.stat {
  padding-right: 10px;
}

button {
  cursor: pointer;
  color: #0a0a23;
  background-color: #feac32;
  background-image: linear-gradient(#fecc4c, #ffac33);
  border: 3px solid #feac32;
}

/* file: script.js */
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 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."
  }
];

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


// User Editable Region

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 = "You are in the town square. You see a sign that says \"Store\".";
}

// User Editable Region


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

function goStore() {

}

function goCave() {
  console.log("Going to cave.");
}

function fightDragon() {
  console.log("Fighting dragon.");
}

function buyHealth() {

}

function buyWeapon() {

}

Your browser information:

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

Challenge Information:

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

2

also how did the buttons.onclick get the name “button functions” in the location objects, sorry for asking but I would like to know how and why the code is working

3

Look at the locations definition. It is an array of objects. Each object has properties defined which are the keys to the corresponding values.
In this case “button functions” is one of the object keys.

Also each “button functions” is itself an array.

4

that makes sense for the town square object because the onclick actions are the same as the names in the button functions array, but how about the other objects? Could you explain in a dumber way, I kind of dont get it, also what about the use of locations instead of location.

5

They used location because it is the name of the variable being passed into this function.

And the variable location came from this argument which is the first object in the locations array.
The first object of the locations array is this one:

This object has a property called “button functions” which is itself an array.

I am not sure what else to explain? Please tell me which part you need more information about?

6

I understand how it works, but why does the button functions array function when nothing was created how is it attached to the onclick button. And is the location and locations different because locations is an
array which always has plural?

7

I’m sorry I am not understanding what you mean here when you say “why does the button functions array function” or when you say “how is it attached to the onclick button”. Can you rephrase? Maybe you can show me the line of code you want an explanation for?

Also I didn’t understand what you meant here? The plural locations is a completely different variable than the location variable. They’re defined in different ways and in different places. They can be called a and b variables and they would still work the same, their names have nothing to do with how they work.

8

for the button functions I meant how are they attached to the onclick button and for the locations array and location variable how do they work together? like in the code update(locations[0]) how is locations taking the location variable?

9

to see how the button functions are attached look here:

These 3 lines are telling the browser that if you click any of these buttons you will invoke whatever location[“button functions”][0] and [1] and [2] have (which in this case are:

because the location variable came from the locations array at index 0.

When you define a function, any function, and write it such that it has a parameter like this:

the parameter is defined for the update function and it is called in this case location but it can be called banana and it would still work the same.

Later you call the function you defined like this:

And this call is passing in the value stored inside of locations[0] to the code in the update function. And as I said, the update function was written to call that parameter ‘location’ but it could have called it ‘banana’ and it would work exactly the same.

10

i see thank you very much

11

no problem, may I suggest something?
It may help you to get visual studio code installed on your computer if you don’t have it already and then create a simple version of the app(s) you have worked on here.
Like you could make a very simple app that just listens to one button and displays some text after the click. Or you could make something more complicated like this rpg game but the more you play with the code independantly, i think, the more you will understand it.

Also, please feel free to ask any other follow-up questions. I know there’s a lot to absorb in this curriculum.