All language subtitles for 077 Implementing Highscores.en_US1

All right.So let's now implement

the last missing functionality in our game,

which is the high scores.

And to really understand how the high score

should work in this game,

let's take a look at the demo again.

So let's reload the game.

And let's start here.

And so you see that the score starts at 19.

So let's try a couple of times to a low score.

Okay, so correct number two score is 10.

And the high score is now also set to 10.

Because this was my first game,

and so now this is also my new high score.

But now as I play again,

my score is of course, resetted to 20.

But now, if I do a better score, than this 10 here,

then that will become my new high score.

Okay, and that is going to happen as soon as I win the game.

So let's play again.

And to wish for a quick result.

And great, so now my score is 17.

And since that is more than the 10, that I had before,

that is now also my highest score.

Okay. Again because the current score is larger

than the previous high score.

And so that is now the new high score.

Okay. Now, right. And so basically,

what we just store here is now what we need to implement.

First off, we're gonna to need a

variable for the high score.

Right. So just like for the regular score,

we also need to store the high score in a variable.

So let, high score

and let's start this one at zero.

This way, the first score is always gonna be

the highest score,

because it's always going to be greater than zero.

Okay.So where do you think we should check

for the high score?.

So basically, if the current score

is greater than the high score?.

Well, remember that here the high score was set

as soon as the player won the game.

And so where is that in our code?

Well, it's here in this if block.

Okay, and so this is where we will check.

And to check that we will do,

as I explained previously,

is to ask whether the score is greater

than the current high score.

Right. And if it is,

so if our score of the current game is greater

than the highest score that we already had,

well, then the highest score will become

this new current score.

Right. So high score,equal score.

And that's it.

Now all we have to do is to display

that new high score here, in this element.

And actually, of course in our version of the game.

So right here.

So let's check the class name.

And it is called the highest score here.

So just this span,

So, document dot query selector.

And do remember, you should always write all of this here

by hand, to really put it into your brain.

So document dot query selector and dot high score.

And I have a problem writing score, apparently.

So text content, and this will be set to high score.

Okay, that's it.

This is the translation of the logic

that I just explained earlier.

So we need to have a high score variable,

so that we can keep track of it.

And then whenever our game finishes,

we check if the current score is

greater than the high score.

And if it is, that will become the new high score.

And so we set or high score variable

to the current score here.

Okay.

That's just to make sure we load it here.

And then let's play too high,Correct.

Oh now we have a very high score,

because we did it in our second guess.

Let me actually reload this page here.

So I want a really low, high score.

So let's try it again.

So I click a couple of times to decrease the current score.

Oh, and now we have a score of 14.

And you see the new high score is now 14.

Because it used to be zero,

but of course, 14 is greater.

And so 14 becomes our new high score.

Okay, and now as I click again,

everything will reset, except for the high score.

So that was the goal of having this button here.

So that we can play the game again,

but keeping the high score.

Because of course, if we reload the whole page,

then everything will be lost.

So the whole code will then run again,

and everything will reset.

But here, we now keep our high score, right.

So let's play again, and try to get a,

a better score here.

So that's too low,

17, maybe, and, yeah, now we get an even better score,

because of course, 18 is even greater than 17.

One last time now with a lower score,

just to see that it will then not become the new high score.

So we always need to test for all the scenarios

that we implemented in the code.

Just to make sure that everything works.

All 15 again, and so you see that the score was now 12.

But the highest score, of course, remained at 18.

Because this part here is now not true. Right?

Okay, so we implemented that as well.

And now our game is actually functional, it works just fine.

And you can show this now to a friend

and tell them that you built this on your own

with the power of JavaScript.

So how great is that?

So again, congratulations for making it to this point,

and for building really your first game using code.

Now, it's not really a sophisticated game,

but I still think it's a great achievement.

Now in the next video,

we will finish up and clean this code a little bit.

For example, this code here that we have in this scenario,

where the guess is too high,

is almost the same as we have here.

And so we can change that a little bit

to eliminate some of this duplicate codes.

There's also some other duplicate code

that we can get rid of.

And so yeah, let's do that in the next lecture,

because it's also important to really finish up

all applications and not just make them work.