1 00:00:00,150 --> 00:00:05,310 Welcome back and in this lesson, this is our final lesson of the section where we're going to do a 2 00:00:05,310 --> 00:00:10,830 quick code review and hope you had an opportunity to try this game out for yourself, build out your 3 00:00:10,830 --> 00:00:17,490 own version of it, and always before you finalize the product, play through it several times just 4 00:00:17,490 --> 00:00:20,760 to ensure that things are working as expected. 5 00:00:21,000 --> 00:00:26,850 And as you can see, I'm fairly satisfied with the way that this game, what runs and whenever I do 6 00:00:26,850 --> 00:00:31,410 the collision, then we run and we get game over and we also get our score. 7 00:00:31,650 --> 00:00:36,420 So everything that we set out is in place so we can do a final code review now. 8 00:00:37,110 --> 00:00:39,180 First, we came into this application. 9 00:00:39,870 --> 00:00:45,330 We added in a bit of styling to present the game in better, better style format. 10 00:00:45,930 --> 00:00:49,830 So that was all of this was just typical CSFs styling. 11 00:00:50,010 --> 00:00:57,480 And this isn't this isn't necessary for the gameplay, as you know, that we started the original cars 12 00:00:57,480 --> 00:01:01,220 were just squares and then we've been updating them throughout the gameplay. 13 00:01:01,560 --> 00:01:07,890 So, again, this is optional and you can make your own version of how these cars look coming into the 14 00:01:07,890 --> 00:01:08,700 HTML. 15 00:01:08,940 --> 00:01:10,590 We didn't have a whole lot of HTML. 16 00:01:10,590 --> 00:01:15,270 We tried to keep it to a minimal and tried to do as much as possible with JavaScript. 17 00:01:15,510 --> 00:01:22,410 So we set up an element for score, we set up element for our game and then we had two different screens. 18 00:01:22,530 --> 00:01:28,680 So we've got our start screen, which is this red box here, which gives us some instructions and also 19 00:01:28,680 --> 00:01:32,010 tells the player what to do and how to start the game. 20 00:01:32,010 --> 00:01:33,930 And then we have our main game area. 21 00:01:33,930 --> 00:01:40,530 So this is where all of the magic happens and how we generate out all of our content within our JavaScript. 22 00:01:40,980 --> 00:01:47,880 We came into the JavaScript creating some objects that connected to the elements, to our HTML elements. 23 00:01:48,150 --> 00:01:54,390 So that made it really easy to connect to those and attach all of the different functionality that we 24 00:01:54,390 --> 00:02:00,350 needed and the interactive and dynamic content we also needed to set up a few objects. 25 00:02:00,600 --> 00:02:04,320 So we've got one for the player which tracks the speed and the score. 26 00:02:04,500 --> 00:02:11,070 We can also add in other values if needed because it is an object and using objects keeps it nice and 27 00:02:11,070 --> 00:02:15,390 neat within one package so that you can really easily access that. 28 00:02:15,540 --> 00:02:21,140 And it makes a lot more sense when you're adding it into the code also for the keys. 29 00:02:21,510 --> 00:02:24,300 So we generated another object for the keys. 30 00:02:24,450 --> 00:02:30,900 By default, we set them all to false and these were all of the four different keys that we're tracking. 31 00:02:30,900 --> 00:02:34,770 So we wanted movement for up, down, right and left. 32 00:02:35,310 --> 00:02:41,430 So we needed to also track those if they've been pressed and if they've been released and take the appropriate 33 00:02:41,430 --> 00:02:43,260 function within our gameplay. 34 00:02:43,260 --> 00:02:46,310 For that, we needed to add in a few event listeners. 35 00:02:46,560 --> 00:02:51,810 So one of the event listeners that we added in, we wanted a click start in order to start the game. 36 00:02:51,810 --> 00:02:59,190 So that adds that functionality to that start screen as well as for the keys we needed to functions. 37 00:02:59,340 --> 00:03:05,160 We needed one function that tracks when the player presses a key down, another one when the player 38 00:03:05,160 --> 00:03:14,750 presses a key up and going into our object, we set up those keys tracking what the keys were set us. 39 00:03:15,030 --> 00:03:23,990 So if we set the keys with the key value to true, we could also set them to force afterwards as well. 40 00:03:24,480 --> 00:03:28,950 We also tracked the console log outputting the key values. 41 00:03:28,950 --> 00:03:34,260 So this is actually not necessary for a finalized gameplay so we can remove that at this point. 42 00:03:34,770 --> 00:03:39,930 So going into the key object, we're able to track which keys are pressed up and down. 43 00:03:40,350 --> 00:03:42,690 Then going into our gameplay. 44 00:03:42,960 --> 00:03:49,530 We were tracking our gameplay, so we have our start button, which kicks off the game and starts the 45 00:03:49,530 --> 00:03:51,650 initial ization of the game. 46 00:03:51,960 --> 00:03:56,610 So that was our start function where we need to hide the start screen. 47 00:03:57,210 --> 00:03:58,740 We need to clear out the game area. 48 00:03:58,740 --> 00:04:01,890 So in case this is a restart, we need to clear that out. 49 00:04:02,070 --> 00:04:05,760 We also reset those values to true and to zero. 50 00:04:05,940 --> 00:04:11,040 So the player start value is the one that's going to control all of the functionality. 51 00:04:11,040 --> 00:04:14,010 So if this is true, that's when the game is playing. 52 00:04:14,010 --> 00:04:20,070 If it's false that we're not going to play the game, the game stops in and play and basically it stops 53 00:04:20,070 --> 00:04:21,210 the animation screen. 54 00:04:21,840 --> 00:04:26,130 We also needed to generate the lines for our background. 55 00:04:26,730 --> 00:04:32,130 So we went and we generated ten lines for our road to make it look more like a road. 56 00:04:32,130 --> 00:04:40,950 Of course, we also initiated our play game request animation frame and this is going into a loop. 57 00:04:40,950 --> 00:04:42,450 So we'll take a look at that as well. 58 00:04:42,990 --> 00:04:48,130 We generated our car, so it's the white car there creating an element. 59 00:04:48,130 --> 00:04:53,580 So that was a div set, an attribute of car, so connected it to the class of car. 60 00:04:53,760 --> 00:04:59,650 So that gave us the styling and the image and so on and the basic width, height and position of. 61 00:05:00,490 --> 00:05:06,460 Within the game area, then we added in the car on the game area, so that gives us the ability to add 62 00:05:06,460 --> 00:05:09,490 it into the HTML of the object. 63 00:05:09,500 --> 00:05:11,230 So see there there's our car. 64 00:05:11,410 --> 00:05:12,460 We've generated that. 65 00:05:12,550 --> 00:05:16,290 These are the lines that we generated and the top positions of those lines. 66 00:05:16,540 --> 00:05:22,330 And as you can see, that once we start running the application, then these line values are going to 67 00:05:22,330 --> 00:05:23,980 be changing dynamically. 68 00:05:24,520 --> 00:05:28,230 We also have our enemies, so we generated three of them. 69 00:05:28,690 --> 00:05:35,800 And this, again, was a generation of particularly a div, and we had to set some properties into the 70 00:05:35,800 --> 00:05:36,100 div. 71 00:05:36,340 --> 00:05:40,720 So those are within the styles there that you see that that's how we're actually moving the element 72 00:05:40,990 --> 00:05:44,110 by adjusting the style, we create a random color for it. 73 00:05:44,260 --> 00:05:49,210 And then once we've created it, we append it to the game area and you can see the enemies are generated 74 00:05:49,210 --> 00:05:49,660 down there. 75 00:05:49,780 --> 00:05:55,730 So they all have different top starting positions and they also different background colors and generating 76 00:05:55,730 --> 00:05:56,710 the random colors. 77 00:05:56,710 --> 00:06:02,560 We create a function that generates a random X value and we can see that again within the style that 78 00:06:02,560 --> 00:06:05,170 these are just random color values that are generated. 79 00:06:05,590 --> 00:06:11,290 So the mean action of this game takes place within the request animation frame where we're calling the 80 00:06:11,290 --> 00:06:12,410 pre game function. 81 00:06:12,760 --> 00:06:18,080 So going over to play a game, this is where all the movement of our application happens. 82 00:06:18,670 --> 00:06:25,720 So first we were getting the car element, so selecting the element with a class of car so that we could 83 00:06:25,720 --> 00:06:29,260 select that one that we've generated within that game area. 84 00:06:29,530 --> 00:06:34,660 And then we had a couple of functions, one for moving the background lines, another one for moving 85 00:06:34,660 --> 00:06:35,250 the enemy. 86 00:06:35,290 --> 00:06:36,900 So take a look at those in a bit. 87 00:06:37,510 --> 00:06:41,560 We got the road bounding area. 88 00:06:41,770 --> 00:06:45,300 So that was so that we could use that for top and bottom. 89 00:06:45,460 --> 00:06:49,930 We could have also generated these values as well for the road, the top and the bottom. 90 00:06:50,470 --> 00:06:55,660 So this was an absolutely 100 percent necessary that we use to get bounden client rectangle. 91 00:06:55,810 --> 00:06:58,570 But we were using it within the collision detection. 92 00:06:58,780 --> 00:07:05,650 So it was a good practice exercise to start using and understanding what values we can get from this 93 00:07:05,800 --> 00:07:11,530 JavaScript function down here is where we're checking to see if the player start is functioning. 94 00:07:11,680 --> 00:07:19,480 And if it is, then we attach with the arrow keys what's going to happen using and updating value that's 95 00:07:19,480 --> 00:07:21,820 contained within that element object. 96 00:07:22,000 --> 00:07:26,200 So a Y and an X and then taking those X and Y values. 97 00:07:26,350 --> 00:07:32,620 And this is where we were updating the style in order to match it with whatever the X and Y position 98 00:07:32,620 --> 00:07:35,740 was, because it's a lot easier to update the X and Y position. 99 00:07:35,920 --> 00:07:40,960 We could of course, have calculated moving the left and top, but then we'd have to do it multiple 100 00:07:40,960 --> 00:07:41,380 times. 101 00:07:41,530 --> 00:07:43,110 So this way was a little bit cleaner. 102 00:07:43,420 --> 00:07:49,090 Next, we reinitiate the request animation frame and reinitiate that play games. 103 00:07:49,090 --> 00:07:52,450 So it's going to continuously loop and run all of that function. 104 00:07:52,720 --> 00:07:59,170 And then we've also updating our score as we're moving through and also updating the inner inner text 105 00:07:59,170 --> 00:08:01,990 of the score so the player can see the score increasing. 106 00:08:02,410 --> 00:08:05,170 And then all we're doing is going back to that play game. 107 00:08:05,170 --> 00:08:07,300 And this is where all the functionality takes place. 108 00:08:07,510 --> 00:08:09,820 We've got our move lines move enemy. 109 00:08:10,000 --> 00:08:13,000 So those functions are sitting over here. 110 00:08:13,180 --> 00:08:19,270 So we've got our move enemy and we're passing in that car element object because we need to make a collision 111 00:08:19,270 --> 00:08:19,870 detection. 112 00:08:20,200 --> 00:08:28,000 So instead of selecting it and using it again with document query selector, we just simply passed it 113 00:08:28,000 --> 00:08:28,180 in. 114 00:08:28,750 --> 00:08:32,650 Then we were grabbing all of the elements with a class of enemy. 115 00:08:32,800 --> 00:08:34,030 So this makes that dynamic. 116 00:08:34,030 --> 00:08:36,790 So if we had more enemies, we could grab all of them. 117 00:08:36,940 --> 00:08:42,910 We loop through each one of those and we checked to see if there's a collision and if there is, then 118 00:08:42,910 --> 00:08:43,780 we end the game. 119 00:08:44,140 --> 00:08:48,430 Otherwise, we just we just continue with the movement of those cars. 120 00:08:48,760 --> 00:08:54,040 And the other thing, too, that we're checking to see if the car has run off of the screen and if it 121 00:08:54,040 --> 00:08:56,680 has that, we reset it to negative 600. 122 00:08:56,860 --> 00:08:59,070 And we also reset the left position. 123 00:08:59,090 --> 00:09:04,060 We reset the background color so it can look have a different background color and we can also have 124 00:09:04,060 --> 00:09:06,280 a different left position. 125 00:09:07,780 --> 00:09:14,830 And then after all of these conditions, so if these conditions are not true, then we skip directly 126 00:09:14,830 --> 00:09:21,430 through updating the Y position of that element, and that means that we're updating the style and the 127 00:09:21,430 --> 00:09:24,670 top position, just as we were with the players car. 128 00:09:25,240 --> 00:09:28,630 The other one that we're doing is that we're updating and moving the lines. 129 00:09:28,760 --> 00:09:33,610 So this one wasn't as complex where we're still doing the same thing, where we're using query selector 130 00:09:33,610 --> 00:09:39,010 to select all the lines and looping through all of the lines within the node list. 131 00:09:39,250 --> 00:09:45,130 We needed to check to see if the value of Y was off the screen greater than 1500. 132 00:09:45,310 --> 00:09:52,210 And if it was, then we're subtracting 5500 from it and this keeps the lines within the same distance 133 00:09:52,210 --> 00:09:52,720 apart. 134 00:09:53,200 --> 00:09:56,750 So instead of setting a value, we're subtracting the 1500. 135 00:09:56,920 --> 00:10:03,790 So if we had 15, 15, we would still end up with negative subtracted off of there. 136 00:10:03,800 --> 00:10:09,610 So we'd still end up with a value that we could utilize and we would still have the same distance between 137 00:10:09,610 --> 00:10:15,110 the lines, also increasing the player speed as by the player speed. 138 00:10:15,170 --> 00:10:16,950 So this can be dynamic as well. 139 00:10:16,960 --> 00:10:21,430 So we can increase the player speed, speed, and it will increase the way the lines move as well as 140 00:10:21,430 --> 00:10:22,060 the enemies. 141 00:10:22,300 --> 00:10:27,580 And we also had our item style that we were updating as well. 142 00:10:28,030 --> 00:10:32,560 Now, one of the most important functions of this game was the collision detection, which we're using 143 00:10:32,560 --> 00:10:38,410 within the move enemy, where we're taking that enemy object as well as the player object, which is 144 00:10:38,410 --> 00:10:43,780 the car, and then the enemy object and checking to see if there's overlap between the elements on the 145 00:10:43,780 --> 00:10:44,200 page. 146 00:10:44,530 --> 00:10:52,150 And we're using that get bounding rectangle method in order to get the top left, right and bottom positions. 147 00:10:52,420 --> 00:11:00,570 And then we were looking and comparing to see if the horizontal or the vertical top and bottom are overlapping 148 00:11:00,580 --> 00:11:04,210 and again, the opposite of the top and the bottom of the opposite ones. 149 00:11:04,540 --> 00:11:08,650 And if there's overlap there, then we know that there's a possible collision. 150 00:11:09,010 --> 00:11:17,130 And if this one is as well a possible collision and this one as well, if it's a possible collision. 151 00:11:17,470 --> 00:11:21,280 So taking all of these into consideration, notice that these are. 152 00:11:22,060 --> 00:11:28,180 So if any of these are overlapping, then we know that we've got some type of overlap and we need to 153 00:11:28,360 --> 00:11:32,860 take this into consideration as we return back that value. 154 00:11:33,010 --> 00:11:37,780 And this is all contained within one statement here. 155 00:11:38,200 --> 00:11:47,650 And if there is any overlap, then by default, we're toggling that value from false to true and returning 156 00:11:47,650 --> 00:11:48,970 back a value of true. 157 00:11:49,090 --> 00:11:54,520 And that means that we do have a collision between the elements and then we do the end game functionality. 158 00:11:56,050 --> 00:12:01,540 Essentially, that was really the core of what we're doing, the end game was relatively straightforward, 159 00:12:01,660 --> 00:12:08,650 where we have the player start functions, so we set that to false so we can stop running that animation 160 00:12:08,650 --> 00:12:09,030 screen. 161 00:12:09,400 --> 00:12:14,200 We output the score for the player so they can see what the score is. 162 00:12:14,200 --> 00:12:15,610 And we also write Game Over. 163 00:12:15,910 --> 00:12:22,390 And then we also have our START screen where we're showing that start screen button again so the player 164 00:12:22,390 --> 00:12:23,800 can restart the game. 165 00:12:23,980 --> 00:12:28,960 And we needed to make sure as well that when we're restarting the game, that we're clearing everything 166 00:12:28,960 --> 00:12:33,310 out and we're preparing a brand new game again for the player. 167 00:12:33,430 --> 00:12:35,710 So go ahead and try this out for yourself. 168 00:12:36,010 --> 00:12:42,070 All of the source code is also included so you can copy, paste it, try it out, experiment with it 169 00:12:42,190 --> 00:12:46,660 and get familiar with the content that we've covered in the previous lessons. 170 00:12:47,030 --> 00:12:49,990 Thanks again for taking this section of the course.