This lesson we're going to be introducing how we can end the game and one of the best ways to do that
is to have a value that's going to be true.
So boolean value, if the game is in play and then we set it to false, well, we want the game played
to stop.
And the way that we can also do that is we're going to wrap our play game function to check to see if
player in play is true and if it is the winner take all these actions.
And if it's not true, well, then nothing is going to happen.
So that gives us the ability really easily to end the game.
So we go to game over, we're going to we can call it play game over function and let's create that
one.
So within here, we'll take our function and this is what we're going to launch whenever the game is
ending.
So the first thing that we want to do is take our player in play value and set it to have a problem
with one of the calculations that we're not able to get the bird offset top and we can always use the
player y value in Head Start.
And we see that the game automatically stops when we hit the bottom of the screen.
And this is where our game is over and we can continue to add in our game over functionality.
So adding in our game message.
So just as we had our class list and we added a class of hide, we're going to do the opposite here.
We're going to add the class of remove.
We're also going to take the bird object, let's pass in bird so we don't have to call out to it again
and we'll pass in the current bird object, or we could just create another variable and do another
query selector of the bird element.
This is a couple of options there that we could do, but we're going to pass it in and we'll just call
it bird.
And taking that value can set the attribute and taking the style attribute.
I'm going to add in a trance form rotate and we'll flip them upside down.
So whenever he crashes, then he's just going to flip upside down.
And then in the game message area, we can update the inner HTML since we're showing the game message
and here we can write a message.
So game over.
And it's HTML.
I'll make this bigger because it's going to be a long statement, so you scored and here we can output
for the player, the player score so they can see how much they scored.
So let's try that out.
So now when we refresh, we hit start and we hit the bottom.
There we see that the bird turns upside down because we hit the bottom of the available screen area
and we get our message to start again so you can press the start again and we're actually creating another
bird.
There's a little bit of a problem there, a little bit of a bug there.
So just as we're hitting start, that means that we need to clear out a few things.
And one of the things is we've got to clear that game area.
So before we write to it, let's take the game area and clear out our inner HTML just to be blank so
we don't have any content in there.
And try that again.
Suppress press start.
So now we can run multiple times, as many times as we want and also want to update some of the styling
of that message area because it doesn't look good there.
And let's add in some styling to the message area.
So it looks a little bit better.
And we can position this absolute so that we have more control of where we're setting it.
So within the top and we'll make it fully dynamic.
So text aligned center align and we'll move it left 20 percent and set its width to be 60 percent.
So it doesn't matter what size of a screen we're always going to have, it's centered and we can set
a background color.
And how about we set a bigger font size?
So to see what that looks like.
So try that.
So there we go.
We got game over.
You scored thirty one click here to start again.
Game over.
You scored thirty one click here to start again.
So everything is working as expected.
So go ahead and try this out, try it within your own application as well and create the ability to
end the gameplay.