Original subtitles

Welcome to the last lecture of this project

and of this section.

And in this one, we're gonna implement

the functionality of resetting the game

at any point in time.

So what we're looking for,

when we click on this button here,

is to remove the the winner class

and to set all the scores

of all the players here back to zero.

So all the total scores, this and this,

and all the current scores should also be put back to zero.

So essentially, we need to set back

all the initial conditions of the game.

Now, we already did something similar

to this in our first game,

and so maybe this is a good opportunity

to leave this as a challenge for you.

And this one will be a little bit more difficult

than the one in the Guess My Number project.

But you can still try to do it.

So what I want you to do is when we click

on this button, as I just mentioned,

reset all the initial conditions of the game.

And it doesn't matter if your solution

will be dramatically different from mine, okay?

I just want you to try,

and I want you to write code on your own.

No matter if you'll actually achieve the goal

in the end or not, that is not point right now.

So just pause the video here, please.

And try to do at least part of this on your own.

So hopefully, you had a great time doing that.

And so let's now go back together here and do it ourselves.

So we need this btnNew,

and so once more, we will add an event handler on there.

So that's btnNew.addEventListener

waiting for a click, and then we want to execute

whatever happens here.

So as I said, we need to reset all the scores.

So let's start with that.

And I guess I already selected these up here.

So that is scoreEl0 and score1El, okay?

So these two scores, we want to set them back to zero.

Now actually, we already did that here,

so let's just copy it for now.

Okay.

Then we also need to set

all the current scores back to zero.

So that is current0El and current1El.

So current0El equal zero,

and then current1El also back to zero.

Next up, we need to remove the winner class,

so this dark class that we have here,

and now it's gonna disappear because as I move out

from this window, it will save and then it will reload.

So I'll only go half.

But you see this dark class, the winner class,

needs to disappear.

And so let's do that.

And so that should be player0El.classList.remove

and player winner.

Now of course, we do not know which player won the game.

And so we have to do this on both the player elements, okay?

And that's not problem at all.

So we already know that only one of these two elements

will have this class, but we can still tell JavaScript

to remove a class even if it's not there.

JavaScript will happily do that.

Then, next up, we also need to remove

the active classes on both players,

because again, we do not know at this point

which one is the active player.

So let's just remove them too.

Now, just copy it.

So player winner here is both active.

And then, we also need to set the first player

to be the active player.

So let's do that.

And in fact, let me just change the code here

in this line, because there's no need to remove it

from player zero, because, well,

player zero should be the active player in the beginning.

And so there's no need of removing it

and then adding it back.

So I will simply add it, all right?

And if it was already there,

then JavaScript will not add it again, okay?

So just like with removing.

So if the class is not there,

but we are still telling JavaScript to remove it,

it will not give us an error.

It will simply do nothing.

And if we add a class that's already there,

it will not add a second one.

And so here, it's not a problem.

So even if the class is already there

by saying add a player active,

we will not add another one, okay?

All right, and that's it for the visible part

of the user interface.

So we changed classes here and we manipulated the content.

But of course, we also need to set

our internal state variables back to the initial state.

So basically, what we need to do,

is to add these scores back to zero,

set the current score back to zero,

set the active player back to the first player,

and also basically start the game again

by setting playing back to true.

So what should we do here?

Should I simply take this code

and copy it to the other function?

And you already know the answer to this question, don't you?

So, of course not.

Instead, we will create a function

which contains this code, together with the code

that is already down here, okay?

And then we will create a new function with all of these.

And I'm gonna call this function init,

which stands for initialization.

So let me cut this code here,

and create this function here.

So again, calling init, which stands for initialization.

And this is once again just the function

that serves as a reusable piece of code,

so we need to know arguments here.

Okay, so this is the init function,

which will initialize our game.

And now, we also want this code in there as well.

And in fact, we want all of these code.

So all of the starting conditions

should now be set here in this init function.

So let's grab this and paste it here.

Okay, and now, these two are duplicate.

So they're already down here.

So this is the same as this and this,

so let's remove it from here,

and then let's move this one down a little bit.

Okay, and again I used option or Alt + arrow down

to move the line like that.

Give it some space here, and okay.

So this is our initializing function.

Now, when do we want this function here to be executed?

We want it in two situations.

So whenever we load the page for the very first time

or also when that button is clicked

