Instructor: Now the time has come to finally
finish up our application with only
one small thing to do.
In this lecture, you will just learn
what a state variable is, how to use it
and also why to use it.
And this is really something about programming in general
and not just JavaScript.
So remember that the problem here was
that we can continue to play the game
even after we have a winner here.
So this starts to look really weird
and really not what we want.
So we need something called a state variable.
What is a state variable?
It's actually very simple, a state variable
simply tell us the condition of a system,
so that's the definition.
We need a state variable when we need to remember something
or the state of something.
In this case, this will be is our game playing
or is our game not playing?
So we will simply create a variable that tells us this
and that we can then use in our function.
Of course there are a lot of things that we only
want to do when the game is active,
when the game is playing, so let's do that.
Keep in mind that we want to use the variable
in a couple of places.
So imagine if we would just declare it here,
like saying var gamePlaying = true.
If we declare it here in this init function,
then will all the other functions have access
to this variable?
I know that you know that the answer is no
because it's a sculpt chain.
So all the functions to only have access to the global scope
or of course the scope of their parents.
So here, the init function is really the only function
that would have access to the game playing variable.
We need to define it outside, so right in the global scope,
and that's also the reason why all of these are here,
in the global scope.
I'm just writing it here gamePlaying.
Once again, I don't need to define it here,
I simply need to declare it here.
I need to say this is a variable that is defined here
in this scope so that I can use it then in other scopes,
in other functions.
So when we start our application, the game playing variable
will be set to true.
Let's now work through our functions here,
to our event listeners, one by one.
This one is for the event that happens when we hit
a roll button.
We create a random number, for the dice,
then we display and then we update the round score.
Now we only want all of this to happen
when the game is actually playing, right?
Which means that we don't have a winner yet.
That's because the game playing variable
will be false only after we have a winner.
So after this weird situation that we saw before, happens.
By then, we want it to be false.
But before, all the time during our game,
we always want this game variable to be true.
So, what can we do here is actually very simple.
All we need to do is to add an if statement here.
So if(gamePlaying) { we do something.
And why does it work like this, so why do we only
need the game playing variable here and nothing else.
It's actually very simple, that's because
the condition that the if statement,
the ones here is a true or false value,
and usually we use an operator here which returns
the true or false value, for example down here,
we check if (dice !== 1) {
and this returns either true or false.
But in this case, the game playing variable
is all ready true or false, so we don't need anything else.
Okay, so now all we want is to have this code
right here, so all this code is now wrapped
in this if statement, so all of this only happens
if the game is actually playing.
After the game is finished, we can push this button
as hard as we want and nothing's going to happen anymore,
because this will be set to false.
So let's actually set it to false before we forget it.
What do you think is the perfect place
to set this variable to false?
I'll give you a minute to do that by yourself.
All right, so I'm sure you figured it out.
The perfect place to set this variable to false,
is here, right?
So this is where we detect if a player wins a game.
So after he won, which is this condition here,
so when the score is greater then 20,
which I still have to set back to 100,
so right here, we will turn this variable to false.
So we say gamePlaying = false;
and that's it, that's all there is to this mechanism.
Simply setting our state variable to false,
will avoid this situation here.
Of course, together with this if statement here, right?
Now, what else do we have here?
Where is the other event listener?
It's right here, and once more we also want all of this
only to happen if the game is playing.
So we can only hold our points if the game
is actually active, right?
So we'll do the exact same thing here,
so if (gamePlaying) { do all of this stuff here
and of course there's nothing else,
because we don't want anything to happen
if the game is not active.
All right and that should be enough
to make our game work perfectly fine.
Eight, eleven, now this players' turn,
all right.
So we have a winner, we have 22 points
and let's see what happens
if we try to keep rolling our dice.
Nothing happens, the game has effectively stopped,
we can also not hold and let me check
if we have any bugs in our code.
Actually no, so no bugs here, so it's not working
because we blocked it with our code.
So our if statement is really working,
meaning that our state variable, game playing,
is currently false.
Now if I hit this new game button here,
then remember, the init function is called
and the init function sets our state variable, game playing,
back to true, so now it should be working again, right?
So let's hope it does work, and yes it does, great.
So another winner and again it doesn't work.
That's it, that's the end, this is your very first
JavaScript application, and it's fully functioning now
and it's really working great.
So now I hope that you're really proud of what
we have achieved so far together here in this course.
Especially in this really cool section.
You can play this game with your friends
and then tell them that you coded this by yourself.
How cool is that right?
Really, just go play this game with your friends
and let me know what they thought of the game
here in the comments.
I'm waiting for it, really.