Welcome back, this lesson, we need a way to end the game, previous lesson, we set up the aliens,
they're moving along, they're updating the success is being updated, the position of the elements.
And you see that they actually do go below the bottom of the container and we don't want that.
So whenever the aliens hit the bottom, that means that the game is over.
So in this lesson, we're going to add in the functionality to detect if the game is over and the player
lost.
We can detect this as we're moving the elements and each one of these elements were looping through.
So this is all of the elements with a class of alien are included in here.
And as we're updating the position, this is the place that we can check to see where the position of
L is.
So if L.
Y position is actually going to be greater than and this is what we're going to be looking at, the
positioning of the my ship and we can get a value of offset top position for that.
So now whenever the aliens cross over that top position of where the ship is located over, then that
means that it's game over and will add in the functionality for that.
So first, let's try that out.
And you can see that the aliens are coming down.
And during testing, you can also update some of the speed if you want.
So if you want the aliens to move three times faster, you can see you can update that.
And so when they get down to where that position is, we see that game over is being invoked.
So that's where the game needs to end.
And you can also make it a little bit above where the offset is.
So if you wanted to, you could take that offset and you can subtract 20 off of it and that will move
it slightly above.
So that will mean that if they reach offset because the bottom the top position of it is here.
So maybe we want to start it up minus 20 or something like that because we don't want them coming that
close to the ship.
So you can also update these variables as needed.
This is where the game over should function.
And we also have that player object where we've got the game over function.
So setting the game over to true and we can invoke our game over functionality so this can run and setting
this up as a function.
So game over function, we just simply run our game over function.
We're already setting the game over option within player values.
So next, let's create a function that's going to handle the game over functionality.
So what do we want during game over?
You can create some functionality that can happen when the game ends and typically this is going to
be opposite of what you do when the game starts.
So I'm going to move this closer together where we've got the game start function or we've got the start
game and the game over is going to prep in order to be ready once again for the game start.
So game over is true right now.
So that means that we should display the start button again.
So just as we did none, let's display blocked.
So the start button again can update the information within that start button.
So there's a few different options that are available to us.
I'm going to update the inner HTML and we can say restart new game.
So see how that looks.
So now when the aliens reach where our panel is located, we've got game over.
And we also noticed that the game update didn't stop.
So we need to handle that as well.
So with game over, we want to stop the iteration of the gameplay.
So do a check just to make sure that player game over is not true.
And if it is, then we won't launch into this.
And you can also wrap all of the update if you want, within this.
So meaning that if we do run a game over, then we're not going to run any more functions.
So now let's see how that works.
So now the game should stop whenever one of the aliens passes over that area.
And you can see now that alien has crossed over.
So it is game over.
We get our message restart new game and we have the ability to restart the game.
So we need to also when we restart, there's a few things we need to account for, and that's one of
them is clearing out the current aliens.
So whenever we click start game, we can clear out all of the aliens.
And it's going to look better if we remove all of the aliens as we restart the game.
So we'll do a quick loop through and we can use the same loop that we have here going into our start
game.
And what this will do is this will clear the aliens and we can also set up a separate function for that.
So clearing aliens and what this will do, loop through all of the aliens.
And we simply need to remove them from the visible area because that's what's preventing us from restarting
the game.
And maybe we want to show the aliens where they left off last.
So we start the game.
First thing that we're doing is running clear aliens, and then we're looping through all of the aliens.
And we don't have to do this backwards.
We can if we want, of course.
So taking Camp Aliens length.
So while X is less than aliens length, and here we'll just increment X so as we loop.
Through the temp alien's index value of X, we're selecting the element and then what we're doing is
taking the parent node, so moving up one level to whatever the parent is.
And we know in this case it's container.
So in order to have the flexibility, we're not going to specify what the parent is.
So this will give you more dynamic capability in case you make some changes to the core.
And then we're removing a child and the child that removing is the one that's going to match the temp
aliens.
So the element content.
So see what happens now.
So we restart the game and our game is over.
So we have an option to restart and everything is working once again, restart.
And it usually does take some debugging and testing through just to make sure everything is working.
So the thing that we need to add in, we need to add in the ability to actually shoot the aliens and
using collision detection.
So that's going to be coming up in the next lesson.
So go ahead and add in the ability to end the game, check for where the alien position is on the vertical.
And if they've crashed through the bottom of the container, then that means that the game is over.
And we could also end this a little bit sooner as well, where we could adjust instead of negative 40,
it could be negative 50.
And you can see that depending on where you want it to end, we can end it before they even get to the
bottom.
So that's all up to you.
So add that in and then also add in that option to clear out the aliens when we restart the game and
add in the end of game functionality.