JavaScript Alien Invaders Game Project Course | Laurence Svekis | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

JavaScript Alien Invaders Game Project Course

teacher avatar Laurence Svekis, Best Selling Course Instructor

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

17 Lessons (1h 38m)
    • 1. 0 Alien Invader Introduction

      1:55
    • 2. 1 Game Play Setup

      4:56
    • 3. 2 Start Game Action

      8:05
    • 4. 3 Move Player Keyboard

      4:56
    • 5. 4 Starting the Game

      3:51
    • 6. 5 Container Boundary

      2:24
    • 7. 6 Fire Away Shooting

      7:08
    • 8. 7 Start Game Prep Aliens

      7:13
    • 9. 8 Create some Aliens

      6:14
    • 10. 9 Add Eyes and Features

      5:05
    • 11. 10 Lets Get Moving

      6:26
    • 12. 11 Tweaks and Fixes

      6:26
    • 13. 12 Hit Detection

      7:50
    • 14. 13 Hit Target handle

      5:09
    • 15. 14 Final Code Tweaks and Updates

      5:52
    • 16. 15 Quick Fix Alien Count

      1:45
    • 17. 16 Alien Invader Code Review

      12:44
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

121

Students

1

Project

About This Class

69612150

Learn and see how element can be selected and manipulated to create game effects and animations.  Apply logic to construct the game in a step by step format. 

This is a FAST PACED course DESIGN FOR STUDENTS WHO WANT TO SEE JAVASCRIPT APPLIED IN A PROJECT FORMAT

Source code is included so you can build your own version of the game. Step by step lessons constructing the game from a blank page.

Course covers

  • DOM element selection and element manipulation

  • Update of style attribute and screen position

  • Use of JavaScript methods like Math(), getBoundingClientRect() and others

  • Check element collision detection

  • Adding keyboard event listeners and tracking them

  • Use of animation frame for smooth animations

  • Tracking and movement of page elements

  • Apply JavaScript to create a web based game

    No libraries, no shortcuts just learning JavaScript making it DYNAMIC and INTERACTIVE web application.

Step by step learning with all steps included.

Beginner JavaScript knowledge is required as the course covers only JavaScript relevant to the building of the game.  Also HTML and CSS knowledge is essential as scope of this course is all JavaScript focused.  

Along with friendly support in the Q&A to help you learn and answer any questions you may have.

Try it now you have nothing to lose, comes with a 30 day money back guarantee.  

Start building your own version of the game today!!!!

Meet Your Teacher

Teacher Profile Image

Laurence Svekis

Best Selling Course Instructor

Teacher

Web Design and Web Development Course Author - Teaching over 1,000,000 students Globally both in person and online.    Google Developer Expert since 2020 GDE

