Welcome back and in this lesson, this is our final lesson of the section where we're going to do a
quick code review and hope you had an opportunity to try this game out for yourself, build out your
own version of it, and always before you finalize the product, play through it several times just
to ensure that things are working as expected.
And as you can see, I'm fairly satisfied with the way that this game, what runs and whenever I do
the collision, then we run and we get game over and we also get our score.
So everything that we set out is in place so we can do a final code review now.
First, we came into this application.
We added in a bit of styling to present the game in better, better style format.
So that was all of this was just typical CSFs styling.
And this isn't this isn't necessary for the gameplay, as you know, that we started the original cars
were just squares and then we've been updating them throughout the gameplay.
So, again, this is optional and you can make your own version of how these cars look coming into the
HTML.
We didn't have a whole lot of HTML.
We tried to keep it to a minimal and tried to do as much as possible with JavaScript.
So we set up an element for score, we set up element for our game and then we had two different screens.
So we've got our start screen, which is this red box here, which gives us some instructions and also
tells the player what to do and how to start the game.
And then we have our main game area.
So this is where all of the magic happens and how we generate out all of our content within our JavaScript.
We came into the JavaScript creating some objects that connected to the elements, to our HTML elements.
So that made it really easy to connect to those and attach all of the different functionality that we
needed and the interactive and dynamic content we also needed to set up a few objects.
So we've got one for the player which tracks the speed and the score.
We can also add in other values if needed because it is an object and using objects keeps it nice and
neat within one package so that you can really easily access that.
And it makes a lot more sense when you're adding it into the code also for the keys.
So we generated another object for the keys.
By default, we set them all to false and these were all of the four different keys that we're tracking.
So we wanted movement for up, down, right and left.
So we needed to also track those if they've been pressed and if they've been released and take the appropriate
function within our gameplay.
For that, we needed to add in a few event listeners.
So one of the event listeners that we added in, we wanted a click start in order to start the game.
So that adds that functionality to that start screen as well as for the keys we needed to functions.
We needed one function that tracks when the player presses a key down, another one when the player
presses a key up and going into our object, we set up those keys tracking what the keys were set us.
So if we set the keys with the key value to true, we could also set them to force afterwards as well.
We also tracked the console log outputting the key values.
So this is actually not necessary for a finalized gameplay so we can remove that at this point.
So going into the key object, we're able to track which keys are pressed up and down.
Then going into our gameplay.
We were tracking our gameplay, so we have our start button, which kicks off the game and starts the
initial ization of the game.
So that was our start function where we need to hide the start screen.
We need to clear out the game area.
So in case this is a restart, we need to clear that out.
We also reset those values to true and to zero.
So the player start value is the one that's going to control all of the functionality.
So if this is true, that's when the game is playing.
If it's false that we're not going to play the game, the game stops in and play and basically it stops
the animation screen.
We also needed to generate the lines for our background.
So we went and we generated ten lines for our road to make it look more like a road.
Of course, we also initiated our play game request animation frame and this is going into a loop.
So we'll take a look at that as well.
We generated our car, so it's the white car there creating an element.
So that was a div set, an attribute of car, so connected it to the class of car.
So that gave us the styling and the image and so on and the basic width, height and position of.
Within the game area, then we added in the car on the game area, so that gives us the ability to add
it into the HTML of the object.
So see there there's our car.
We've generated that.
These are the lines that we generated and the top positions of those lines.
And as you can see, that once we start running the application, then these line values are going to
be changing dynamically.
We also have our enemies, so we generated three of them.
And this, again, was a generation of particularly a div, and we had to set some properties into the
div.
So those are within the styles there that you see that that's how we're actually moving the element
by adjusting the style, we create a random color for it.
And then once we've created it, we append it to the game area and you can see the enemies are generated
down there.
So they all have different top starting positions and they also different background colors and generating
the random colors.
We create a function that generates a random X value and we can see that again within the style that
these are just random color values that are generated.
So the mean action of this game takes place within the request animation frame where we're calling the
pre game function.
So going over to play a game, this is where all the movement of our application happens.
So first we were getting the car element, so selecting the element with a class of car so that we could
select that one that we've generated within that game area.
And then we had a couple of functions, one for moving the background lines, another one for moving
the enemy.
So take a look at those in a bit.
We got the road bounding area.
So that was so that we could use that for top and bottom.
We could have also generated these values as well for the road, the top and the bottom.
So this was an absolutely 100 percent necessary that we use to get bounden client rectangle.
But we were using it within the collision detection.
So it was a good practice exercise to start using and understanding what values we can get from this
JavaScript function down here is where we're checking to see if the player start is functioning.
And if it is, then we attach with the arrow keys what's going to happen using and updating value that's
contained within that element object.
So a Y and an X and then taking those X and Y values.
And this is where we were updating the style in order to match it with whatever the X and Y position
was, because it's a lot easier to update the X and Y position.
We could of course, have calculated moving the left and top, but then we'd have to do it multiple
times.
So this way was a little bit cleaner.
Next, we reinitiate the request animation frame and reinitiate that play games.
So it's going to continuously loop and run all of that function.
And then we've also updating our score as we're moving through and also updating the inner inner text
of the score so the player can see the score increasing.
And then all we're doing is going back to that play game.
And this is where all the functionality takes place.
We've got our move lines move enemy.
So those functions are sitting over here.
So we've got our move enemy and we're passing in that car element object because we need to make a collision
detection.
So instead of selecting it and using it again with document query selector, we just simply passed it
in.
Then we were grabbing all of the elements with a class of enemy.
So this makes that dynamic.
So if we had more enemies, we could grab all of them.
We loop through each one of those and we checked to see if there's a collision and if there is, then
we end the game.
Otherwise, we just we just continue with the movement of those cars.
And the other thing, too, that we're checking to see if the car has run off of the screen and if it
has that, we reset it to negative 600.
And we also reset the left position.
We reset the background color so it can look have a different background color and we can also have
a different left position.
And then after all of these conditions, so if these conditions are not true, then we skip directly
through updating the Y position of that element, and that means that we're updating the style and the
top position, just as we were with the players car.
The other one that we're doing is that we're updating and moving the lines.
So this one wasn't as complex where we're still doing the same thing, where we're using query selector
to select all the lines and looping through all of the lines within the node list.
We needed to check to see if the value of Y was off the screen greater than 1500.
And if it was, then we're subtracting 5500 from it and this keeps the lines within the same distance
apart.
So instead of setting a value, we're subtracting the 1500.
So if we had 15, 15, we would still end up with negative subtracted off of there.
So we'd still end up with a value that we could utilize and we would still have the same distance between
the lines, also increasing the player speed as by the player speed.
So this can be dynamic as well.
So we can increase the player speed, speed, and it will increase the way the lines move as well as
the enemies.
And we also had our item style that we were updating as well.
Now, one of the most important functions of this game was the collision detection, which we're using
within the move enemy, where we're taking that enemy object as well as the player object, which is
the car, and then the enemy object and checking to see if there's overlap between the elements on the
page.
And we're using that get bounding rectangle method in order to get the top left, right and bottom positions.
And then we were looking and comparing to see if the horizontal or the vertical top and bottom are overlapping
and again, the opposite of the top and the bottom of the opposite ones.
And if there's overlap there, then we know that there's a possible collision.
And if this one is as well a possible collision and this one as well, if it's a possible collision.
So taking all of these into consideration, notice that these are.
So if any of these are overlapping, then we know that we've got some type of overlap and we need to
take this into consideration as we return back that value.
And this is all contained within one statement here.
And if there is any overlap, then by default, we're toggling that value from false to true and returning
back a value of true.
And that means that we do have a collision between the elements and then we do the end game functionality.
Essentially, that was really the core of what we're doing, the end game was relatively straightforward,
where we have the player start functions, so we set that to false so we can stop running that animation
screen.
We output the score for the player so they can see what the score is.
And we also write Game Over.
And then we also have our START screen where we're showing that start screen button again so the player
can restart the game.
And we needed to make sure as well that when we're restarting the game, that we're clearing everything
out and we're preparing a brand new game again for the player.
So go ahead and try this out for yourself.
All of the source code is also included so you can copy, paste it, try it out, experiment with it
and get familiar with the content that we've covered in the previous lessons.
Thanks again for taking this section of the course.