Today’s therapy was complex. We touched on some more challenging subjects. I still feel small and vulnerable talking about them. Also, the fact that I do things so I don’t get into trouble means that I’m treating people like I treat my mom or other past abusers. That isn’t fair to others. We also talked about how I need to be more assertive. To make boundaries and learn how to say no. That’s a hard one. So we talked about a few things, such as those. It was a lot for one hour. More trauma talk during our next visit. My anxiety is a bit high right now.
I should make dinner cause that is what I’m supposed to do… supposedly though it is too early. No one will be home until 8. The kids are home. Karissa is doing homework, and Alex doesn’t feel that well. So, dinner can wait. I need to stop thinking that I will always get into trouble if I don’t do something at the moment. I know why I feel like that. But I’m safe now and not around any abusers. My mind knows this. But my body still reacts as if I’m still in an abusive relationship. I don’t care for this physical reaction. It makes it hard to focus and relax.
I will read for a bit and start dinner closer to when everyone is home. I hope I can focus on reading and be in the moment rather than my head wandering and my anxiety getting the best of me.
JavaScript notes…
———————————————
Step 139
Back to your attack function – inside the else if block, create another if and else statement. If the player is fighting the dragon (fighting would be 2), call the winGame function. Move the defeatMonster() call to the else block.
For this step, you will need to use the strict equality (===) operator to check if fighting is equal to 2. The strict equality operator will check if the values are equal and if they are the same data type.
Here is an example that checks if num is strictly equal to 5:
if (num === 5) {
} else {
}
function attack() {
text.innerText = "The " + monsters[fighting].name + " attacks.";
text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
health -= monsters[fighting].level;
monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
healthText.innerText = health;
monsterHealthText.innerText = monsterHealth;
if (health <= 0) {
lose();
} else if (monsterHealth <= 0) {
if (fighting === 2) {
winGame();
} else {
defeatMonster();
}
}
}
Step 140
JavaScript has a conditional operator called the ternary operator. This can be used as a one-line if-else statement. The syntax is: condition ? true : false.
Here is an example of an if-else statement changed to a ternary:
if (num > 5) {
bigger()
} else {
smaller()
}
num > 5 ? bigger() : smaller();
Change your new if-else statement to a ternary.
Step 141
While your game is feature complete at this stage, there are things you can do to make it more fun and engaging. To get started, you'll give monsters a dynamic attack value.
Inside your attack function, change your health -= monsters[fighting].level; line to health -= getMonsterAttackValue(monsters[fighting].level);. This sets health equal to health minus the return value of the getMonsterAttackValue function, and passes the level of the monster as an argument.
function attack() {
text.innerText = "The " + monsters[fighting].name + " attacks.";
text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
health -= getMonsterAttackValue(monsters[fighting].level);
monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
healthText.innerText = health;
monsterHealthText.innerText = monsterHealth;
if (health <= 0) {
lose();
} else if (monsterHealth <= 0) {
if (fighting === 2) {
winGame();
} else {
defeatMonster();
}
}
}
Step 142
Below your attack function, create an empty function named getMonsterAttackValue. It should take level as a parameter.
function getMonsterAttackValue(level) {
}
Step 143
The attack of the monster will be based on the monster's level and the player's xp. In the getMonsterAttackValue function, use const to create a variable called hit. Assign it the equation (level * 5) - (Math.floor(Math.random() * xp));.
This will set the monster's attack to five times their level minus a random number between 0 and the player's xp.
function getMonsterAttackValue(level) {
const hit = (level * 5) - (Math.floor(Math.random() * xp));
}
Step 144
Log the value of hit to the console to use in debugging. Remember that you can do this with console.log().
function getMonsterAttackValue(level) {
const hit = (level * 5) - (Math.floor(Math.random() * xp));
console.log(hit);
}
Step 145
Functions run specific blocks of code when they are called, but they can also return a value. This value can be assigned to a variable and used elsewhere in your code.
Use the return keyword to return the value of hit at the end of the function.
function getMonsterAttackValue(level) {
const hit = (level * 5) - (Math.floor(Math.random() * xp));
console.log(hit);
return hit;
}
Step 146
If you play the game in its current state you might notice a bug. If your xp is high enough, the getMonsterAttackValue function will return a negative number, which will actually add to your total health when fighting a monster! You can fix this issue by using a ternary operator to ensure negative values are not returned.
The ternary operator is a conditional operator and can be used as a one-line if-else statement. The syntax is: condition ? expressionIfTrue : expressionIfFalse.
Here is an example of returning a value using an if-else statement and a refactored example using a ternary operator:
if (num > 5) {
return 'num is greater than 5';
} else {
return 'num is smaller than or equal to 5';
}
return num > 5 ? 'num is greater than 5' : 'num is smaller than or equal to 5';
In getMonsterAttackValue, change return hit to a ternary operator that returns hit if hit is greater than 0, or returns 0 if it is not.
function getMonsterAttackValue(level) {
const hit = (level * 5) - (Math.floor(Math.random() * xp));
console.log(hit);
return hit > 0 ? hit : 0;
}
Step 147
In your attack function, below the health variable, create an if statement. Set the condition to call the isMonsterHit function.
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;
healthText.innerText = health;
monsterHealthText.innerText = monsterHealth;
if (health <= 0) {
lose();
} else if (monsterHealth <= 0) {
if (fighting === 2) {
winGame();
} else {
defeatMonster();
}
}
}
Step 148
Move your monsterHealth assignment into your if block.
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;
}
healthText.innerText = health;
monsterHealthText.innerText = monsterHealth;
if (health <= 0) {
lose();
} else if (monsterHealth <= 0) {
if (fighting === 2) {
winGame();
} else {
defeatMonster();
}
}
}
Step 149
Add an else statement to the first if statement inside your attack() function. In the else statement, use the += operator to add the text You miss. to the end of text.innerText.
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();
}
}
}
Step 150
Now create the isMonsterHit function. This will return a boolean value (true or false) to be used in your if statement. Return the result of the comparison Math.random() > .2.
function isMonsterHit() {
return Math.random() > .2;
}
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.
Category: Uncategorized
