1 00:00:00,060 --> 00:00:03,260 Great job and congratulations on making it through this section. 2 00:00:03,270 --> 00:00:08,370 I know we had quite a bit of complex code that we looked at and in this lesson, we're going to do a 3 00:00:08,370 --> 00:00:14,070 quick overview of all of the court that we used in order to build the application. 4 00:00:14,400 --> 00:00:20,610 And it is always important to play through your application and make sure that it met all of the requirements 5 00:00:20,610 --> 00:00:21,390 that you set out. 6 00:00:21,600 --> 00:00:27,990 So in this game, we set out to create some aliens and we wanted to make sure that we had a way to shoot 7 00:00:27,990 --> 00:00:28,680 the aliens. 8 00:00:28,770 --> 00:00:31,080 And we don't want the aliens reaching the bottom. 9 00:00:31,080 --> 00:00:36,120 If they reach the bottom before you have an opportunity to kill all of them, you lose the game and 10 00:00:36,120 --> 00:00:37,080 it's game over. 11 00:00:37,290 --> 00:00:42,700 And the objective really is to get all of them before they hit the bottom and win the game. 12 00:00:42,930 --> 00:00:47,640 So either way, you end up with the score and then whatever score you have, you can always restart 13 00:00:47,640 --> 00:00:48,270 the game. 14 00:00:48,270 --> 00:00:55,110 And we created enough flexibility within the game code that we can update the number of aliens. 15 00:00:55,230 --> 00:00:58,530 So it could literally be a random number of aliens if we want. 16 00:00:58,710 --> 00:01:02,910 And we can do quite a bit of flexibility because it's fully dynamic. 17 00:01:03,240 --> 00:01:04,800 So let's run through the source code. 18 00:01:05,130 --> 00:01:10,440 We had to set up some styling to make it look pretty, of course, and we didn't focus a lot of time 19 00:01:10,440 --> 00:01:11,250 on the styling. 20 00:01:11,250 --> 00:01:17,100 And you can adjust the styling as needed to make the aliens look or whatever characters that you want 21 00:01:17,280 --> 00:01:19,380 coming down on your screen within your game. 22 00:01:19,380 --> 00:01:21,150 You can adjust the styling accordingly. 23 00:01:21,450 --> 00:01:24,300 Then we set up some basic HTML structure. 24 00:01:24,480 --> 00:01:30,300 The way they usually approach this is I come into what I'm going to need to present to the player within 25 00:01:30,300 --> 00:01:30,750 the game. 26 00:01:30,750 --> 00:01:36,390 So I know I needed a score and I also need a mean area where the game is going to take place, start 27 00:01:36,390 --> 00:01:39,720 button to start the game and then the ship and the fire me. 28 00:01:40,200 --> 00:01:45,600 This could also be added in dynamically with JavaScript, but I chose to keep them in the beginning 29 00:01:45,600 --> 00:01:49,290 and the structure so that we have a better concept of what we're building. 30 00:01:49,500 --> 00:01:54,360 So there's a bunch of options here where you can make it fully dynamic and build and construct all these 31 00:01:54,360 --> 00:01:56,520 elements with JavaScript if you want it to as well. 32 00:01:56,730 --> 00:01:59,690 So it could make it fully a JavaScript only game. 33 00:02:00,090 --> 00:02:06,240 Also, we added in and later on we added ability to send a message to the player. 34 00:02:06,690 --> 00:02:14,250 We used a bunch of variables to select the JavaScript, document objects and make connections to those 35 00:02:14,460 --> 00:02:18,510 so that we could reference those using the variables that we set up. 36 00:02:18,750 --> 00:02:23,280 And we also tested just make sure that we had all the connections adding in. 37 00:02:23,280 --> 00:02:25,200 We need a few event listeners to add in. 38 00:02:25,410 --> 00:02:27,900 So one of them was a start button to start the game. 39 00:02:28,200 --> 00:02:33,930 We set up a few global variables that we use in order to pass information between the different functions 40 00:02:34,110 --> 00:02:39,900 of the gameplay and then also an event listener for the key down, because this is keyboard based game 41 00:02:40,020 --> 00:02:43,590 and we also needed to listen for the key up within these. 42 00:02:43,590 --> 00:02:50,250 Basically, we're tracking whatever key gets pressed and we're using the key code and we're also passing 43 00:02:50,250 --> 00:02:52,200 in that as an object. 44 00:02:52,200 --> 00:02:54,300 So either it's a boolean, it's a boolean value. 45 00:02:54,300 --> 00:02:55,560 So either true or false. 46 00:02:55,680 --> 00:02:59,820 If the key is pressed and it's true if it's released, then it goes to false. 47 00:02:59,940 --> 00:03:06,210 And that's how we know within the update function, which we are going to talk about, what actions, 48 00:03:06,210 --> 00:03:09,330 where we're positioning the current player ship. 49 00:03:09,360 --> 00:03:14,520 So this is where we've got the ship's movement, the players movement that we were using next. 50 00:03:14,520 --> 00:03:18,930 We came into our start game and the start game function. 51 00:03:18,930 --> 00:03:22,320 So we launch this whenever the start button is pressed. 52 00:03:22,590 --> 00:03:25,440 And that was our main starting point for the game. 53 00:03:25,710 --> 00:03:34,290 We checked to see if game over is is true and if it is true, then we know we can restart the game. 54 00:03:34,290 --> 00:03:36,030 So we set game over to false. 55 00:03:36,240 --> 00:03:37,830 We set up a bunch of variables. 56 00:03:37,830 --> 00:03:39,930 We have one here to clear the aliens. 57 00:03:40,170 --> 00:03:45,030 So this was just a loop through of all the elements with the class of Alien because we're creating these 58 00:03:45,030 --> 00:03:51,630 dynamically using JavaScript and we're just simply removing them out of the page in order to be able 59 00:03:51,630 --> 00:03:52,560 to restart the game. 60 00:03:52,560 --> 00:03:58,440 We also have the game over function, which essentially does the opposite of the start game where we 61 00:03:58,440 --> 00:04:04,530 get our restart button back and we also block out a few actions that the user can take. 62 00:04:04,890 --> 00:04:11,250 So while the game is when the game is started, we set some variables and of course these can be adjusted. 63 00:04:11,250 --> 00:04:15,720 So we've got a player score alien speed, we've got the ability to fire. 64 00:04:15,900 --> 00:04:18,600 So that's I guess that's gone to false. 65 00:04:18,750 --> 00:04:20,460 So that means that we can shoot. 66 00:04:20,460 --> 00:04:26,610 Also updating the score, updating how many aliens set up aliens is a function that we use in order 67 00:04:26,610 --> 00:04:27,690 to create aliens. 68 00:04:27,840 --> 00:04:29,790 And then we've got an output message. 69 00:04:30,060 --> 00:04:33,150 So this was an update from the console messages. 70 00:04:33,270 --> 00:04:37,260 And this can be anything, any information that we want to pass over to the user. 71 00:04:37,500 --> 00:04:39,870 We have a function in order to set up the aliens. 72 00:04:39,870 --> 00:04:45,630 So this gives us complete flexibility to set up as many aliens as we specify in the setup. 73 00:04:45,630 --> 00:04:46,560 Aliens function. 74 00:04:46,800 --> 00:04:51,180 So it could be any number and we loop through that number. 75 00:04:51,180 --> 00:04:56,580 So we create a default starting point and then we have a variable for role. 76 00:04:56,760 --> 00:04:59,810 So that basically gives us the ability to stack the aliens and. 77 00:05:00,010 --> 00:05:07,210 To each other, and once we pass a certain value, then we move them onto the next row and we start 78 00:05:07,210 --> 00:05:12,340 again from the beginning of the roll, and then this gives us the ability to stack multiple rows and 79 00:05:12,340 --> 00:05:13,530 columns of aliens. 80 00:05:13,900 --> 00:05:16,270 We have one function that actually makes the aliens. 81 00:05:16,280 --> 00:05:22,510 So this makes the visible elements that we use as the aliens, such alien maker where we pass in the 82 00:05:22,510 --> 00:05:24,130 row and the tenth width. 83 00:05:24,310 --> 00:05:29,020 And then as we loop through this number, we continuously make the aliens. 84 00:05:29,140 --> 00:05:32,220 And all of these values are adjusting and changing. 85 00:05:32,470 --> 00:05:34,940 We created one to generate a random color. 86 00:05:34,960 --> 00:05:40,900 So this is a really nice, neat, compact statement that you can use in order to get random hex color 87 00:05:40,900 --> 00:05:41,440 values. 88 00:05:41,740 --> 00:05:45,340 And we utilize that in when we're constructing the alien. 89 00:05:45,580 --> 00:05:51,850 So we also added in a quick fix in the last lesson to make sure that we don't overrun the screen with 90 00:05:51,850 --> 00:05:57,100 too many aliens as we wanted the application to be as flexible and dynamic as possible. 91 00:05:57,310 --> 00:06:00,280 So we didn't want to have aliens past a certain point. 92 00:06:00,460 --> 00:06:05,170 So it doesn't matter how many aliens we're asking for, they're never going to get past this certain 93 00:06:05,170 --> 00:06:08,290 point, which is container demand height minus two hundred. 94 00:06:08,290 --> 00:06:09,660 So that's roughly around here. 95 00:06:09,790 --> 00:06:14,320 But of course, depending on the size of the screen, your screen might be way smaller, so you might 96 00:06:14,320 --> 00:06:16,480 not even have any aliens. 97 00:06:16,490 --> 00:06:18,900 So this was something that we added in. 98 00:06:19,090 --> 00:06:22,720 And of course, this can be adjusted as needed. 99 00:06:22,760 --> 00:06:28,930 Also, we created some elements on the fly, so created a div and this is our main alien container. 100 00:06:29,050 --> 00:06:35,260 We gave them some eyes to make them look more like creatures, gave them a mouth, all created dynamically, 101 00:06:35,440 --> 00:06:37,220 and we had set up the styling. 102 00:06:37,240 --> 00:06:42,280 So basically all we had to do is add in the classes and then append it to our main div. 103 00:06:42,400 --> 00:06:46,940 And that gave us that friendly alien face that we see on the screen. 104 00:06:47,410 --> 00:06:54,070 Next, we went through and we set up some positions for those and then we adjusted the style values 105 00:06:54,100 --> 00:06:57,730 according to our positioning of where the elements should be. 106 00:06:57,860 --> 00:06:59,980 And we also had one here for direction. 107 00:07:00,130 --> 00:07:05,440 And what direction did is it allows the aliens to get to one side and then turn around and come back 108 00:07:05,710 --> 00:07:06,340 the other way. 109 00:07:06,370 --> 00:07:10,570 So this allowed us to construct all the aliens and make them look the same. 110 00:07:10,570 --> 00:07:16,090 And other than the random color and you can also fluctuate this if you want different widths, you could 111 00:07:16,090 --> 00:07:18,520 add this in as well when you're constructing the alien. 112 00:07:18,530 --> 00:07:21,870 So you can make them look a whole lot different and really interesting. 113 00:07:22,240 --> 00:07:25,390 We have a function to add the ability to shoot. 114 00:07:25,700 --> 00:07:28,900 So shooting is the space bar or the up arrow. 115 00:07:29,140 --> 00:07:31,060 And what this does is this. 116 00:07:31,210 --> 00:07:33,160 We only have one projectile at a time. 117 00:07:33,310 --> 00:07:38,890 So once that's in play and on the screen, we don't want to be able to shoot any more projectiles until 118 00:07:38,890 --> 00:07:40,300 this one's taken its course. 119 00:07:40,630 --> 00:07:47,620 So we removed the Hyde class from the fire element and then we position our default starting position 120 00:07:47,620 --> 00:07:48,940 for the element. 121 00:07:49,240 --> 00:07:51,760 And this is according to where the ship is located. 122 00:07:52,060 --> 00:07:58,750 And then we fire off and we show that on screen to the user adjusting the style property of the fire 123 00:07:58,750 --> 00:07:59,230 element. 124 00:07:59,650 --> 00:08:03,190 We have one where we're checking to see if collisions are taking place. 125 00:08:03,610 --> 00:08:09,340 And this was fairly complex, but it's getting essentially the boundaries of two different elements 126 00:08:09,340 --> 00:08:17,020 and seeing if there's overlap on them and also seeing if there's horizontal and vertical overlap and 127 00:08:17,020 --> 00:08:22,410 then return back accordingly after we've done their comparison calculations, sir. 128 00:08:22,750 --> 00:08:28,360 And then also we had one for message outputs of this gave us the ability to really easily output content 129 00:08:28,600 --> 00:08:30,340 for the user to be able to see. 130 00:08:30,490 --> 00:08:36,730 And we updated all the console messages where we've got the one you lost, hit and so on, outputting 131 00:08:36,730 --> 00:08:40,030 into the console, which obviously is not visible to the player. 132 00:08:40,150 --> 00:08:47,200 So we updated those to output into the message output function and you can adjust these as needed as 133 00:08:47,200 --> 00:08:47,470 well. 134 00:08:47,650 --> 00:08:52,270 So if you do want to have more messaging to the player, this is always a great spot and this is where 135 00:08:52,270 --> 00:08:53,730 you can add that information in. 136 00:08:54,040 --> 00:08:57,070 And then really the core of the game was happening within an update. 137 00:08:57,260 --> 00:09:01,870 So this is where whenever we start the game, we launched the update animation sequence. 138 00:09:02,170 --> 00:09:05,980 So this is an animation function that's going to loop through. 139 00:09:06,130 --> 00:09:08,980 And then once it finishes, it's going to call on itself. 140 00:09:09,190 --> 00:09:15,700 So it's continuously going to allow us to run all of the code here within this block of function and 141 00:09:15,700 --> 00:09:22,090 constantly updated and recall it again until, of course, we hit player game over. 142 00:09:22,270 --> 00:09:24,970 And once that is true, then we stop. 143 00:09:25,270 --> 00:09:29,990 And that's going to be the last iteration of update until we, of course, we restart the game. 144 00:09:30,340 --> 00:09:31,510 So what do we do in here? 145 00:09:31,510 --> 00:09:36,520 And this is where all the action takes place, where we look through all the elements that have a class 146 00:09:36,520 --> 00:09:37,240 of alien. 147 00:09:37,540 --> 00:09:40,360 We check to see if this value is zero. 148 00:09:40,360 --> 00:09:42,670 And if it is, then the game is one. 149 00:09:42,820 --> 00:09:45,240 So there's no point to continue. 150 00:09:45,820 --> 00:09:49,690 We also loop through all of the aliens and we check for collisions. 151 00:09:49,690 --> 00:09:51,610 So this is that collision detection here. 152 00:09:51,760 --> 00:09:55,780 If there is a collision, we've got some code that runs whenever there's a collision. 153 00:09:55,930 --> 00:09:59,500 So we remove the alien, we update the players score. 154 00:09:59,780 --> 00:10:07,970 We reset the ability to fire and we output a message of hit, we also check to make sure that the element 155 00:10:07,970 --> 00:10:09,260 isn't out of bounds. 156 00:10:09,560 --> 00:10:15,590 And if it has hit hit that reached the bottom, then that's actually going to be a loss for the player. 157 00:10:15,590 --> 00:10:19,500 So the game is over and we run the game over function. 158 00:10:19,760 --> 00:10:27,280 So if we get a win or a loss, we run game over and that allows us to reset our player area. 159 00:10:27,710 --> 00:10:31,820 And if none of those are true, we adjust the position accordingly. 160 00:10:32,030 --> 00:10:36,240 And according to the alien speed, we also have our direction. 161 00:10:36,530 --> 00:10:42,020 So this is where we toggle the direction to either go right or left by a negative one or one. 162 00:10:42,170 --> 00:10:45,830 And we multiply the position by that, the speed by that. 163 00:10:46,040 --> 00:10:50,510 So if we multiply one by negative one, it returns back negative one. 164 00:10:50,720 --> 00:10:53,990 But if we do a negative one by a negative one, it returns back to one. 165 00:10:54,620 --> 00:11:01,670 So that's where we're able to flip between negative one and one and give us the ability to kind of switch 166 00:11:01,670 --> 00:11:03,050 directions when it reaches the end. 167 00:11:03,380 --> 00:11:08,120 Also outputting that element content into the page by updating its style. 168 00:11:08,420 --> 00:11:14,080 So this is where we add in the visible part of updating where the positions and the Y position is. 169 00:11:14,660 --> 00:11:22,160 Next, we select our ship position, so we grab whatever the position of the ship is and we adjust it 170 00:11:22,160 --> 00:11:22,830 accordingly. 171 00:11:23,120 --> 00:11:25,720 We have also our firing position. 172 00:11:26,000 --> 00:11:31,670 So if the if the fire projectile is in play, then we update its position. 173 00:11:31,670 --> 00:11:35,630 So we subtract 15 for that and we make it visible to the player. 174 00:11:35,930 --> 00:11:41,600 If it's out of play, then we simply hide it so we don't do anything with it. 175 00:11:41,600 --> 00:11:51,500 If the fire is is not true and if it's less then or if it's greater than Y position that someone basically 176 00:11:51,500 --> 00:11:52,620 we take it off a screen. 177 00:11:53,120 --> 00:11:58,880 This is where we have the players actions where we're checking that key, the object to see which keys 178 00:11:58,880 --> 00:12:03,070 are being pressed and then we update the position accordingly. 179 00:12:03,530 --> 00:12:10,460 And then lastly, we output it for the visible area of our div, updating the style property of the 180 00:12:10,460 --> 00:12:15,890 mothership element, allowing us to move the ship according to the player's key presses. 181 00:12:16,220 --> 00:12:20,460 And then we relaunch the update function and do it all over again. 182 00:12:20,930 --> 00:12:26,600 Source code has been included and I do encourage you to try the code out for yourself if you have any 183 00:12:26,600 --> 00:12:32,330 questions or comments or need clarity and other content that's been covered in the course, I'm always 184 00:12:32,330 --> 00:12:34,530 happy to help and address those. 185 00:12:34,940 --> 00:12:40,510 Thanks again for taking this course and the section, and I do congratulate you on making it through. 186 00:12:40,550 --> 00:12:41,600 Hope you've enjoyed it. 187 00:12:41,600 --> 00:12:42,710 I'll see you in the next one.