I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I create... See full profile

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. 0 Alien Invader Introduction: hello and welcome to our alien Veeder Project course where we're going to be building an application from scratch. My name is Lawrence, and I'm gonna be instructor for this course. In the upcoming lessons I'm gonna be taking you from start to finish step by step, building out the application that you see on screen right now introducing how to update elements, create elements dynamically dawn manipulation element manipulation in collision detection. Also listening for keyboard events and different event listeners creating interaction and game logic and a whole bunch of really cool, fun, enjoyable stuff all while practicing and learning more about how to use JavaScript. This is all javascript, vanilla, javascript. There's no libraries, no tricks, no shortcuts, just javascript and no gimmicks. And source code, of course, is included. So you can build your own version of the game and try it out for yourself within your own editor. And I do encourage you to try out the code as we go through step by step, so that you can have also a finished product. By the end of the course, courses presented with the source code being written on the left hand side, and then on the right hand side, we're going to see what's being output in the browser off that source code. This course covers building out and constructing this on a script based game. HTML and CSS are prerequisites for this course as well as fundamental core knowledge of JavaScript. It is designed to practice and get more familiar with JavaScript more specifically with the dom and element in traction and manipulation. If you do have any questions or comments along the way, I'm always happy to help address those and clarify any of the content that's being presented within the course. So I know you're excited to get started, so let's dive right in and build this application and start some JavaScript coding. So open up your editor and let's get coding. 2. 1 Game Play Setup: hello and welcome In this lesson. We're setting up the game structure html and then connecting the JavaScript to the HTML objects so that we can use them in the upcoming lessons. So let's go ahead and set up our basic structure. So this is what we want our interface toe look like for the user so we can create one called top Bar, and we can have our scoring here as well as other stats that we might want to display to the user. And we'll give this one a class, and this one will be specifically for score. This is a SPAN, and that means that if I use JavaScript, I can connect to that, and I can update the value that's contained within the element with the class of score. We also need a mean game container. So I give this one a class and we could just call this one container, and this is where all of the game play will take place. So within the main game container, let's set up a way to start the game. So this is just a start button, and we could just name it start game. This was an element where the game would start. We also need a few elements that we can interact with them. We can move, so we're gonna have one called my ship. This is gonna be the players ship that they're gonna move around on the screen. And then also, we need to set up another one. We can call this one, fire me. So this will be the projectile that the player is firing at the aliens and the aliens. They're going to get generated using JavaScript. So we're not gonna include anything else, and we're gonna try to do as much as possible with JavaScript. So now we've got a basic structure for our game and it doesn't show a whole lot. It shows, score and a start game button. So we need to connect them into our JavaScript. So setting those up, we can have one. We can call it Bt and start. So this could be our start button object. So connecting to that existing object and making that connection with query selector. And when we do this, this gives us the option to interact with the content that's being presented on the page. So interact using the document object model and connecting to that instance off that element. So any of the updates that we do now with Button start it's going to be representing that object and that object is the element with the class of start button. And for classes, it's just like CSS. We need to include prefects. So for classes, it's a dot for ideas. It's a hash. And for the tag names, it's just the tag name on its own and Corey selector. Select the Element. And if we have more than one element with the same class, it will select the 1st 1 that it finds on the page. Next, let's make a connection to the ship, and this is gonna be the element that we're gonna move around or the players gonna move around us. They play the game, so we need to select that. And then, of course, we're gonna be using that and manipulating its location using JavaScript. Another variable that we should set up is the main container. That's the main container object, and this is where all the gameplay is gonna take place. So again we can use query selector, selecting the element with a class of container in the projectile that the player is gonna fire so we can just call that fire me and these are just the variables that we're going to use in order to connect to those elements. And then, lastly, let's have 14 score output. So we cannot put the score to the user and let them know what's happening and what they air scoring and how much their score is Every time it changes, that's what we need to set up. So go ahead and refresh it. And they usually What I like to do before we proceed is I like to list out all of these objects that we've connected to the elements and make sure that we do have that connection and you can see once you listed I want you list there the variable name, then you right in the console, and you can see when you hover over it, it goes blue. And that means that the browser is able to detect which element were referring to, and the same thing for the ship and container. So we've got that mean Div that's got the container fire me as well. So we've got that one and then, lastly, the score output. So now that we have those and we can update them using JavaScript so we can do things like inter HTML and reset their values, and you can see that as I've updated here within the JavaScript, it's also updated on the Peach, and that's what we wanna make sure it's happening, that we do have that connection. And then we're all set to make the manipulation of the elements. So go ahead and set up your basic core structure for the game. He could be ready to move on to the next lesson where we bring in event listener. So whenever the button gets clicked, we're also going to apply a little bit of styling in the next lesson to make this look more like a button. And then also some styling for the score. And that's all still to come in the upcoming lesson 3. 2 Start Game Action: Hello and welcome back in this lesson, we're gonna attach an event listener to the start button. We're also going apply some styling and then get the bounding bat box setting up our variables that we're going to need in the upcoming lessons in order to produce our gameplay . So our global variables that we're going to use So first of all, let's select our button objects. This is the one that we connected to the element with the class of start button. We're gonna add an event listener. The vent listener that we're adding in is a click. So whenever the button gets clicked, we're getting vocal function, and that function is going to be called start game. It will create a placeholder for that. So whenever that gets clicked, the game starts, and then this is where we can set up and do all of our parameters in order to start the game. And I'll just put a console message in here so that we can check to make sure that it is working. There's also a few other variables that I did want to add in, and one of them that I wanted to set up so some global variables that we're gonna utilize. And I want to set up one that has the container dimension as we're gonna need to know. And we want to make this application as flexible as possible. And all of our gameplay is happening within the element with the class of container. So on a select that element and we already have it within an object format and that you're going to use a function called get bounding client rectangle. This is a method, and it's a really useful one, and I'll show you what this is going to do. So I type in that container dim. You're going to see that I get the dimensions of it. So I get some useful information. I get the bottom position, the height, the left, the right, the top, the with the X and the Y coordinates. So I've got all of these useful pieces of information that I can utilise. I know where it's located. I know how, how, what its height is, how wide it is, and that's also where it's located So we can utilize this as we're setting up the boundaries and we don't want any of the player to. We don't want the player to leave the boundaries of the containing object as well as we don't want the aliens to leave that container either. Also, we're gonna set up a global object. We can call that player. So this is where we can store all of the useful player information so you can store things like score so we can have our starting score value there. And this is an object so we can place as much information as plots as we need. There's also a speed variable that we wanna maybe change an update. There is also the game status, so checking to see if it's over or Newt. Not so if it's game over so the game won't run when we start the game that we're gonna turn that two false so the game's gonna be in progress. There's also the fire. So this is gonna be false. Basically, it means that we have no projectile speed, and we want the alien speed to be different and not coupled to the speed of the player and the speed of the players. How many pixels the player is gonna be able to move. So now we've got that information in and there's not a whole lot. You can always put it and you could see the object structure in the council. Also, we wanted to apply some styling and one of them, the styles that I had it in here is applied. And this one we're gonna use and added into elements and remove it from elements when we hot want to hide and show various elements. And all this gonna be contained within here is going to be displayed? None. So whenever this is applied, whenever that classes applied, we're not going to see it. It's just going to display it as none. We can also set our container area. So now that we've got the mean game object so we can set this so we could also make a dynamic if you want. So maybe a width of 80% and do, ah, height of 600 picks. So maybe we wanted always to be the same height, and you can adjust thes as needed. So there's margin left. And if my width is 80% my margin left is 10. That's gonna roughly center. It also maybe want to set a background color to this and I'll set it as black so that we can distinguish where it's located and we get out of border for wanted to and also overflow . I used to like to hide the over full in the game so that we don't run out of our screen area. So this is basically where our gameplay is going to take place. And I'm gonna just the sizing to be its adjusted to be 100%. And we could also play with the height as well. So we could also set that to be 80%. So that's completely dynamic. And as I shrink it, our height will shrink as well so we can utilize this. And now whenever I pull out, if I go into the consul now and if I get the container dimensions, we can see that they're adjusting accordingly. And so this is going to be very useful as we're calculating out, and we want to make this application as dynamic as possible, so we want to be able to move things around. Let's also add in a few other options as we're building the styles. So for the start button, make this book more like a button, and I'm going to really be doing a very quick styling here. And, of course, you can style as needed, as it's not gonna affect any of the gameplay to set color background color. So let's see what that looks like. They're start game button is all the way across now. We ever start game option. Let's also add some styling for the ship. So this is going to be the players ship and what they're going to be moving on the screen. And this one we need to position absolute. So that gives us the ability to set the position of where it's located on the screen so we can set a left position and we can also set a top position. And in this case, we're going to use bottom. So it's coming off of the bottom off our main container area, also a background color of white. So we've got some good contrast between that, and then we need to define its width and its height, and I'm gonna set this more dynamically so it's said it like that, and then we can refresh it, and we can see that now it's positioned slightly off the bottom, so I just did the bottom position to 20%. I gave it a high height of 20 picks, and then lastly, let's add in the firing object. So the fire me. So for now, I'm gonna remove hide so that we can see it on the screen. This could be the projectile. And this one also has to have a position of absolute. And in this case, we can go top and left at zero and setting. It's with setting its height. Let's do border radius at 50%. So it's nice around and its background color weaken set to read. So it stands out on the screen. So we've got our object there that we've added so great. Once we've got the projectile, Now we're ready to hide it again, and then we're gonna hide in and hide it as we use it within our code. So we're ready to move on to the next part where we're gonna be starting the gameplay. So this is going to mean that we're going to start the interaction with the keyboard to move the ship across as well as we're going to start the building of the aliens and the bad guys that are gonna be coming down that you're gonna have to defeat with the ship. So all of that is still yet to come. So go ahead and add in set up here default variables used to get bounding client rectangle in order to get your mean container of your game play area, also at an event listener to the start button so that you have an option to start the games . Whenever that gets click, that starts the game and then set up some default variables within the player object that you can utilize in the upcoming lessons. And, of course, you can adjust thes as well. We are going to be adjusting them with JavaScript in order to be adjusting some of these values, so that's all still to come. 4. 3 Move Player Keyboard: Hello and welcome back. Let's add in some event listeners to listen for keyboard presses so that we can take action on those user interactions. So using the document object were adding an event listener to the entire document. You could also add it to the container. So whenever the user has selected the camp container, but in this case, we're gonna attach it to the document. So we're listening for the event of key down. And if key down, if any of the keys air pressed on the keyboard, then this is going to invoke this key down function. You can see that we can console log eight that event object, some pressing the space. You can see that there's quite a bit of information that gets passed into through the vent object. You can see which he got pressed within the key code as well as within the code. So it's gonna be the same thing. And typically we do use the key coats as this is amore exact way to get with the key value is you can also use which. So that's gonna also have that same key coat. So for the space, the key code is 32 for going left. It's going to be 37 for going right, it's going to be 39. So we're gonna listen on those events and we're going to grab that key value. So getting the key value object where we're gonna use the event object and then key code in order to retrieve that key information. And then we can also output in the console so that we can actually see which keys were not passing, that we're not getting that full object in the consul anymore. It just going to be the same key values. So it's left. That's right and that's space and there's also up, which is 38. So we're gonna attach The firing on 32 38 left is going to be 37 right is going to be 39 and within the player object. We could add in those and we can also set up another main object in order to control the key press so we can say key value and then this could just be an open object and then as we create those, we can create them down here. So checking to see if the key value is equal to 37. And if it iss, they were going to take the key value. We'll just call it Ke Ke VI with an upper case of eat, object and assigning left. So setting that left value to truth. And then we're gonna check to see if the key value is 39. And that means that we're setting the rate to truth. So this is going to give us an indicator on which direction and we're also gonna listen for the key up. And then we're gonna set thes object values to false so listening for those key presses. And this can also be an else if because if one of the keys is pressed, if it's 37 then it's not going to be 39 or any of the other ones. And also let's check to see what if the key is pressed and if it's equal to 38 or if the key that's pressed is equal to 32 if that's true, then we are gonna fire so we can take the player fire value and set that to be true. So that means that the player has invoked and they fired and will take care of that in one of the upcoming lessons. So now we've got tracking those key, the objects within the main key object. So now if I press any of the keys, you can see that they go and we get the Boolean values, whether they're true or not. So there's another event listener that we need to add, and this is going to do the opposite. So we've got key down. And then whenever the player releases the key, we're gonna do the same thing where we're getting the key event. And if it's key 37 we're gonna set that to false if the key right, and we're set that 12 false and if this is lifted up, so we're gonna have a different action for the key up. We don't need to listen for the firing because we're only listening for the firing on the key down so we can avoid it within that scenario. So now whenever I press any of the keys, you're going to see that when I press it down, it goes true. When I released, that goes false. And then the next one when I hit right, it goes true. And when our ELISA it goes false so now we can it because this is a global object. The key V value is a global object. When we're doing our animation, we can check to see what this key value is and apply the motion in the movement up accordingly. So go ahead and add this into your project and coming up next, we're going to create our animation frame and all of the key presses air gonna become more evident. And we're actually gonna be able to move our ship back and forth, depending on what cues air being pressed on the keyboard. So that's coming up next. 5. 4 Starting the Game: Welcome back in this. Listen, we're gonna be starting our animation frame. So within the start game, whenever we press the start button, that's where we're starting the game. And this is where we can trigger the starting of the game plate. So sect selecting that we need to create a repeat animation frame and repeat a function that we're going to run over and over again. And this is what's gonna do all of the updates that we need within our game play area. So effectively creating the animation by running and constantly calling into the function and this function needs to be selected using a global object. So we've got our player and we can set up an animation. So this is ah within the global object, and we're gonna make a request animation free. And what this does is this gonna call and invoca function as an animation frame and then within the function itself, within that update function, we're going to call back to update so effectively, What this is doing is this is gonna constantly loop through update, and if you console log update, we could call it player, or we can add in whatever you want here and you're going to see what happens is when we hit start game. It's going to start the animation sequence. So right now all it's got is the console message. So let's make something happen. And we did set up the key presses in the last lesson so he can listen for those key presses . So checking to see where we've got our key objects, okay, left Cavey left. So checking to see if this is true and if it is that we're gonna make our appropriate movement for that. So what we want to do is we wanna have a temporary value position value and this position value is going to use the my ship object and then using the value for offset left, it's gonna return the number of pixels that the upper left corner of the current element is offset to the left. So basically, it gets your left position in a pixel value in a numeric value, and we can use this and update it. So if we're going left, what we're gonna do is we're gonna subtract off of it in the value that we're subtracting is the player speed, value and if key Cavey is right is true that we're going to move it to the rate instead of subtracting, all we're going to do is add And then lastly, before we finish up the animation and to actually to create the animation selecting the my ship object, we're gonna dynamically update its style value using a temp position. So this is that newly created value, and we're updating its picks location. So try that and refresh. So it's start the game. And now, whenever I'm touching the keyboard, if I'm going left or if I'm right, then you can see that the ship is moving either left or right accordingly. So if I'm pressing them both and I'm actually in a standstill because both of those keys air being pressed So it's going left and it's going right, so both of them are true. So subtracting and then adding the player speed, and that's why we're not getting anything happening. So go ahead and add this into your project, and at this point, you should have the ability to touch your keyboard and move your object left or right and coming up. We need to also set some boundaries, so you can see that right now I can move way out of my coordinates. And in earlier lesson, we saw how we selected the container dimensions. So we've got that within a value. And now we can utilize that to set the restrictions of where the ship could move to the left, as well as where the ship could move to the right, so it's coming up in the next lesson. 6. 5 Container Boundary: Hey, and welcome back in this. Listen, we're gonna be restricting our position of our ship that we're moving, so we don't want it to be able to move off screen. And when hit start that we get the activation of being able to move it, and you can see that it moves outside of the container area. So we want to stop the movement for off of the container area, and we want to restrict it within those boundaries. So we could do that within the condition where we're checking to see if left is pressed and also checking to see if the value of the left position so that's the temp position is greater than zero. And if it is, then we're OK to subtract. So let's try that. And now whenever we move so we're getting a value of greater than zero. But this is the main offset value, so we want to make sure that it's related to the container. So checking again that container dim and we do have a left position for that container, Tim. So now let's try that. And you can see when hits start game that now we're restricted to the left position and we can also do the same thing for right where we're checking to see if the position so tempt Physician is less than container right position. So within that container, we had a number of options we could also do with, and I'll show you What happened here is that we're actually moving off of the screen, and that's because we're restricting into the right position. But the right position is here and the right, the left position off this object is over here. So we need to add to the temp position the with off that current ship. So adding that in in the way that we can do that. So just as we did the offset left weaken do offset. And there's an option here for offset with. So now if we calculate that that's going to give us the right side off our ship. So moving that and now you can see that we're restricted within the container boundaries and we can't go outside. So go ahead and add those conditions into your project. So this gives you the ability to restrict where the player can move with their with their ship 7. 6 Fire Away Shooting: welcome back. Has your project coming along in this lesson? We're gonna be taking care of the shooting. So we've got player. Fire has been set to true. If we press any of these keys and then within the update, we can check to see if that player fire is true. And if it is that we can take on action accordingly to that. So setting that up and we can look to check to see if player fire is true. If it is, that means that we have to move our projectile. And there's a few other things that we still need to do as well. In addition and that's actually set up the firing object. So we need to unhygienic remove the class of hide from it. We need to set the player fire as well and also the position of where it's starting. So creating a function in order to handle that, we can call that ad shoot and then this is the function that's actually going to get invoked whenever the player presses any of these keys. So we can keep that in here where we do ad shoot and also remove out that player fire So we're gonna have this happen one time. And if this is the case that it is true, we wanna make sure that we're selecting that elements and updating its class list, removing the class of height so it's gonna show it on the screen, so see what happens. So now when I hit start game and if I press the space or if I press up, you see that the shooting object appears the projectile appears so next that we need to do we need to select that object, and we're going to create a value of X in that object, and we can call it X position or whatever you want to call it. This is a brand new value that we're setting. And then taking the my ship offset left. So just as we did in the last lesson, this is going to give us, ah position of where the ship is located. And you can try that as well in the console, and you can see that that's going to return back where its position is, according to where it's located on the screen. So this won't change depending on where you move it, and then if we go back to here and if we offset it, see change to 69. They're So we're getting that My ship offset Left position. And then what we want to do is we want to start a day roughly halfway in the my ship. And the way that we can do that is using the offset with and this time dividing it by two. So that will give us roughly halfway positioning of where our exposition is and then also for the Y position. So this one is going to be a little bit easier to set because we just using the position of the ship. So this is gonna be our default position of where the firing is starting and we can You've offset, talk and do a minus 10 on that. So next that we want to do is we don't want it showing up here in the top left hand corner . We wanted to show up, and this is where we update its style properties. So updating its left position. So just like we did with the ship, we're taking fire me And this is X position plus picks. And this one should be the y position and to do adjust the vertical, we're gonna use top. And why position? So see what happens. So hit Start. And now this is the starting position of where it's gonna place. Place it. And as you see when I move it, if I hit space bar, then it it places it there on top of my my ship. So wherever I've moved, that's where the starting position is. So next that we need to do is create that action. And we already saw that in the last lesson where we could move the ship around and we could do the same thing. And we can have this essentially firing as it's being projected out. And the other thing, too that we want to listen for is we don't want to have the ability to add more shots so we can run the function. Or we can check to see if the value off fire me or the value off player fire. And if player fire is false, then we're okay to add another shot. So see what happens. So now I should only be able to add it one time, and it's not gonna move. That's what we want to do, because otherwise the player could constantly press the space bar. It would readjust the positioning. So now we're ready to make the move with it and taking the fire me x position that we just sat earlier. And actually, we don't have to update the exposition. We only have to update the white position. So taking that value and we can subtract it by a value of 15 and then take fire me and selected style top and using that newly adjusted position, weaken Dio. Why position And then don't forget to add the picks. Otherwise it's not gonna work. So see what happens now. So I hit the space bar. It goes off the top. So we also want to check to make sure that the position is of fire me is not less than zero . And if it is that we just need to restart it. So we need to check to see if fire me is greater than zero. And if it is, then we're good to subtract off of it. But if it's not, then that means that we've gone off screen and it was a miss so we can change the play fire , Boolean value back to false and that will reset it and allow the player to fire again and then fire me. And as we remove the class of Hyde, let's add in Hyde, that's no longer going to be visible on the screen for the player. So even though it's right now, it's gonna be off the screen. The player either way isn't gonna be able to see that, and we can. Also, just to be sure, we can readjust the position of fire. Me. Why position? And we can set it to using the container dim height plus 100 so we can send its default position way outside of the visible area for the player and fire me. Why position is the one that's greater than zero. So I got to make sure that those variables are checked properly, so now we're ready to try that. It's so now when we start the game, we can fire, but we can only have one projectile on screen at a time, and you can see that once it goes off a screen that I can launch another one. So it does look fairly quick, but there's only one on the screen at a time, and it's always the same one, that same element that we created. So go ahead and add this into your project, and we're gonna be ready to move on to the next step. We're gonna clean up the start game and initiate the creation of the aliens. The bad guy. That's all still to come in upcoming lesson. 8. 7 Start Game Prep Aliens: before we bring the aliens on board, we need to take care of our start function. So it clicked the start button, and now it should disappear. We already have our checking to see if game over and by default game over is true. That means the game's not in play. So let's do that as our first check and checking to see if player game over is true. And if it is that we know what we can start our game because right now, the game start and play essentially. So what we want to do is we'll take that game over instead of being true. Let's set it to false so that we can't keep restarting until we want the player to be able to restart. Selecting our button start object we're gonna apply of style to its were not adding a class . We could also add in a class, so I just want to provide a little bit of variety of how to do this. Eso This is actually updating its style properties as well. We could have added in the class of hide, and that would hide it and do the same effect we need to also make sure that our player settings So we've got one for alien speed to just make sure that's at five. And if you are adjusting any of the player parameters, make sure we re adjust them to the defaults at this stage. So we're ready to set up the aliens and let's try at the start function. Now we click it, and all we really see happening is that the start option disappears and we can move the next thing we want to do, and that is to create our aliens. So let's create a function we can call it, set up aliens, and then we're gonna pass in how many aliens want to set up so make it completely dynamic and flexible in the numbers. So creating a function in order to handle that is going to make things a whole lot easier and a whole lot easier to create the aliens, and we're gonna probably need a few functions that we can break apart so it gives us more control. Eso we've got the one that we've got the set up aliens. We're passing in a number, and this is how many aliens we want to create So again we want to make this really dynamic and where we're gonna be setting up the aliens. So let's ah, set up and let's calculate have a few calculations. So using that container dim again, we've got a dynamic with for that so that could be changing at any time. Eso will subtract off of it 200 so that we're not sending of the aliens right over on the right hand side. So they're going to be more tuned to be on the left hand side and at Max, they're going to hit the 200 pick mark off off the right hand column. Also, let's set up an object and we can set up a role object. So this is where we're gonna position the aliens so we can pass in the X and Y object values. And for this one, we can take that last column value and use that. So also want to do is we want to find a module ISS for the last column. So we've got our last column, and using this, we can get a module ist number for that. And then what we want to do is divide it by two. And then what we're gonna do is we're gonna constantly adjust these values as we add more aliens. So basically, they're gonna all stack across the top, and we'll also adjust the why value as we loop through and create more aliens. Let's also set up a temporary with for the aliens. So by default we can set it at 100 so this also makes it more dynamic, and we can adjust the width of the aliens that we're creating. So we're actually ready to set up the different rows of them. So let's create a loop. And this is just, uh, just a regular four loop where we're looping through the number that we passed in. And this is the number of aliens. So in here, we have to have the function that's actually going to create the aliens, and we'll create one more function that's gonna be the alien maker will pass in the role object information as well as our attempt with value. So that again, this is gonna be fluctuating as we looped through. So we also need to set up a function toe handle that and this is gonna be our alien maker function, so it's going to get into parameters going to get the role, and we can just call it the same. It's to avoid confusion and save that, and for now, it's not going to do anything. So we start the game and we don't see anything happening quite yet. So just making sure that all of the functions are working so we want to do is we wanna take our role X value and add to it the temporary with and as we looped through that will increase those values of where the aliens are located, and we also need to account for the Y value. So this is going to be a little bit trickier than the role value, so we can take the value of row and we can check to see if it's larger than our last column value minus temp with so basically, that's going to mean that we need We can't make any more aliens on the current role, so we need to take our role. Why value and add let's say 70 to it and then take our role X value and equal that to whatever our starting position was and this was our original starting position of where the alien is gonna be located. That's the Rolex value roll y value that we're resetting. And I'm also gonna move the maker down so that we can check Tiu C and what could do the update of the positioning before we make the alien. So we're passing this value in, and for now, you can see the roll value that's getting past in. So we had start game. You can see the value of role and X is First X is going to be a three. Second one is at 100 the second, the next one is at 203 and then we're adding 72 the Y position. So we're increasing the white position by 70. So this is going to create them at 3 100 why is gonna be 70 and this should be before, So that's actually adding it to and once again, it's this double check. So this time it's 50 and 1 20 for the white position. So it looks like we're ready to start adding our alien so we can make this fully dynamic. So the aliens are going to be created on the fly using Java script, and that's going to come up in the next lesson. So go ahead and add in the calculation in order. Set up the aliens and make sure that we're passing in the right X and Y coordinates because this is where we're gonna be positioning the aliens as we construct them. So that's all still to come in the next lesson. 9. 8 Create some Aliens: Are you ready? Let's create some aliens going into our style area and they're going to create a style called Alien. And this is a class that we're gonna be adding in to each of the aliens as we create them. So using position. And this time we use position relative setting the top position to zero. And these air gonna be dynamically adjusted with javascript and then a width of 80 picks. I usually like to set a few defaults before we adjust it with JavaScript and also maybe make it a little bit higher. So 50 picks add some parting. And of course, you can style these aliens as needed. I'm gonna add in a box shadow as well for this and was set of font size so we can decorate the aliens with some text, text align and slightly rounded sites. So it's their alien by default. Now we're ready to add them and create them. We're going to do this using JavaScript. So using JavaScript, we're gonna create an element on the fly using the create element method. And this gives us the ability to create elements are created. If and I'll console log that devote so that we can see it as we're constructing it. So we go into alien maker, we hit start. You can see that we're working a bunch of dudes here, but we don't have anything else happening. We're just creating a bunch of gifts. So let's add some content into the diff where you take the diff and using class list ad and we'll add that class of alien that we just created to the diff. So that's going to make the alien have that class, and you can see now the class of alien has been added it, and we should also set those those values of the style properties. So taking the style value of with as we're sending in a value for temp with is going to get adjusted dynamically, and we need to always make sure that we add the picks there at the end. What it won't. It won't set it with just a numeric value, and we want also set on X and y position. So for this element will have an exposition, and this could be whatever the value of Rolex is that we're passing in end of why position is going to be equal to whatever the value of real. Why is that? We passed in and let's use math floor. So we bring it down to its closest value. So use the math method in order to do that. So bring it down to its closest round rounded value, then selecting the diff, updating its style, and we're gonna update the style left position. So using DIV X position plus picks so that will set its left position. And we also want to set its top position. So use the value of DIV y position for that. And I also wanted to add in one more object and this is gonna be the direction moving, and we'll set it to one. So it means that whenever they get to the end, I want them to go the other way, and we're gonna be able to accomplish that was just using the one variable where if we multiply it by negative one, the one will turn into a negative, and then we can move it the other way. And then once we hit this wall that we want to turn it around and move them back the same way. So turning that back into one so positive value. And then lastly, we're gonna take our container object, and we're gonna append a child to it. And the child that we're adding in is the dip that we just created. And there's a few adjustments on the calculations that we still need to make because we've got we're looking at the container with here. So maybe let's adjust this to be 100. And we're also gonna take this temp with and move this around. So we need to move a few things around here just to make sure our calculations are correct . And we're using that seem value instead of setting the position, container, dim, left position and that could be our default left position. And also when we reset it, we need to update that one as well. And I'm also gonna change alien from going relative to absolute so that the other aliens that are added in aren't going to be affecting those elements. So updating relative to absolute and also update the display to be in line blocks like we're ready to try that. So refresh hit start game and we built out our aliens and notice that there's still positioning themselves to close together. So I need to make another tweak on the calculation of where the aliens are being positioned . So as we're building them, we're setting that role value, and that row value actually has to be accounted for, so need to add another little bit into it. So plus 20. So try that now. So now that they're more stacked in their spacing between them, you can, of course, adjust this as needed. So if we just our alien with So if we go 50 you can see that. Now we're aligning 5th 5 aliens on the same role as we're not hitting that end part. But soon as we hit that end part than they go on to the next roast, if we try 70 there gonna be a little bit wider and as mentioned, they're going to be sitting on the left hand side. And the idea is that all of these aliens, they're gonna be moving over to the right, and then once they hit the right, they go down a little bit and then they start heading back left. So we're gonna create that all of that within the animation frame So go ahead and add this into the project so that you can create elements on the flight and add in some styling to them as well. And coming up next will make them look a little bit more interesting before we continue with the animation, so that's still all to come. 10. 9 Add Eyes and Features: right now, our aliens aren't very interesting. They don't actually look like aliens. So this lesson we're gonna apply some styling and make them look more interesting. We already created elements. We called it alien. Let's add in another another class, we can call this I so this one is positioned absolute as well so that we can move it and position it were needed. Give it a width of 20 picks. Border radius won't make this round as it is, and I 25% and the color can be black. And then height can also be 20 picks and a lighter background color. So it seemed class, we're gonna set on after value. So using the content property. So this is gonna add in a circle in I and also wanted to add in a mouth as well. So muzzle Create the styling for that and sitting height for its and positioning it. Bottom 10 picks left 10%. And the border is where it's going to get interesting because we'll do a four pick border and do it dotted white. So it looks like teeth and the background color can be black as well. It's ready to add in all of those classes. So going back to where we're creating the element where we're dynamically creating the element of alien, we need to upend both of the eyes as well as the mouth to it. So we can use javascript in order to do this. So just as we created that element initially and give it a class of random, we can also position so we can create our first. I call it I won and using a document, create elements. So just as we did with the diff, we're going to create a span in this case and taking I one class list add the class of ice or adding an eye to it. And then we're gonna take I won style left. And let's opposition this at 10 picks from the left and then taking the diff upend a child and the child that were pending is I want so see how that looks. So we refresh And now we've got one eye. We need another I so each alien should have to ice so to I to and in this case, we just need to position it different. So instead of off the left would go off of the right, So so that how that looks. So now we've got aliens, they've got kind of a face going on. And we need to also add in the mouth that we created this the style for the most. So just says we did the I set up Ah, object for the mouth. It's a document create element. And this can also be a spam mouth and using class list, we add the class of mouth to give it the right style to it, and then taking the diff upend child, we can upend the mouth to it. So suit that looks like so refresh Start game. Now all of our aliens have a mouth and they're ready to move along the page. And there's one other thing that I wanted to do before we conclude this lesson. Add in a random color, so just create a quick function for that and random color. So what this function will do is it will return back a random color and what we're returning back. And I just saw you on the console that what we're doing so we're taking were using math, JavaScript, math, random and as you can see random generates this huge string, and what we want to do is what transform it into a string object and 16. So that's going to be in a hex value. And we know that with the colors they're hexi decimal values. So that means that they can be numbers and digits up to a B C D E f. So we're grabbing our string value, and now we just need to six characters from there. So taking the sub string is another JavaScript method. We're going to return back on Lee six of those characters. So there were generating essentially randomly ah, color value. And all we have to do is add the hash in front of that formula, and that's gonna return back a random color. Instead of having all of the aliens as blue. We can take Div style background color and set a background color using random color. So now we can try that. You can see now each one of the aliens is gonna have a different color. They're always gonna have different colors randomly generated so you could have any number of colors displaying the aliens so ready to move on to the next lesson. And this is a really useful, handy function where you can generate a hex color really easily using JavaScript. So go ahead and add this into your project. 11. 10 Lets Get Moving: Welcome back in this lesson. We're gonna animate the aliens. We created some nice looking aliens in the last lesson, and they're just sitting there, so we want to make them move. And we can do that within that same animation function that we have with us, the update function and going through and just checking to see what their position is so we can add them right In the beginning of this function, creating a temp aliens node list. This is gonna be on variable objects or using document and query selector all we're going to select all the elements on the page that have a class of alien. So this is the one that we just set and these air going apply to all the ones that we dynamically generated, and then you can see if I log out temp aliens, you're going to see that we're gonna get a lot of stuff logged out, but we get the whole node list of all the aliens that we have available. So that means that we can loop through this list of aliens and apply our animation to them . And the way that we want to do this is We want to actually start with the last alien because that's going to be the 1st 1 that's going to reach the end, and it's also going to be the one that's the lowest down. So we want to make sure that the way that they're moving when they get to the right hand side, we're looking at the last one, and that's the one that we're applying the first movement to. So doing that we can loop through this node list and creating a variable of X and this instead of being zero, because wanna go backwards? So we're taking aliens length. It's a no wordless So does have a length property. And where is this subtracting one off of it? And then we're taking the value of X, and we're making sure while X is larger than minus one and X is gonna be subtracting one so it's gonna be able to break out of the loop and then taking a variable. We can set up a variable called L, and this is going to be the temp aliens selecting the attempt alien item from the A realist . That's that notice that we created up here and there were a few variables that we did set when we were creating them, and that was the X Y position as well as the direction move. So those were the three key ones that we need to take a look at. And then we're also updating the aliens accordingly. So roughly around the same thing is happening here. So we're going to update before we finish the loop, we need to update their top, and they're left positions with whatever the values of the element X and Y positions are, and then also the direction moving position. We have to look at that as well, because that might need to be adjusted if we've hit the end. And so these aren't going to be the exact positions, and I can update thes two B l position and then l and so on. So this will give us the ability to move them because instead of the div were referring to the element. So that's going to give us the same values that we set what we're constructing the alien. So that's what we need to do is we need to check to see if the alien has moved off of the offset position of the container, so it's right that condition. So we've got our L Exposition. This is where the alien exposition is located, and we're checking to see if X has gone off screen. So if it's gone outside of the container dim with area, that means that he's gone too far. But we also have to count taken account the offset with off the element as well. So we're subtracting getting this position on the far right, which is the container dim with. And then we're subtracting the alien offset with to that to get the position whenever the aliens about to hit the right hand side. And there's also one other conditions who are checking to see if that is true or were checking to see if L exposition is less than zero and this is actually container dim left. And if that's true, then what we need to do is we're gonna change direction. So we're multiplying this by negative one, and when you multiply one by negative one, you end up with negative one. But if you multiply negative one by negative one, you end up with a one. So this gives us the ability to kind of flip back and forth between that value, the negative one in the one. So this will allow us to account for direction. We're also gonna update the Y position as we want the aliens to move down. So we're incriminated by 40. So this gives us our direction, movement, and the next that we need to do so we don't need to set the Y position because we're setting it over here and we just need to account for the player alien speed, and we're gonna multiply this by l direction move as we're setting this and this will give us whichever direction if we're moving left or right, so we're just gonna increment the position. So let's try that and see what happens. So now we've got a bunch of aliens, so they're moving, and we initially we had it an air there where they just seemed to drop off because we didn't given opportunity to move directions. So we're actually starting them off too far over. So let's subtract something off of that left position. They're going a little bit too far off to the left. So that means that we're position them their original position there start position isn't a good start position, so we need to make an adjustment on that. And that's when we were constructing the aliens that we were setting the Y position. So maybe let's add a little bit, too, that positions will add 50 to it. So we're not gonna have thes aliens dropping off. So allowed 50. And we need to also add the 50 down here. So let's see what happens now. It looks like they're moving properly and coming up next is where we have to do. Collision detection and a few other tweaks and adjustments to the game. The other thing, too. We don't want the aliens running off of the screen at the bottom, so that basically means that the player lost the game. So we have to account for that. So all of that and the tweaks adjustments are coming up in upcoming lesson 12. 11 Tweaks and Fixes: Welcome back this lesson. We need a way to end the game. Previous lesson. We set up the aliens, they're moving along there. Updating the CSS 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 whenever the aliens hit the bottom, that means that the game is over. So in this lesson, we're gonna 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 the 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 gonna be greater than and this is what we're gonna be looking at, the positioning of the my ship and we can get a value off offset top position for that. So now whenever the aliens crossover that top position of where the ship is located over, then that means that it's game over. It will add in the functionality for that. So first, let's try that. It you can see that the aliens air 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 involved. 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 could subtract 20 off of it, and that will move it slightly above. So that will mean that if they reach offset because the bottom to the top position of it is here. So maybe we wanna 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, were already setting the game over option within player values. So next let's create a function that's gonna 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 gonna be opposite of what you do when the game starts. So I'm gonna move this closer together where we've got the game start function or we've got the start game and the game over is gonna 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 block to show the start button again could update the information within that start button. There's a few different options that are available to you so I can update the inner HTML and we can say restart new game. So see how that looks now whenever the aliens reach where our paddle is located, we've got game over, and we also notice that the game update didn't stop. So we need to handle that as well. So with game over, we want to stop the adoration 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 he 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 anymore functions. Now let's see how that works. So now that game should stop Whenever one of the aliens passes over that area, you can see now that alien has crossed over, so it is game over. We get our message, restart new game. 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 gonna 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 I start the game. First thing that we're doing is running clear aliens and they were looping through all of the aliens. And we don't have to do this backwards. We can if we want, of course, so taking temp aliens length. So while X is less than temp aliens length and here we'll just increment X. So as we loop through the temp aliens, Index value of X were selecting the element. And then what we're doing is taking the parent node, so moving up one level to one of the parent is, and we know in this case it's container. So in orderto 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 court. 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 start 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 inability to actually shoot the aliens and using collision detection that's going to be coming up in the next lesson. So go ahead and add inability to end the game check for where the alien position is on the vertical. And if there 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 it, 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 added that option to clear out the aliens when we restart the game and add in the end of game functionality. 13. 12 Hit Detection: this is gonna be one of the most important subparts of the game. So already have the game plate where the aliens air moving. We can also shoot, but we have no way of stopping them. And once they reach the bottom that's came over and we've actually lost. So we need a way to prevent the aliens reaching the bottom. And that's gonna be to shoot at them with our Red Bull that we have the red projectile that's coming off of our ship. So we need to be able to also detect to make sure that if this element, that's containing the Red Ball, which has a class of fire me whenever it hits one of the aliens to detect that if there's a collision taking place, and the way that we can detect collisions is we know that each one of these is a square. So even though this one is represented as a circle, it's also still represented. A square in JavaScript causes an element, so it's got all of the different points where it's that got the top left point. That's gonna be the 00 point, and then it's got the top right point it's got the bottom right point and then the bottom left or the bottom left point and the aliens have the same thing. So each element has that, and we're going to check to see if there's crossover from any one of these points to the other element, and the best place to do this is as we're looping through the aliens so we don't have to look through them another time We're going through the update. We can also check to see if a collision has taken place. So as we go through here, we've already selected the element, the alien element. And we can check at this point to see if there's crossover between that alien and fire me element. So checking to see if is collide and we'll create that function we're gonna pass in. The two objects were passing in the element, which is the current alien. So as we loop through, we're gonna account for each one of the elements that has a class of alien and then fire me Element is the only one that's got the projectile, and that's the one that we're moving up here as well. And in order to account for this. We need to consider where it's moving and it's position. So we're checked to see Fire meets position as well as where it's top left and it's corner position is so we're checking to see that, and all of that is gonna be done within a function called is Collide. And if there is a collision, we're gonna run the block a code for the collision. But for now, we're just output into the console that we've got a hit. So we have the ability to check through each one of the aliens as well as the projectile element and see if there's any cross over. So now let's add in our function for checking to see if a collision has taken place and we're gonna use that bounding client rectangle value that we saw earlier. So we've got our fire me object. And if we get bounding client rectangle, so using the same method where we got the positions of the container, we can see we've got a left position are right position, a top position and a bottom position. So if we check this element and then we do the same thing for each one of the aliens as we're looping through. And if we check the bottom position, the first rectangle against the top position of the other rectangle. We know if there's any crossover, or if the that one the top position of 1st 1 is crossing over the bottom of the alien, then we know that there's been a hit on the vertical site. I know this is a fairly complex to explain, so the best thing to do is to just try that it and I'll show you with how it works within the chord format. So we're passing in the two parameters, the element and the fire meet object, and this is also going to make it more dynamic as we know this one's always fire me be is always the same element, but because we want the consistency in order to create a more dynamic. If we add in more projectiles, then we're gonna have flexibility on checking the collision detection as well. If want check collision on any other elements, we can just simply add it into the formula and check of theory is a collision. So we're gonna get our bounding client rectangle and then also another one for the B object , the B element and taking B passing in that same method. Bounding client rectangle. So now we've got all of this information we've got. It's essential where it's positioned, how wide it is X y position of both of the elements. So we're going to do to check. We're going to check to see if there's no overlap, and if there is no overlap where they were, negate that, and that will turn into if there is overlap. So let's work at this formula, and it is gonna be rather long. So first we're looking at the bottom of rectangle eight, and we're checking to see if it's less than the top of rectangle B. We're also gonna check the office it. So this way we're gonna actually know if there's any overlaps or checking the top of rectangle A against the bottom of rectangle beat. This is only gonna paint part of the picture because this is going to be checking on the horizontal so we can also pass in. And we can see that if the projectile is over top of one of the aliens horizontally or vertically, then this is going to come back, and now, because we've negated it, it will either ale come back as true if there is overlap. So we also need to look at the horizontal, of course, and this formula is going to be looking to see rectangle. A right sight is less than rectangle be left side. So if there's overlap there and then we also need to check the opposite. So I need to check rectangle a left, see if there's overlap and check to see if this is larger. And actually, this should be larger than so. We're checking to see if it's greater than rectangle B right side. There's overlap on the horizontal as well as we're checking to see the overlap on the vertical. So I think we're ready to try that. So we saw that as it passed through those elements that hit was registered on. If you saw that because we are moving rather quickly. But you see that whenever it passes through those elements, it registers the hip. So next we need to take some type of action. If this hit takes place, we'll show you how to do that in the upcoming lesson. For this, make sure that you can check to see if there's a collision on two different elements, and if there is, then we're going to return back. True. And we can try that function where we're passing in the two parameters and we do have two. We've got one called my ship as well as we've got the container. So we pass in and we know that obviously the my ship is on top of the container, so the collide is coming back as true. So you could try that for yourself. And if you take my ship and the other object that we have, the other element that were connected to is the start button, so we can check to see if the my ship is on top of the start button if there is a collision . And so this one comes back as false because there's no overlap there. You could try it on various elements on your page manually within the consul. If you want to check out the functionality of the collision detection 14. 13 Hit Target handle: Welcome back. Last lesson. We set up the ability to check to see if one ever element was in collision with another element. And if it waas and this is where we're checking to see if our projectile has hit the alien and if it did, then always putting currently right now is hit. So it's update that and we could do quite a bit of things here within this function so that we got a hit. We can update the alien speed if we want, so every alien you hit, the alien speed will increase, making it harder. Also, we can take the player score and we can increase the player score as well. So increase player score by one. We can also put our scores. So we've got this output score area. So every time we update the score, we should I put it so the player can see their current update the player fire to be true or false so that they can launch another projectile and also to the fire meet elements. Let's get the class list and add a class of height that's no longer visible on the page. And we also want to remove that element. So we've got the element that we collided with is here so we can select that element. And just as we saw earlier, when we're clearing out all the aliens, we can traverse up to the parent node and then from the parent node, we can remove a child from there and will remove the child matching those element values. And of course, this is the element that triggered this collision. So this is the one that we're getting those values from. We can also update the position of fire me. So where we are updating the position of this elements taking the container dim, dim value. So we've got our fire. Me? Why position? And we can update it to match the container height so you can take the container dim height value plus 100 reset the position of fire. Let's try that. So refresh. I'll make this a little bit bigger, so refresh again. So we hit start and we can see that our score goes up as we hit each one of the aliens, and I know they're starting out rather fast, so you might want to update that as well and toggle that to make it more playable. So these are some of the variables that you might have to adjust over time. So once you cleared out all of the aliens, we should actually be able to detect if the game is over. So we can do that as where looping through the different aliens. And when we do the update and we see there's no more aliens left, that means that the player has won. So checking to see an ad in the condition. If temp aliens length is equal to zero, then that means that the game is over. But this case the player one. So it's still got the player game over launching and in the console log, we can output a message you want. We might also want to add in a message area for the player so that we can communicate with them or we could add that into the top part. So how about we added in just beside score and this will be another span that will have a class of message and this is where we can output information to the player, and I'm gonna actually put it on the right side of score so that the score doesn't actually move in. The message can show in, not show. So it's select that as an object to make our connection to that element that we just created using query selector, selecting the element with the class of, and this should actually be looking within the document, not within the container. So update that. And then we can do a quick refresh and make sure that message is available. So we are accessing that span. So next thing we could do is we can simply add in a function in order to handle that. So this can output and where we currently are out putting those console messages, we can add a message to put into the message area. Instead, we've got quite a few consul messages that we still have. So it's update that into the message area, creating a function in order to handle that and call this message output in a passing value . And then this value is going to be used within the message object, and we can take an update the inner HTML with the message contents. So next let's make a selection will also select the console like dio find in replace, replace the console log with message output, and we can go through them one by one, just to make sure that we don't have anything that might throw in there. This one will throw on air so we can't output an object in that format and the same with the difference were not able to put it, so that should update the consul messages. So now we should get a message that we get the hits being output there, and then we get the you one message so coming up next, we have a way to start the game to end the game, and we need a way to fine tune the game and make some tweaks and adjustments to the way that it looks. Play through it a few times. Make sure that all the functionality is there that we're looking for, so that's all still to come. So go ahead and add in the message area as well as the wind condition into your project. 15. 14 Final Code Tweaks and Updates: when you're creating games, you're gonna find your playing through them over and over again. Until you finally get the finished product that we're looking for and that you set off to do, I'm gonna update some of the styling within the top bar that so we've got our message and our score setting Ah, height for it with and the width is just gonna be 100% full across said, Ah, background color and make the background color black and the thought color white and also text the line. So center the text, so see how that looks. So now we've got our score at the top and we're ready to play through the game and just get a better feel for to see if anything's going wrong if we need to make any final adjustments . So we've got our start game button. We've got our ship here, so that's all visible and a score of zero when we started so clicking through. We see we've got five aliens, we can shoot at the aliens, and the objective is to get the aliens before they get to the bottom and you can adjust tweet the speed of the aliens as needed. So once you get all of the final aliens, you get you one on within the output, and you should also have the option to start again. So we didn't finish that finalizing of the game play, and we can run the same function as we did when we one where we go through and we reset the game playing. So we've clearing out all of the aliens, so that's another option that we can do. So we have that function that we set up in order to run the game over, and we don't have that over here. But we do have the game over functionality. So let's add, didn't. So instead of just you one, we want to run game over function. And that's the same one that's gonna reset some of the values in re show our start button so that we can restart the game and play get, and all it's doing is display block restart New game. You could also output the message here if you wanted to, so that's another option that you have available so again, it is quite a few times that you usually have to play through just to make sure you get all of the functionality that you want, and this time we'll try it one more time. So we have the ability to restart the game. We got our score, we got you one and restart the game. So we started a fresh game, noticed that the score didn't go back to zero. So that's one of the thing that we did to take care of and within the player object taking our score, so that should always go back and reset to zero. I'm also gonna make the fought size bigger of the top bar so that the thought is a little bit easier to see and read, and then we're gonna also start it with less. Aliens would start out with one aliens, so this should be fully dynamic. And this would give us the flexibility that if we have one alien or we could have 100 aliens, whatever we want in the game play. So again, we've got that re start and the score didn't update and it did update in the background. But we didn't update the output of the score. So again, that's another thing that you do need to make sure that you are taking care of. So whenever the score changes, you need to update to the new score value. So this is again resetting that visual stuff for the player. So over here we're updating and we're out putting the score content, using players score. But we're not doing that in the start of the game, and we set up a new score value. So that means that we need to put it to the player. Let's try that again. So now we get a score of one. When we hit restart, it should go back to zero other thing to notice. A swell so we don't necessary. So we have the ability to press the space bar and we show the fire me. And then when we restart, we see that at launches. That's something else that we need to also reset. And we were controlling the fire me option here where we were adding in checking to see if it's true, and if it is then or if it's not true, then we can add shoot. Otherwise, it's in play, so the game over really should launch the function. That doesn't give us the option to click the space bar and add that fire me So we can set that to fire me and said it too true. And then also take the fire me object and apply a style property to it. Or you can use classless tied as we've used class list high as we use classless hide within the ad shoot. So this is the one where we're updating the class list. So you got to be also consistent with how you're updating that. So the fire me is updating the class and adding in height, so it's not gonna be visible anymore. And then when we start the game that we can reset the fire me to false, that will remove out that fire me from showing up So we don't have that I'm anymore. And then when we restart the game, we're starting the fire me again. So again, play through it several times, make sure that you're happy with the functionality that you've got. You can also update and tweak some of the variables as needed. You want the aliens to move faster If you want more aliens, the game should be dynamic at this point, so it should be able to accommodate any number, and we could see that it's also dependent on the size of your screen. So if we have 20 aliens on a full size screen, it's OK and you see they are speeding up quite a bit. They're moving or really, really fast. Play through it several times. Make sure that it's challenging enough. And again you can tweak these values. You don't have to always increment the speed either as they get hit and ensure that you're providing a really good user experience. So coming up next to do a full run through off our gaming application that we've been building. 16. 15 Quick Fix Alien Count: Welcome back This listen going to be a quick bug fix and in the last lesson, we increase the number of alien. So we saw that when we have way too many aliens, but we have a small screen than the user. Experience is horrible that they basically starts and stops. It's almost impossible, but on a larger screen, it's fine. So you can handle this one. We're setting up the aliens, and as we're creating the aliens, we can check because we do have their position, their role. Why value? And as we're creating these, we can check to see if it's past a certain point. And if roll why is passed, whatever the value off container, dim height and then let's do minus 200. So whatever this value is, if we're past that, then we don't want to create any more aliens. That's too many aliens, and it's going to provide a port user experience and again, always thinking that flexibility. So all we need to do is to simply return it, And this time, when we hit start game, you're gonna see that we're not producing as many aliens. But when we go on the wider screen. We do the same thing. We didn't change any of the code but were stable, able to comedy all the rows of aliens. That's amore functionality that you can add in as well as you can create some more dynamic . When you're creating the aliens, you could make them wider so you can adjust their style with, and all of their different variables can be adjusted to create a different user experience . So go ahead and add that quick update to ensure that you're not producing too many aliens. And that doesn't matter what size of screen the players playing on that they always get a fairly good experience starting up the game. 17. 16 Alien Invader Code Review: great job and congratulations on making it through this section. I know we had quite a bit of complex code that we looked at, and in this lesson we're gonna do a quick overview off all of the court that we used in order to build the application. And it is always important to play through your application and make sure that it met all the requirements that you said it. So in this game we set out to create some aliens, and we wanted to make sure that we had a way to shoot the aliens. And we don't want the aliens reaching the bottom if they reach the bottom before you have an opportunity to kill all of them, you lose the game and it's game over. And objective really is to get all of them before they hit the bottom and win the game. So either way, you end up with the score and then whatever he score you have, you can always restart the game and we credit enough flexibility within the game code that we can update the number of aliens so it could literally be a random number of aliens if we want and we can do quite a bit of flexibility cause it's fully dynamic. So let's run through the source code. We had to set up some styling to make it look pretty, of course, and we didn't focus a lot of time on the styling, and you can adjust the styling as needed to make the aliens look or whatever characters that you want coming down on your screen within your game. You can adjust the styling accordingly. Then we set up some basic HTML structure the way that usually approached. This is I comment to what I'm gonna need to present to the player within the game. So I know I needed a score and also needed mean area where the game is gonna take place. Start button to start the game and then the ship and the fire Me. These could also be added in dynamically with JavaScript, but I chose to keep them in the beginning in the structure so that we have a better concept of what we're building. So there's a bunch of options here where you can make it fully dynamic and build and construct all these elements with javascript. If you want it to a swell so you could make it fully a Java script Onley game. Also, we added in later on, we added ability to send a message to the player. We used bunch of variables to select the JavaScript document objects and make connections to those so that we could reference those using the variables that we set up and we also tested. Just make sure that we had all the connections adding in we needed a few event listeners to add in. So one of them was a start button to start the game. We set up a few global variables that we use in order to pass information between the different functions of the game play and then also an event listener for the key down. Because this is keyboard based game, and we also needed to listen for the key up within these. Basically, we're tracking whatever he gets pressed and we're using the key code, and we're also passing in that as an object. So either it's a Boolean. It's a Boolean value. See their true or false. If the key is pressed than it's true, if it's released, then it goes to false and that's how we know within the update function, which we are going to talk about, what actions where we're positioning the current player ship. So this is where we've got the ships movement, the player's movement that we were using Next. We came into our start game and the start game function, so we launched this whenever the start button is pressed, and that was our main starting point for the game. We check to see if game over is if it is true, and if it is true, then we know we can restart a game. So you said, Game over to false. We set up a bunch of variables. We have one here to clear the aliens. So this was just a loop threw off all the elements with the class of alien cause we're creating these dynamically using JavaScript, and we're just simply removing them out of the page in order to be able to restart the game . We also have the game over function, which essentially does the opposite of the start game, where we get our restart button back and we also block out a few actions that the user can take. So while the game is when the game is started. We've set some variables, and of course these can be adjusted. So we've got a player score alien speed. We've got ability to fire. So that's I I get that's gone to false. So that means that we can shoot. Also updating the score. Updating how many aliens so set up aliens is a function that we use in order to create aliens. And then we've got an output message. So this was an update from the console messages, and this could be anything any information that we want to pass over to the user. We have a function in order to set up the aliens. So this give us complete flexibility to set up a smelly aliens, as we specify in the set up aliens function. So it could be any number, and we looped through that number. So we create a default starting point, and then we have a variable for role, so that basically gives us the ability to stock the aliens next to each other. And once we pass a certain value, then we moved them on to the next role, and we start again from the beginning of the role and then this gives us the ability to stock multiple rows and columns of aliens. We have one function that actually makes the aliens. So this is makes the visible elements that we use as the alien sets alien maker where we pass in the row in the tempt with. And then as we looked through this number, we continuously make the aliens, and all of these values are adjusting and changing. We created one to generate a random colors. This is a really nice, neat, compact statement that you can use in order to get random hex color values, and we utilize that in when we're constructing the alien. So we also added in a quick fix in the last lesson to make sure that we don't overrun the screen with too many aliens as we wanted the application to be a flexible and dynamic as possible. So we didn't want tohave aliens past a certain point. So it doesn't matter how many aliens were asking for. They're never going to get past this certain point, which is container dim height minus 200. So that's roughly around here. But of course, depending on the size of the screen, your screen might be way smaller, so you won't not even have any aliens. So this was something that we added in. And of course, this could be adjusted as need. Also, we created some elements on the fly, so created a div, and this is are mean alien container would give them some eyes to make them look more like creatures. Gave them a mouth, all created dynamically. And we had set up the styling. So basically all we had to do is out in the classes and then appended to our main div. And that gave us that friendly alien face that we see on the screen. Next we went through and we set up some positions for those. And then we us adjusted the style values according to our positioning of where the elements should be. And we also had one here for direction. And what direction did is it allows the aliens to get to one side and then turn around and come back the other way. So this allowed us to construct all the aliens and make them look the same and other than the random color. And you can also fluctuate this if you wanted different widths. You could add this in as well when you're constructing the aliens so you can make them look a lot different. In really interesting, we have a function to add ability to shoot. So shooting is the space bar or the up arrow. And what this does is this. We only have one projectile out of time. So once that's in play in on the screen, we don't want to be able to shoot any more projectiles until this one's taken its course. So we removed the hide class from the Fire me element, and then we position our default starting position for the element. And this is according to where the ship is located. And then we fire off and we show that on screen to the user, I just in the style property of the fire element. We have one. We're checking to see if collisions are taking place, and this was fairly complex. But it's getting essentially the boundaries of two different elements and seeing if there's overlap on them and also seeing if by there's horizontal and vertical overlap, fan and uh returned back accordingly. After we've done their comparison calculations there and then also, we have one for message. Outputs of this gave us the ability to really easily output content for the user to be able to see. And we updated all the consul messages where we've got that you won, you lost hit and so on, putting into the console, which obviously is not visible to the player. So we updated those two output into the message output function, and you can adjust these as needed as well. So if you do want to have more messaging to the player, this is always a great spot, and this is where you can add that information in. And then really, the core of the game was happening within update. So this is where whenever we start the game, we launched the update animation sequence. So this is AnAnd animation function that's gonna loop through. And then once it finishes, its gonna call on itself. So it's continuously going to allow us to run all of the code here within this block of the function and constantly updated and recall it again until, of course, we hit player game over and once that is true, then we stop. And that's gonna be the last iteration of update until we, of course, we restart the game. So what do we do in here? And this is where all the action takes place, where we look through all the elements that have a class of alien. We checked to see if this value is zero, and if it is, then the game. It's one, so there's no point to continue. We also looked through all of the aliens and we checked for collision. So this is that collision detection here. If there is a collision, we've got some code that runs whenever there's a collision. So we remove the alien. We update the players score, we re set ability to fire and we have put a message of hit. We also checked to make sure that the element isn't out of bounds and if it has hit hit that reached the bottom, then that's actually going to be a loss for the players of the game is over and we run the game over function. So if we get ah win or a loss, we run game over and that allows us to re scut reset our player area and if none of those air. True, we adjust the position accordingly. And according to the alien speed, we also have our direction. So this is where we toggle the direction to either go right or left by a negative one or one, and we multiply the position by that the speed by that. So if we multiply one by negative one, it returns back. Negative one. But if we do a negative one by a negative one, it returns back one s. Oh, that's were able to flip between negative one and one and give us the ability to kind of switch directions when it reaches the end. Also out putting that element content into the page by updating its style. So this is where we add in the visible part of updating where the expositions and the white position is. Next, we select our ship position. So we grab whatever the position of the ship is, and we adjusted accordingly. We have also our firing position. So if the if the fire projectile is in play than we update its position. So subtract 15 for that, and we make it visible to the player. If it's out of play than we've simply hide it, so we don't do anything with it. If the fire is is not true, and if it's less than or if it's greater than why position, that's that's one. Basically, we take it off the screen. This is what we have. The players actions were checking that key, the object to see which he's air being pressed and then we update the position accordingly . And then, lastly, we output it for the visible area of our div, updating the style property of the My ship element, allowing us to move the ship according to the players key presses. And then we re launch the update function and do it all over again. Source code has been included, and I do encourage you to try the code out for yourself. If you have any questions or comments or need clarity on the content that's been covered in the course, I'm always happy to help and address those Thanks again for taking this course in the section, and I do congratulate to on making it through hope you've enjoyed it. I'll see you in the next one