This lesson, we're going to be creating a game over function and also doing some more dumb manipulation,
so let's create that function.
So this is what runs when the game is over.
We're passing a boolean value whether they won or lost within the screen function.
So we've got a game over and the game is over once the player wins.
So once they guess correctly, that's where the game is over.
So make sure you add that function in.
And we've got correct.
You guessed the number.
And we also want it to track the number of tries so we can set up the number of tries where we've got
game try or game guesses and setting that to zero.
And then every time the game guess increases, whenever they do, I guess value sets, whenever they
click in that, we're just incrementing up by one.
So this is a way of keeping score.
And we also want to so we've got correct.
You guessed number.
And let's add to that message.
Guesses for was higher, seven was higher and we know it's ten.
So sad that in so correct.
You guessed ten in three guesses.
There's also another thing that we can do to shorten our code a bit.
So we've got the message output.
We're updating the style of the element content and we can also pass in.
So we're every time we're updating the input, we're also doing that so we can save ourselves a little
bit of effort and add in the color.
And we could do the same as we've got either colour or black if there's no color being passed in.
So that's going to save us a few lines of code and still have that same functionality, whatever the
guess is correct.
We're going to update the color of the input was higher and we said seven.
If we go eight, it's lower and we see the colors are updating as well for the input.
We can also update the color of the button if we want to.
So how about we add that in as well?
And we do have the buttons selected in game BTN within the game and object.
So setting the background, background, color of the elements and we can use the same format where
it's either going to be black and then also updating the game button color of the game button to add
style.
Let's try.
That was lower, was lower, was higher and correct.
You guessed in two guesses.
Hide the button.
So when they get it correct, whenever the game is over, there's no more guesses.
We want to update the contents of that button.
So we've got the button.
We can update the style of the buttons.
So we go game over button updating the inner text or the inner HTML game.
And we also want to hide the input.
So we've got our game guests input and selecting style again.
And this one is the display property.
So we're setting that to display none.
Try that.
So we've got five was lower, so we know it's three in two guesses.
Maybe.
Let's also update that to try that again.
And sometimes you do need to play through it a few times just to make sure that you are doing it properly.
So correct.
Guess of one and two guesses restart the game.
So now we want to add and restart the game.
So let's all let's do this in an interesting way where we're going to add in a class and then check
to see if that class is there.
So call it class replay and maybe we want to add some additional padding to it.
And so when we win the game, then to this button.
So the game button, we're going to add a class so we can do that by class list and we've got options
to add, remove and toggle.
And then we just need to specify the name of the class that we want to add.
And so we go with the correct guess of five in two guesses restart game.
So we've added in the pattern the buttons a little bit different.
So next, whenever this button gets clicked, we want to check to see if it's a new restart game.
And the way that we can do that now that we have that class sitting in there, we can check to see if
it contains the class list.
So checking to see if this or we could specify the game button.
So both of them are the same object because the this refers to the element that invoked other so checking
to see class list and we can see if it contains a particular class in here.
So if it contains replay, then this is going to be a replay.
So if this is true, then we want to run this set of code and if it's false, then we're going to run
the other way.
So if it's true, if replay is true, what we'll do is we'll just cancel log so we can track that value.
So we're checking to see and making sure that our replay is working.
So we finish the game.
We've got to correct and whatever number of guesses.
And now when I click the button, it's not doing the guess anymore.
It's outputting replay into the console.
So this is where we can take our actions to reset the game.
The same thing, that kind of what we did within the IANSITI, where we reset the guesses, reset the
game number, where we're resetting these values, so we now we've got a new value for game.
We can also update the game minimum and maximum of what, as well as make the game harder or easier.
And the rest of the functionality is the same.
So we have to also show that input and we have to update the button contents.
So going in here and I'm just going to update it back to see guess within the button contents.
So that's going to say yes.
And instead of display none, it's going to display block so we can have the guess.
Again, one last thing that we need to do.
So we have to completely negate what we did within the game over so that we have the game functionality
back to our reset of the game functionality.
So setting that up and instead of adding, we're going to remove that class.
And you can see also if you do inspect, you can see that it does have the class within it.
So the class of replay is there and initially there's no class of replay.
So let's see if we get the guests properly.
So if we as soon as we get it properly, you're going to see that that button is going to have that
class added to it.
So now, whatever that class is there and if we click it, it's going to give us the ability to replay
and request that value.
And we should also update the content here just to ask the player to guess the value.
So the same information that we had within our initial and really we could just rerun in it because
we're setting all of this information here so we don't have to do it again and again and we don't have
to have the same values showing up there.
The only thing that's different here is that we're updating the button values.
So all of this is already contained within in it, so we don't have to do it again.
So now we are ready to try that and guessing.
So let's guess it correctly.
So we go restart game and walk through the gameplay that you want to have for the player.
So we've got the ability to restart the game.
Welcome to the game.
Yes, a number from one to zero and we're going to guess seven.
So we know that or we're going to guess four.
So seven is the value and we get it correct and then we can start the game again and notice that the
guesses went back to zero.
So there's one thing that we still need to do, and that's every time there's a guess, we need to clear
out that gas input value so we don't constantly have to have the same one.
We're going to just reset it back to Plank.
So now whenever we enter in a guess.
So we've got it in one guess that was a lucky one was higher.
And we know that it's ten.
So try that again.
Was higher.
We know that it's six.
So let's try seven lower and the number of guesses.
So everything seems to be working as we're expecting.
So coming up next, we'll do a few more game tweaks and just to make sure all the functionality is there,
and then we'll do a final run through of the court and add in some more of the door manipulation, handling
of the game end and also clean up some of that code where we can add the same functionality within the
functions instead of having to write them multiple times within your code.
If you're reusing functionality, use the functions to run the blocks of code.