I often start my posts by looking through my planner to see what I’ve been up to. I update my planner daily…or at least I’m trying to. Sometimes I will go through my camera roll if I took pictures to jog my memory of the past few days. The weekend was a long one. I made cookies on Friday. They are gone now. I worked out Saturday morning and then Tommy and I took Karissa out shopping at Kohls. We stopped at Costco first and spent way too much on stuff we needed. That’s the problem with Costco, you can’t leave that place without spending way too much.
Sunday, we drove Alexis back to school. Three hour drive. But it isn’t a bad car ride. Tommy drove while I tried to keep up conversations. And we all know how much I suck at that! We arrived at her school around 6:30. We stopped at Taco Bell for her and dropped her off at her dorm. She has no roommate right now cause her roommate took a semester off. So we are waiting for her to get a new roommate. Tommy and I then stopped to get some dinner at the Chinese buffet. After dinner we stopped at AllSups to use their bathroom. When we got there two girls went in ahead of us together in the one-person bathroom. They took forever! Had to be like 20 minutes or so. Then when they left they had their heads down and hiding their face. It was the weirdest thing.
We got to our hotel about 8. The bed was comfy, not too hard. I brought my Kindle, even though I have no book to read since I finished Before We Were Yours. Which is a good read. There are some triggers in the book but in all it was a good book. In the reviews, some didn’t like the romance plot line but I liked it. The book is so serious that it was nice to have some light romance on the side.
Monday, we took Lexi to Walmart so she can go grocery shopping. Then we dropped her off and started heading home. We stopped for lunch on the way. We took the back way home since it was easier to pick up Alex on the way home from his grandparent’s house. We got home around 5. I started dinner and then watched football with Tommy. The Bucs won so he was happy. Earlier the Kings won their game so Tommy was having a pretty good day.
Some pics. I’m going to try to incorporate pics into my posts. Alexis sleeping on the way to school. And the sugar cookies I made! Yes, it is a little late for the Christmas cookies but I had the dough and had to bake them. I’m on hold with the health insurance company right now. Have been for 3 and half hours. Thinking of just calling back tomorrow morning.
My dad’s birthday was yesterday. I miss him. He’d be so proud of the girls.
JavaScript notes…
————————————–
Step 67
Following the same pattern as you did for the button text, update the three buttons’ onclick assignments to be the first, second, and third values of the button functions array.
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.\"";
}
Step 68
Finally, update the text.innerText assignment to equal the text from the location object. However, instead of using bracket notation, use dot notation.
Here is an example of accessing the name property of an object called person:
person.name
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;
}
Step 69
Now update your goStore function to call the update function. Pass the second element of the locations array as your argument.
To make sure your refactoring is correct, try clicking your first button again. You should see the same changes to your webpage that you saw earlier.
function goStore() {
update(locations[1]);
}
Step 70
Create two more empty functions named fightSlime and fightBeast. These functions will be used in your upcoming cave object.
function fightSlime() {
}
function fightBeast() {
}
Step 71
Add a third object to the locations array. Give it the same properties as the other two objects.
Set name to cave. Set button text to an array with the strings Fight slime, Fight fanged beast, and Go to town square. Set the button functions to an array with the variables fightSlime, fightBeast, and goTown. Set the text property to You enter the cave. You see some monsters..
{
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."
}
Step 72
Now that you have a cave location object, update your goCave function to call update and pass that new cave location. Remember that this is the third element in your locations array.
Don’t forget to remove your console.log call!
function goCave() {
update(locations[2]);
}
Step 73
Now that your store and cave locations are complete, you can code the actions the player takes at those locations. Inside the buyHealth function, set gold equal to gold minus 10.
For example, here is how you would set num equal to 5 less than num: num = num – 5;.
function buyHealth() {
gold = gold - 10;
}
Step 74
After the gold is updated, add a line to set health equal to health plus 10.
function buyHealth() {
gold = gold - 10;
health = health + 10;
}
Step 75
There is a shorthand way to add or subtract from a variable called compound assignment. For example, changing num = num + 5 to compound assignment would look like num += 5.
Update both lines inside your buyHealth function to use compound assignment.
function buyHealth() {
gold -= 10;
health += 10;
}
Step 76
Now that you are updating the gold and health variables, you need to display those new values on the game screen.
After your assignment lines, assign the innerText property of goldText to be the variable gold. Use the same pattern to update healthText with the health variable.
Here is an example:
let value = 100;
const total = document.querySelector(‘#total’);
total.innerText = value;
You can test this by clicking your “Go to store” button, followed by your “Buy Health” button.
Note: Your answer should only be two lines of code.
function buyHealth() {
gold -= 10;
health += 10;
goldText.innerText = gold;
healthText.innerText = health;
}
Step 77
What if the player doesn’t have enough gold to buy health? When you want to run code conditionally, you can use the if statement. Put all of the code in your buyHealth function inside an if statement. For example:
function myFunction() {
if (“condition”) {
console.log(“Hello World!”);
}
}
For now, the if statement condition should be set to the string condition as a placeholder.
function buyHealth() {
if ("condition") {
gold -= 10;
health += 10;
goldText.innerText = gold;
healthText.innerText = health;
}
}
Step 78
The condition string is just a placeholder. Change the if statement condition to check if gold is greater than or equal to 10.
Here is an if statement that checks if num is greater than or equal to 5:
if (num >= 5) {
}
function buyHealth() {
if (gold >= 10) {
gold -= 10;
health += 10;
goldText.innerText = gold;
healthText.innerText = health;
}
}
Step 79
Now when a player tries to buy health, it will only work if they have enough money. If they do not, nothing will happen. Add an else statement where you can put code to run if a player does not have enough money.
Here is an example of an empty else statement:
if (num >= 5) {
} else {
}
function buyHealth() {
if (gold >= 10) {
gold -= 10;
health += 10;
goldText.innerText = gold;
healthText.innerText = health;
} else {
}
}
Step 80
Inside the else statement, set text.innerText to equal You do not have enough gold to buy health..
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."
}
}
Step 81
Use const to create a weapons variable above your locations array. Assign it an empty array.
const weapons = [];
Step 82
Just like your locations array, your weapons array will hold objects. Add four objects to the weapons array, each with two properties: name and power. The first should have the name set to stick and the power set to 5. The second should be dagger and 30. The third, claw hammer and 50. The fourth, sword and 100.
const weapons = [
{
name: "stick",
power: 5
},
{
name: "dagger",
power: 30
},
{
name: "claw hammer",
power: 50
},
{
name: "sword",
power: 100
}
];
Step 83
Inside your buyWeapon function, add an if statement to check if gold is greater than or equal to 30.
function buyWeapon() {
if (gold >= 30) {
}
}
Step 84
Similar to your buyHealth function, set gold equal to 30 less than its current value. Make sure this is inside your if statement.
function buyWeapon() {
if (gold >= 30) {
gold -= 30;
}
}
