All language subtitles for 007 Implementing the Game Logic

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.