Congratulations on making it this far, and now it's time to wrap up this section by doing a quick code
review and making sure that our game is playing as intended.
So we'll see when we start up the game.
We've got a start button.
We've got a score of zero.
So that looks right.
Let's hit the start button.
We've got a target down there at the bottom.
We can drop a number of bombs.
And the objective is really to hit our target with some of the bombs until we hit that.
And always we're decreasing the score.
The score always ends up going at the lowest to zero and everything seems to be working as intended.
We can start the game again once we hit enough of the target.
So let's now take a look at our source code.
So we started out, we created a bunch of we added in styling in order to style our elements on the
page so we could use these classes and easily apply a bunch of styling to each one of the elements that
we're creating dynamically.
We set up our HTML structure in order to house all of our gameplay.
So we needed an area to output a message, a scoring area and our main game area.
We selected those elements and place them into JavaScript objects added.
Add a bunch of event listeners that we utilize within the gameplay.
We also had some global objects that we created that we were making use of throughout the gameplay.
Once we hit the start button, that triggered everything and that created all of the gameplay.
So what that did is it hit that initial start area.
It also created our player, our main player stats and information.
It created an element on the fly.
So that's our plane that we're going to be maneuvering around.
It also then added it into our game area and it recorded our player information.
So X and Y, which we could utilize later on as well, and then started the game animations.
So the request animation frame that started the whole animation under a function called play game.
So as we move to play a game, we continuously look through and we check to see what the key object
is.
And the Keys object is the one that contains any of the key clicks.
So we were setting those key clicks on press on press off, and we're updating those values that are
contained within the Keys object.
And then this is where we're utilizing that.
So we're checking to see if the spacebar is clicked.
And if it is, then we make a EUBAM.
We are also checking to see if we're in play and if we are that we know we need to move the bomb.
So we make them and we also need to animate them.
So have them moving down.
We added in all of the key checks and these keys also with the condition to making sure that we're within
our boundaries.
And if we are, then we update the value of either player X or Y accordingly.
And we also, by default, are updating our player X values.
So that makes its speed across the screen.
So always moving forward, we check to see if we've gone off the game area with and if we have, we
reset it back to zero and we subtract something off the score and then up to updating more of the score
values.
And then finally, we're updating the style properties of the plane element that we created and we're
updating the left and top positions of those using the player X and player Y values.
And then we're reinitiating that animation frame.
So recalling again play game so that it loops through.
So it's constantly looping through this function.
And the main controller here is this player in play.
And as long as that's true, then we have all of our actions.
But if we have an end of the game, so we've got our end game function, that's going to set the inplay
to false.
So that's going to immediately stop all of the additional animations.
And we're also removing the class of hide so that we're showing that start button again.
So that's our end game function.
We've got a few other ones here where we make an enemy.
So this is the enemy base, essentially our target within the game.
We're also decreasing it.
So this is player levels, the number of targets that we have, as long as it's greater than zero,
then we're not ending the game.
But if it's if it is if it is less than zero, then we do end the game.
Otherwise, we update and we create a player base.
We create a next player base.
And this has some random lesson there.
So it's not always showing up at the same spot as well as it's not always the same height and width,
but we still are always adding that class of base.
And this is crucial in order for us to be able to determine if a collision has taken place.
We're making bombs when you press the space bar and we're limiting the number to less than the total.
So otherwise the player can't create anymore.
Every time we make a bomb at.
Decreases off of the score and we're also updating our total bombs, we're updating the active bombs
and the active bombs because we do have a limit on how many can be active at one time.
So we're keeping track of that.
And then once we've got all of those variables, we create the element, just as we did with the plane.
We add an inner tumults.
What's the bomb score?
We set the X and Y positions to match the player X and Y positions, and then we update the bomb style
properties to match the X and Y positions.
And then we added into our game area.
So that's adding those in and to limit the player from not having to be able to place them nonstop.
So we added in a half second interval between the spacebar so you can hold the spacebar down, but you
won't be able to create any.
That's the time frame is half a second.
So five hundred milliseconds that we needed a way to move them.
So we launch a function here, move bomb and that gives us the ability to move them.
We select all of the elements within our document that have a class of bomb.
We loop through all of those elements and then this is where we're moving them.
If they're larger, if the Y position is larger than a thousand, then we subtract active bomb and we
remove it from our gameplay area and we also check to see if a collision has taken place.
So if a collision has taken place, we using our collision detection function.
And if this comes back true, then we know that it's been the target's been hit.
So we increase the score, we decrease the active bomb, we remove the base and we remove the bomb from
the screen area and then we make another enemy.
So that makes the game continue.
And over here again, where we're making the enemies, we're decreasing the level.
So we eventually run out of enemies and then the game is over.
So that's essentially all of the gameplay.
And I do encourage you to try out the functionality for yourself, build your own version of this game,
extend on it and have some fun with JavaScript.
Thanks again for taking the course.
And as always, I'm always happy to help clarify any content and the source code is provided so you
can try it out for yourself.