We need to add in some scoring into the game, as well as a way to end the game, so we know that we've
got once we've got a collision, that's when the game is over.
So starting out with the scoring, let's update and add in the score for the game.
We've already got a score element on the page and we've already connected it to a value of score.
And within the player set up, I'm also going to set up a value of score set as default.
And then when we start the game, what I want to do as well is take that value and set it to player
score is going to be equal to zero.
So this is our starting position of the game.
So once the game is in play, every time we loop through, I want to update the score.
So every time we're running through that function play game before we conclude, I want to update the
score.
So let's add that value in.
So that's player score and we're going to increase it by one.
And then using the score object, we're going to update the entire text of that element to equal whatever
the value of player scores.
So try that and we see that we've got our score calculating their.
Add in a little bit of styling for that score, so background, color and also the background color
to be black.
Also, let's set up a height for that.
So height of and text a line will center text a line that value.
And also we need to actually see the score.
So let's update the color of the score to be white.
So we've got our score value, and that's always increasing and we can also update that to say score
to make it more evident what it is that we're outputting there.
So as we're playing the game.
Score.
And increasing the players score.
What's it going to make the text a little bit bigger as well, and of course, you can style this as
needed.
So just some default staling.
And also, I always like to add in the font family so we could and as fantasy.
So we've got our skort score ever increasing in value, and then once we hit the collision, that's
where we want to stop the game.
We lost all of the gameplay.
And we do have a function in order to handle the end game, so let's create that so end game function.
So we've got our hit and at this point we want to end the game.
So when we start the game, ending the game is going to be fairly opposite to that.
So we're just going to build that down here where we've got the start button.
So function.
And game to generate that end of the game, so player start is now going to be false.
So that's going to stop the looping.
And where we've got that animation frame, so it's going to stop it from continuously looping through,
so try that and make sure that we do have a way of ending the game.
So that's our essentially our game ending part there.
We can also update our message.
So our score and in our HTML can say game over.
And I had to line break their score was and then whatever the value of score is going to be, and that's
again held in player score.
So we've got our score score was 104 and game over, so we've got all of the messaging that we need,
I got to make this a little bit bigger because it looks like it's running out of the overlap there.
So the score again or just that slightly.
And sometimes that is the case where you do need to make adjustments at.
So now what I want to do is I want to add the ability to start the game once again, and we can do this
in a number of ways that we want to have the ability to initiate, again, a brand new start screen.
And I'm going to create a button in order to accomplish that so we can add that into our score area,
or we could simply add that on top of our start screen that we hid when we pressed the start button.
And instead of hiding it, we're going to remove that class of hide, so we'll have our start screen
once again.
So once we have our collision, we get our welcome message again.
And I want to update some of the styling for that, I'll do a margin auto so that it centers the content
and for that we also need a width as well.
So it's set up to 300 pics.
Try that it.
Welcome message and see what happens, we'll get a collision.
So there we go.
We've got our welcome message again showing up there.
Instead, a welcome message.
And so there we go.
So we've got all of our gameplay and all of our score and our information being output into our.
So go ahead and add this end game function into your game, and we should also have a way to start the
game again.
And as you can see, it's not really starting well.
So that means that we need to remove quite a few elements when we hit the start game just to make sure
that everything is emptied out.
So going into our start game and we're going to take care of this in the upcoming lesson so that we
can actually restart the game by clicking the button.
And we've got a few things that aren't working exactly as needed.
So we need to take care of those in the upcoming lessons.
That's still to come.