that we were just working on, right?

So, of course, we need these scores

to be zero at the beginning, together with the current score

and the active player and all of that.

And so we used to have this code outside of any function.

And so it was executed right when the file was loaded.

But now, this code is inside of this function.

And right now, we are not calling

this function here at any point.

And so this code in here

will not get executed as the page loads, okay?

So right now, as we load the page,

you will see that it has this weird starting conditions

that it had initially, showing these random numbers

and showing the dice,

and nothing is gonna work now if I click any of this.

And so that's because our initial variables here

are not set, because this function does not run on its own.

And so as you might guess,

the solution to that is to simply run it.

So as we now load this script,

then JavaScript will find this function definition,

and then it will find this line of code

which runs the function.

And so then, by that time, all of this code here

will be executed and then our game will work just fine.

So let me show that to you.

And so now, we are back to looking normal

and our game should work.

Oh, and actually, nothing is working.

So let's take a look at the console.

But I can already guess what is happening, okay?

And so, yeah, we see here from these errors

that these variables are not defined.

Playing is not defined, and yeah.

But it's not the only variable that is not defined.

And so let me show you the error here.

So this error comes from something

that we already talked about very briefly before,

but I didn't really go into yet.

That's because in the next section,

we will really get deep into something called scoping, okay?

But let me just explain to you right now

that these variables that I defined here,

they're only available inside of this init function, okay?

So again, these scores, this current score,

this active play, and this playing,

all of these variables, I declared them in here,

inside of this function.

And so because of that, they are not accessible

outside of the function.

So we say that they are scoped to this init function,

because this is where I declared them.

And so the solution is to declare these variables

outside of any function but without any value.

And so it's then in the init function

where they will really be declared, okay?

And if that doesn't make 100% sense,

it will make after the next section

where we will really understand deeply

how scoping like this works.

Anyway, let's now declare these four variables here outside.

So I will use let now for all of them.

So scores.

And then remember, as we already did

in the fundamental section,

we can define a bunch of empty variables

by using commas here.

So currentScore, activePlayer, and playing.

So now, these variables, they basically live outside here.

And so what we do here then

is to essentially reassign them a value.

So we need to get rid of these lets here,

because that would then create new variables here.

But again, that's not what we want.

We want the variables, basically, to live out here.

And then, in the init function,

we only reassign their values.

So that's very different.

So declaring a variable is not the same

as assigning them a value, okay?

And so right now here, we only assign them a value,

but they still live outside here,

and that's why they are then accessible

in every function everywhere, all right?

And now, just to finish, we also need to use

this init function, of course, on the reload function.

So on this event handler here.

And so, just like before,

here, we now do not declare this anonymous function,

but instead, we pass in the init function,

which again is really just a value,

and so it's perfectly okay to pass this value

into this other function.

And just keep in mind that we do not call

this function here.

It is JavaScript who will call the init function

as soon as the user clicks on the new button.

And so now, everything will work just fine.

So we get five, we get five down here.

And let's hold it now.

And indeed, we moved to the other side.

And with this, we should win the game now.

So let's see.

Hold and indeed.

And now, here comes the test to see if this button works.

And indeed, it does, and we can restart the game

just like this.

This time, let's player two win the game here

just to see if it works there as well.

So that's enough points.

And indeed, it works.

But what matters is now that

as we click the new game button,

everything is back to normal

and player one is back to being the current player.

All right, great.

And with that, we actually finished the game.

Almost finished.

Let's set the threshold here back to actually 100 points.

So that is the limit here

on which we want this game to finish.

But with that, the game is ready

and feature complete and yeah.

I hope you're happy with it.

So congratulations.

Great job for making it to the end of this section.

That's already a really great achievement

and I hope that you can see

that you already learned a lot of new stuff here.

And now, you can go ahead and play this game

with your friends, and you can tell them

that actually, you coded this by yourself.

So the code you wrote on your computer

is what made this program possible.

It's what makes this really come to life, so to say.

So how cool is that?

And maybe even your friend

will then become interested in programming,

and you can do this journey together.

But anyway, with this,

we now really finished the fundamentals part of this course.

And once again, I really hope

that you can see that you already learned

a lot of new contents here in this last couple of hours.

So congratulations once again

and I'll see you in the next section,

which is really important, because there,

you're gonna learn how JavaScript

actually works behind the scenes.