Let's no continue a building our game
and actually implement the game logic itself.
And with game logic I basically mean implementing
the way how the game works.
So we need to implement what happens
when the guess is correct.
So when it's equal to the secret number,
we also need to implement
what happens when the guess is too low
or when it's too high.
So basically we have these three scenarios.
And to start we actually need to define that secret number.
Otherwise, there is nothing which we can compare
the guess to, all right?
Now, where do you think we should define that secret number?
Should we do it inside of this button handler
or should we do it outside?
Well, the answer is that we should do it outside
because we only want that secret number
to be defined once, so only when we start the application.
And so that's out here outside of the handler function.
If we define the secret number inside this handler function
then on each click, we would get a new secret number.
And so then the game would make no sense at all, all right?
We just need one number, which we can then compare
to each of the guesses this year on each click.
So let's define the number,
so I'm just gonna call it number here.
And now we need a random number between one and 20.
And this is actually pretty similar to the dice roll
that we did earlier in a fundamental section.
So we use math.random,
and so math is basically an object that JavaScript gives us,
and on there, we have a lot of different methods,
and random is one of them.
And it gives us a number between zero and one.
So let me show that to you.
So whenever I run this, it will give me a new number.
And it's always different from the one before.
Now if I want a number between one and 20,
I will start by multiplying this by 20.
And so now we have this decimal number here,
basically ranging between zero and 20.
But all this decimal here is just noise,
so let's removed that.
And for that, we use math.trunk.
And I'm doing all of this here in the console.
So you can see how this is building up, okay?
And so now I have a number which goes from zero to 19.
Because the result of this here will never really include
the number 20.
It might only include like 19.999999,
but now we're cutting off that decimal part.
And so we are now left with a number between zero and 19.
And so to elevate it to between one and 20,
all you have to do is to add one here.
And with this, we make sure that the number
is always between these two boundaries.
So let's grabbed is now,
so now that it works and put it here
and with is we have our secret number.
Now in the real game
the number will obviously be hidden.
So behind this question mark,
but now since we are still in development,
let's actually display the number here
so that we can then test our game logic as we develop it.
So let's select that number
and I think again we already did it before,
but let's do it here anyway again.
Adjust, so the class name is number
and then remember we use text content
and to set it, we simply use the equal sign.
And now what do we put here?
Well, just the number that we just calculated.
And now as I save it, watch what happens,
here we now have our random number.
And as I reload the page
you will see different random numbers appearing.
And again, for you of course, it will be different numbers.
And you see here 20, which is actually the maximum.
So this means that 20 is indeed included
in our range here.
Just to check if it's all right,
so if we don't see any weird numbers
but it all looks okay to me.
And so let's now move on and actually compare
the secret number to the users guess.
So here we already have the condition,
if there is no guess then just print
to the message element that there is no number.
So that's again, check that,
and indeed it works.
But now what if there actually is a guess?
So let's say Else-if,
and now we will actually check if the guess is the same
as the secret number.
And since I'm always saying secret number,
let's actually change the variable name.
So double click to select it,
and then I can double click on all of the instances
so that's this one and this one,
so that's a nice vs code trick.
And so now I have these three cursors.
So let's delete all of that secret number.
So the code works the same now
but the variable name makes a little bit more sense.
So let's create a code block here
and now we need to specify what happens
when the guess is correct.
So again, when the guess is the same as the secret number
that's essentially what the guess being means, all right?
So what should happen
then is that the correct number message should be displayed?
So let's copy that and put that here
and for now that's actually it.
So I'll just give it a safe now,
and so let's actually test this.
So five, which of course is different,
and then in the future we will want a message here saying
that the number is too high.
So we're gonna do that in a second.
But now let's just put the correct number here and indeed
we now get correct number.
So that's exactly what we defined here
in this Else-if block, all right?
So I hope all of that makes sense.
And now let's work on that scenario that I just mentioned
which is when the guess is greater than the number.
So you see that here in this big,
if else if her statement,
we are covering all the different scenarios
that might happen here to this number.
So the first one was the that there is no number
at all, right?
Then we checked if it's equal to the secret number,
and now we will check if it's greater.
So if the guess is greater than the secret number.
And then what would happen?
Well, let's again select the message .textcontent
and then let's say too high.
So the guess is too high now
and again adding an emoji here.
So I want this graph here, okay?
And now also, since we are working on this let's account
for the last situation or the last scenario as well
which is that the guess is lower than a secret number.
So guess below secret number,
and with this, we covered all the scenarios.
Let's just copy this one now, too low,
and now we're using the editor graph here,
give it a safe and let's test it.
So right now we know that it's at three,
so let's try at 12.
And so now we should see two high, and yes it works.
Now let's test one, which is too low and it works again.
And now let's test three, which is correct.
And indeed it's correct.
So that's working already.
Now let's move on to the next step
which is to work with a score here.
So remember that each time that we guess
a wrong number our score showed to decrease.
So let me show that to you again.
So let's say five and see how it starts at 20,
just like in our code, but now as I check wrong
so it's too high and now the score decreased to 19.
So let me check another one.
And so now you see that my number goes down each time
that I do a wrong guess.
And so let's implement that in our code here as well.
So as you see here, we start with a score of 20.
And now in these two scenarios where the guess is wrong,
so here where it's above and here where it's below.
We want to decrease that score by a one, all right?
Because again, each time that there is a wrong guess
the score should decrease by one.
So how should we do that?
And I can think of two ways of doing that.
The first way is to read the score from here,
then decrease it by one and then print it here again.
So that would be the first way of doing it,
but there is a better way.
And the better way is to actually create a variable
for the score in the code and then update that variable
so basically to decrease that variable
and then display the value
of that variable here in this score label.
And by doing that, we have our data also in the code
and not just on the DOM.
And so that's always a very good thing to do.
So let me do that now and then I will explain
it a little bit better.
So I'm gonna do that right here after the secret number,
so const score, and as you already know we start with 20.
And so that's our initial score.
So the value that we set to this variable.
And actually this should be a let,
because we will then decrease that value, remember.
And so it cannot be a const
because a constant is immutable.
Now, okay?
And now here let's go back
to the wrong guess scenario.
Our scenario was, because it's this one and this one
and then all we do is to decrease the score.
So score equal score minus one.
And maybe you already know, or hopefully you do,
that this is the same as writing,
score minus minus, all right?
So we decreased the score
and then all we have to do is to display
that score here in this element.
So once again, we already did that.
So no need to repeat.
So it's this one here.
So we select the element with the class of score
and then at the text content we give the score, all right?
And that's it.
Now we just need the same code
also in the other wrong scenario.
So where the guess is below the secret number.
So I'm just copying this code and putting it here,
give it a safe and a before testing it
let me again, explain what we just did here.
So as I said, we could have also stored
this score basically in the DOM.
And to do that we would always just read
this value from here.
So right from the DOM , then we could decrease that value
and then write it back here to the DOM
but then we would not have that value in our code.
So essentially our application would have no way
of knowing that score at all points.
And so it's always good to keep a variable
which actually holds the data in our code
and not just rely on the DOM to hold our data, all right?
And this variable here can also be called a state variable.
Because this score is part
of the so-called application state
which is basically all the data that is relevant
to the application.
And we could say that 17,
so the secret number is also part
of the state of our application, all right?
And so we want all the data always to be available
somewhere in our code and not just in the DOM , okay?
But always keep that in mind,
and so that is why we implemented a solution like this.
So whenever there's a wrong guess,
we just take the score that we already have in our code,
then we decrease it by one
and then we display that new score right here.
So let's reload, let's say 17.
And watch what happens to our score now.
And indeed it decreased to 19 and our number is too high.
And when I click again now,
you see it decreasing even more.
Now let's try with a lower number.
So too low and our score decreased again.
And actually let's keep going,
so let's keep clicking here and watch what happens.
So I'm clicking over and over on the same button here
and the score keeps going down and eventually we reach zero.
And at this point
we should basically lose the game, all right?
But as you see here, nothing of course happens.
And we can keep clicking here and go until affinity
and our program we'll of course not care.
Because our program obviously has no idea of losing
or of winning the game, all right?
It is completely on us to write all that logic.
So basically what this means
is that all of this checking here,
so doing all this here should only happen whenever the score
is still above zero.
And then when the score is actually zero,
then we should get some kind of message here saying
that we lost the game.
So let's quickly do that here, inside of this scenario.
So basically we need another if statement here inside
this already Else-if block.
And that's of course not a problem at all.
We can perfectly have one if inside of the other.
So what I was just saying is that this here,
all of this should basically only happen
while the score is still above zero.
So let's do that.
So if score is above zero
only then do all of this, all right.
And now Else, so basically if it is zero,
then we want to display another message.
So we want to say you lost the game with some losing emoji.
So I'm gonna use this one here,
so that's an explosion I believe.
So let's test that now.
And we only implement this for when the guess
is above the secret number.
So let's now use 12, it's too high
and now let's keep going to test what happens.
So we are approaching it now
and now we lost the game.
But actually I could click twice
as my score was already zero.
So try this for yourself, I will just reload here,
and again put a number that is above.
So now the score is one and as I click,
we should get a message you lost the game.
So let's try and it didn't happen yet.
And it did not happen because the score
was indeed still a greater than zero here, all right?
So we need to change that to greater than one, okay?
So again, a larger number.
Now I get one and if I click now you lost the game.
And all we need to do is to update the score to zero here.
So let's just copy this, write zero,
and then before we test it we can actually copy
the same code to this other scenario.
Now, as you can see, we are creating a lot of duplicate code
and we will fix that by the end of this project.
But for now, let's just keep working on this.
And the only thing that really changes here is this message.
So you'll see that here is some potential
to eliminate duplicate code.
But again we will take care of later off that,
for now let's just make it work, okay?
And with this I think we're actually finished.
Let's just test it.
So five is too low,
so let's keep going down and you lost a game, great.
Now let's test a larger number
and I keep clicking here and now we lost the game too.
Great, so our game logic is already working
and actually the game itself
is also kind of working already.
There's just two things that are missing here
which is the high score and this play again button.
But before implementing that functionality,
in the next video we're gonna talk
a little bit about CSS
and how we can manipulate styles using JavaScript.