I finished the JavaScript role-playing game project. The next project is a Calorie Counter. I got a message this morning from someone thanking me for my JavaScript notes. That made me smile. I didn’t think you could find my site on Google, and for it to help people, that’s cool.
Tommy and I were talking today, and I have something that I want to speak to my therapist about. For years, my whole identity has been focused on others. Making them happy and always agreeing with them. After all that, I have seemingly lost myself and my self-identity. When I make choices, I always make the ones that will make another person happy rather than making my own choices. One thing to ask myself is if I were to make a choice, would I make the same choice if I were alone? I have to ask myself that when it comes to making decisions and when others ask for my opinion. Cause, in truth, I often don’t have my own opinion. I draw a blank. I want to talk to my therapist about this and what I can do to take back my identity.
I’m making green chile chicken soup. Something warm and cozy. We are supposed to be getting some winter weather this weekend. Will it snow? Will it rain? It will likely snow.
In Final Fantasy XIV, I’m almost to the end of the main scenario quests and ready for this summer’s expansion. Now, I have so many side quests that have popped up. You finish one quest, and six others pop up!
JavaScript notes…
——————————————-
Step 151
The player should hit if either Math.random() > .2 or if the player’s health is less than 20.
At the end of your return statement, use the logical OR operator || and check if health is less than 20.
The logical OR operator will use the first value if it is truthy – that is, anything apart from NaN, null, undefined, 0, -0, 0n, “”, and false. Otherwise, it will use the second value.
For example: num < 10 || num > 20.
function isMonsterHit() {
return Math.random() > .2 || health < 20;
}
Step 152
On every attack, there should be a chance that the player's weapon breaks. At the end of the attack function, add an empty if statement with the condition Math.random() <= .1.
function attack() {
text.innerText = "The " + monsters[fighting].name + " attacks.";
text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
health -= getMonsterAttackValue(monsters[fighting].level);
if (isMonsterHit()) {
monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
} else {
text.innerText += " You miss.";
}
healthText.innerText = health;
monsterHealthText.innerText = monsterHealth;
if (health <= 0) {
lose();
} else if (monsterHealth <= 0) {
if (fighting === 2) {
winGame();
} else {
defeatMonster();
}
}
if (Math.random() <= .1) {
}
}
Step 153
Use the += operator to add Your
function attack() {
text.innerText = "The " + monsters[fighting].name + " attacks.";
text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
health -= getMonsterAttackValue(monsters[fighting].level);
if (isMonsterHit()) {
monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
} else {
text.innerText += " You miss.";
}
healthText.innerText = health;
monsterHealthText.innerText = monsterHealth;
if (health <= 0) {
lose();
} else if (monsterHealth <= 0) {
if (fighting === 2) {
winGame();
} else {
defeatMonster();
}
}
if (Math.random() <= .1) {
text.innerText += " Your " + inventory.pop() + " breaks.";
}
}
Step 154
Remember that the increment operator ++ can be used to increase a variable's value by 1. There is also a decrement operator -- that can be used to decrease a variable's value by 1.
Decrement the value of currentWeapon in your if statement, after you update the text.
function attack() {
text.innerText = "The " + monsters[fighting].name + " attacks.";
text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
health -= getMonsterAttackValue(monsters[fighting].level);
if (isMonsterHit()) {
monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
} else {
text.innerText += " You miss.";
}
healthText.innerText = health;
monsterHealthText.innerText = monsterHealth;
if (health <= 0) {
lose();
} else if (monsterHealth <= 0) {
if (fighting === 2) {
winGame();
} else {
defeatMonster();
}
}
if (Math.random() <= .1) {
text.innerText += " Your " + inventory.pop() + " breaks.";
currentWeapon --;
}
}
Step 155
We don't want a player's only weapon to break. The logical AND operator checks if two statements are true.
Use the logical AND operator && to add a second condition to your if statement. The player's weapon should only break if inventory.length does not equal (!==) one.
Here is an example of an if statement with two conditions:
if (firstName === "Quincy" && lastName === "Larson") {
}
function attack() {
text.innerText = "The " + monsters[fighting].name + " attacks.";
text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
health -= getMonsterAttackValue(monsters[fighting].level);
if (isMonsterHit()) {
monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
} else {
text.innerText += " You miss.";
}
healthText.innerText = health;
monsterHealthText.innerText = monsterHealth;
if (health <= 0) {
lose();
} else if (monsterHealth <= 0) {
if (fighting === 2) {
winGame();
} else {
defeatMonster();
}
}
if (Math.random() <= .1 && inventory.length !== 1) {
text.innerText += " Your " + inventory.pop() + " breaks.";
currentWeapon--;
}
}
Step 156
Now you can add a small easter egg (hidden feature) to your game.
Create a new function called easterEgg which calls the update function with locations[7] as the argument.
function easterEgg() {
update(locations[7]);
}
Step 157
Create an empty pick function with a parameter named guess.
function pick(guess) {
}
Step 158
Create two new functions named pickTwo and pickEight.
Inside each of those, call the pick() function and pass either 2 or 8 as the argument depending on the function name.
function pickTwo() {
pick(2);
}
function pickEight() {
pick(8);
}
Step 159
Add another object to your locations array. Set name to easter egg, set button text to an array with the strings 2, 8, and Go to town square?, set button functions to an array with the variables pickTwo, pickEight, and goTown, and text to You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!.
{
name: "easter egg",
"button text": ["2", "8", "Go to town square?"],
"button functions": [pickTwo, pickEight, goTown],
text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!"
}
Step 160
Inside pick, use const to initialize a variable named numbers and set it to an empty array.
function pick(guess) {
const numbers = []
}
Step 161
After your numbers array, create a while loop. A while loop accepts a condition, and will run the code in the block until the condition is no longer true.
Your while loop should run while numbers.length is less than 10.
Here is an example of a while loop that runs while i is less than five.
while (i < 5) { }
function pick(guess) {
const numbers = [];
while (numbers.length < 10) {
}
}
Step 162
Inside your while loop, push a random number between 0 and 10 to the end of the numbers array. You can create this random number with Math.floor(Math.random() * 11).
function pick(guess) {
const numbers = [];
while (numbers.length < 10) {
numbers.push(Math.floor(Math.random() * 11));
}
}
Step 163
After the while loop, set text.innerText to equal You picked
function pick(guess) {
const numbers = [];
while (numbers.length < 10) {
numbers.push(Math.floor(Math.random() * 11));
}
text.innerText = "You picked " + guess + ". Here are the random numbers:"
}
Step 164
At the end of the string, before the final quote, insert the new line escape character \n. This will cause the next part you add to text.innerText to appear on a new line.
function pick(guess) {
const numbers = [];
while (numbers.length < 10) {
numbers.push(Math.floor(Math.random() * 11));
}
text.innerText = "You picked " + guess + ". Here are the random numbers:\n";
}
Step 165
A for loop runs for a specific number of times. We will break down how a for loop runs in the next several steps. For now, copy this loop below and paste it at the end of your pick function.
for (let x = 1; x < 5; x++) { }
function pick(guess) {
const numbers = [];
while (numbers.length < 10) {
numbers.push(Math.floor(Math.random() * 11));
}
text.innerText = "You picked " + guess + ". Here are the random numbers:\n";
for (let x = 1; x < 5; x++) {
}
}
Step 166
for loops are declared with three expressions separated by semicolons. for (a; b; c), where a is the initialization expression, b is the condition, and c is the final expression.
The initialization expression is executed only once, before the loop starts, and is often used to define and set up the loop variable. Think of it like declaring a counter to use in your loop.
Many for loops use i as the counter and start from 0, so change let x = 1; to let i = 0;.
function pick(guess) {
const numbers = [];
while (numbers.length < 10) {
numbers.push(Math.floor(Math.random() * 11));
}
text.innerText = "You picked " + guess + ". Here are the random numbers:\n";
for (let i = 0; x < 5; x++) {
}
}
Step 167
The second statement in a for loop, the condition statement, is evaluated at the beginning of every loop iteration. The loop will continue as long as the condition evaluates to be true.
We want the loop to run 10 times, so change x < 5 to i < 10.
function pick(guess) {
const numbers = [];
while (numbers.length < 10) {
numbers.push(Math.floor(Math.random() * 11));
}
text.innerText = "You picked " + guess + ". Here are the random numbers:\n";
for (let i = 0; i < 10; x++) {
}
}
Step 168
The last statement in a for loop, the final expression, is executed at the end of each loop iteration.
Since we changed the initialization statement to use i instead of x, change x++ to i++. This will increment the initializer i by 1 after each loop.
function pick(guess) {
const numbers = [];
while (numbers.length < 10) {
numbers.push(Math.floor(Math.random() * 11));
}
text.innerText = "You picked " + guess + ". Here are the random numbers:\n";
for (let i = 0; i < 10; i++) {
}
}
Step 169
Now you can write the logic to run in the loop. Inside your for loop, use the += operator to add to the end of text.innerText. Add the number at index i of the numbers array, using numbers[i]. Then add a new line, using the escape sequence you used earlier.
function pick(guess) {
const numbers = [];
while (numbers.length < 10) {
numbers.push(Math.floor(Math.random() * 11));
}
text.innerText = "You picked " + guess + ". Here are the random numbers:\n";
for (let i = 0; i < 10; i++) {
text.innerText += numbers[i] + "\n";
}
}
Step 170
The .includes() method determines if an array contains an element and will return either true or false.
Here is an example of the .includes() syntax:
const numbersArray = [1, 2, 3, 4, 5]
const number = 3
if (numbersArray.includes(number)) {
console.log("The number is in the array.")
}
After your for loop, add an if statement to check if the guess is in the numbers array. You can use the .includes() method to check if the array contains the guess.
function pick(guess) {
const numbers = [];
while (numbers.length < 10) {
numbers.push(Math.floor(Math.random() * 11));
}
text.innerText = "You picked " + guess + ". Here are the random numbers:\n";
for (let i = 0; i < 10; i++) {
text.innerText += numbers[i] + "\n";
}
if (numbers.includes(guess)) {
}
}
Step 171
Inside the if statement, add the string Right! You win 20 gold! to the end of text.innerText. Also, add 20 to the value of gold and update the goldText.innerText.
function pick(guess) {
const numbers = [];
while (numbers.length < 10) {
numbers.push(Math.floor(Math.random() * 11));
}
text.innerText = "You picked " + guess + ". Here are the random numbers:\n";
for (let i = 0; i < 10; i++) {
text.innerText += numbers[i] + "\n";
}
if (numbers.includes(guess)) {
text.innerText += "Right! You win 20 gold!";
gold += 20;
goldText.innerText = goldText;
}
}
Step 172
Now add an else statement. Inside, add Wrong! You lose 10 health! to the end of text.innerText. Subtract 10 from health and update healthText.innerText.
function pick(guess) {
const numbers = [];
while (numbers.length < 10) {
numbers.push(Math.floor(Math.random() * 11));
}
text.innerText = "You picked " + guess + ". Here are the random numbers:\n";
for (let i = 0; i < 10; i++) {
text.innerText += numbers[i] + "\n";
}
if (numbers.includes(guess)) {
text.innerText += "Right! You win 20 gold!";
gold += 20;
goldText.innerText = gold;
} else {
text.innerText += "Wrong! You lose 10 health!";
health -= 10;
healthText.innerText = health;
}
}
Step 173
Since you subtracted health from the player, you need to check if the player's health is less than or equal to 0. If it is, call the lose function.
function pick(guess) {
const numbers = [];
while (numbers.length < 10) {
numbers.push(Math.floor(Math.random() * 11));
}
text.innerText = "You picked " + guess + ". Here are the random numbers:\n";
for (let i = 0; i < 10; i++) {
text.innerText += numbers[i] + "\n";
}
if (numbers.includes(guess)) {
text.innerText += "Right! You win 20 gold!";
gold += 20;
goldText.innerText = gold;
} else {
text.innerText += "Wrong! You lose 10 health!";
health -= 10;
healthText.innerText = health;
if (health <= 0) {
lose();
}
}
}
Step 174
Looking at your kill monster object, button functions currently has three goTown variables. Replace the third one with easterEgg - this is how a player will access the hidden feature of the game. Do not change the button text.
With this, your RPG game is complete! You can now play around - can you defeat the dragon?
{
name: "kill monster",
"button text": ["Go to town square", "Go to town square", "Go to town square"],
"button functions": [goTown, goTown, easterEgg],
text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
},
