This lesson, we're going to update the scoring, as well as create a brand new bad guy to take place
of the guy that we just removed.
So we already have that element selected as EA so he can use the main container object and then the
method in JavaScript, remove a child and then selecting that element.
It's going to give us the ability to remove it off of the screen.
So you can see that as we go over, they are disappearing.
So now they're all gone.
There's no more on the screen.
What we need to still do is add in because we do have four left that are waiting within the queue.
So we need to add those into our screen so we can do that when we do make bad.
And what this will do is this will create another bad guy.
So it's all we have to do to add that in and over here where we're making the bad guy, we're also checking
to see if the told her player bad guys is greater than zero.
So that's another factor that we can take into consideration to make sure that when we are creating
them that they are greater than zero.
Otherwise we're not going to create any additional ones.
So this will prevent other ones from being created.
So now we can try that out and we can see that as we clean these ones up, we're dropping them and we've
got the enemy left changes as well.
So that's all working.
But we still need a way to end the game.
And we did have a check here that we're doing and we're checking to see if the length is larger than
if it's equal to zero.
And if there are no enemies on the screen, that means that the game is over.
So we can run a function called end game.
And then within this function, this is where we can handle all of our game ending functionality.
We could also do this within that same function if one or two, but in this case, I usually like to
keep this separate again, one set in case you want to extend on the game.
It's always a good idea to have these functions separated out.
So we've got a function to end the game.
And that means that we want to take the message object and update its style properties.
So kind of the opposite of what we did when we started the game.
So set this to block.
And then we can also add in a message there, so text content and we can say game over.
Also, we want to take the button and update it style as well.
So setting its display properties to block so that we can see this the button.
And this is going to give us the ability to restart the game.
And then also we need to update the player in play.
To be false is what the play action to stop.
And we also might want to hide the player character as well as want to do that.
So that's another option.
But then you have to show him when you do the start.
Let's try this out and see how this works.
So we've got our start button and we collect all of the elements on the page.
And once they're all collected and they've all been picked up, we're ready to restart the game.
So we've got our start button and we can restart the game and the gameplay functions just as it did
before.
So we restart to zero and then we have to collect all of the enemies.
And once we do that, we have the ability to restart again.
So let's also add in that we're hiding and showing the basket element.
So that's another one that we want to add in when we start the game.
Let's take the basket and update that style display property to be block and then we're going to do
the opposite when we end the game.
And that means that what we want to do is we want to display it to none.
So we don't want that one to be visible on the screen, so it's a little bit better of a gameplay experience.
So go ahead and try that, add that into your project.
And coming up, we've got most of the gameplay taking place.
So next, we're going to do a few updates and tweaks.
We're going to randomize some of the wits of these elements and reset some of these values using JavaScript
as well as random colors.
So they're not all the same.
So that still is all yet to come.
And we can also randomize its its exposition as well.
So if we want to, we could reset that exposition every time it ends.
So that will create a little bit more of a dynamic effect.
So that's all still yet to come.