19·6
2016
At the end of lesson 4 we get to build a small "dragon slaying" game. It also expands a little on the Math.random() command we learned about earlier (coin toss game).
I'm going to the experts on this. Mozilla explains Math.floor() like this:
The Math.floor() function returns the largest integer less than or equal to a given number.
Here's a sample of what Math.floor() would do with some numbers (the opposite of Math.floor() is Math.ceil(), there's also Math.round() which does traditional rounding.):
Original | Math.floor() |
---|---|
1.47 | 1 |
61.9 | 61 |
-1.3 | -2 |
0.3 | 0 |
Here's the little game. I'll break it down below:
var slaying = true;
var youHit = Math.floor(Math.random()*2);
var damageThisRound = Math.floor(Math.random()*2 + 1);
var totalDamage = 0;
while(slaying) {
if (youHit) {
console.log("Woohoo! You got him!");
totalDamage += damageThisRound;
if (totalDamage >= 4) {
console.log("Dude's dead! You are the winner!");
slaying = false;
}
else {
youHit = Math.floor(Math.random()*2);
}
}
else {
console.log("You suck! Get a job!");
slaying = false;
}
}
Math.floor(Math.random()*2)
- The first thing we do is
Math.random()
which gives us a number between 0 and 1. So 0.34 or 0.71 for example. - We want to be able to get either 0 or 1 specifically, so we need to do some rounding. That's what Math.floor() is for. Look, a rhyme. The problem is both 0.34 and 0.71 will become 0 using Math.floor().
- We take our random numbers and multiply them by 2, making them 0.68 and 1.42. Now Math.floor() will turn them into 0 and 1. Problem solved.
- I'm not sure why we don't just use Math.round(), I'm pretty sure that would work just the same. Maybe it's not as fair in the case of 0.5?
- The first thing we do is
- Settings up the variables
- The first variable is slaying. If it's true we're still trying to slay the dragon. If it's false we've stopped.
- youHit determines whether or not you were able to hit the dragon. It will be either 0 or 1 based on
Math.floor(Math.random() * 2);
- Our next variable, damageThisRound, decides how much damage we do. We can get 1 or 2 points. (See youHit).
- Our final variable is totalDamage which is used to keep the score.
- Step by Step
- We create an if statement that's true while youHit is 1 -
if (youHit)
- When we first run this code youHit gets assigned a random value -
var youHit = Math.floor(Math.random()*2);
. If the initial value is 1, it continues into the secondif/else
(if (totalDamage >= 4)
) inside the first if, otherwise it drops down to the firstelse
(console.log("You suck! Get a job!");
, in which case the game is over. - Next up we add the value of this round's damage to the total damage, introducing some new syntax (is this plus that) :
totalDamage += damageThisRound;
. - Now we test the second
if
where the total damage must be equal to or larger than 4 for us to win. This can only happen after at least 2 hits with a damageThisRound of 2. - If our totalDamage is not >= 4 the
else
runs and assigns a new random number to youHit. We're sent back to the firstif
to see if we get another try, or if the dragon killed us. - This keeps on happening until
damageThisRound >= 4
and we win, or untilyouHit = 0
and we lose.
- We create an if statement that's true while youHit is 1 -