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 going to do a
quick overview of 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 of the requirements
that you set out.
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 the 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 score you have, you can always restart
the game.
And we created 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 because 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 they usually approach this is I come into what I'm going to need to present to the player within
the game.
So I know I needed a score and I also need a mean area where the game is going to take place, start
button to start the game and then the ship and the fire me.
This could also be added in dynamically with JavaScript, but I chose to keep them in the beginning
and 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 as well.
So it could make it fully a JavaScript only game.
Also, we added in and later on we added ability to send a message to the player.
We used a 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 need 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 gameplay 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 key 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.
So either true or false.
If the key is pressed and 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 ship's movement, the players movement that we were using next.
We came into our start game and the start game function.
So we launch this whenever the start button is pressed.
And that was our main starting point for the game.
We checked to see if game over is is true and if it is true, then we know we can restart the game.
So we set 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 through of all the elements with the class of Alien because 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 set some variables and of course these can be adjusted.
So we've got a player score alien speed, we've got the ability to fire.
So that's I guess that's gone to false.
So that means that we can shoot.
Also updating the score, updating how many aliens 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 can 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 gives us complete flexibility to set up as many aliens as we specify in the setup.
Aliens function.
So it could be any number and we loop 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 stack the aliens and.
To each other, and once we pass a certain value, then we move them onto the next row and we start
again from the beginning of the roll, and then this gives us the ability to stack multiple rows and
columns of aliens.
We have one function that actually makes the aliens.
So this makes the visible elements that we use as the aliens, such alien maker where we pass in the
row and the tenth width.
And then as we loop through this number, we continuously make the aliens.
And all of these values are adjusting and changing.
We created one to generate a random color.
So 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 as flexible and dynamic as possible.
So we didn't want to have aliens past a certain point.
So it doesn't matter how many aliens we're asking for, they're never going to get past this certain
point, which is container demand height minus two hundred.
So that's roughly around here.
But of course, depending on the size of the screen, your screen might be way smaller, so you might
not even have any aliens.
So this was something that we added in.
And of course, this can be adjusted as needed.
Also, we created some elements on the fly, so created a div and this is our main alien container.
We gave 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 add in the classes and then append it 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 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 want different widths, you could
add this in as well when you're constructing the alien.
So you can make them look a whole lot different and really interesting.
We have a function to add the ability to shoot.
So shooting is the space bar or the up arrow.
And what this does is this.
We only have one projectile at a time.
So once that's in play and 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 Hyde class from the fire 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 adjusting the style property of the fire
element.
We have one where 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 there's horizontal and vertical overlap and
then return back accordingly after we've done their comparison calculations, sir.
And then also we had 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 console messages where we've got the one you lost, hit and so on, outputting
into the console, which obviously is not visible to the player.
So we updated those to 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 an update.
So this is where whenever we start the game, we launched the update animation sequence.
So this is an animation function that's going to loop through.
And then once it finishes, it's going to call on itself.
So it's continuously going to allow us to run all of the code here within this block of 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 going to 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 check to see if this value is zero.
And if it is, then the game is one.
So there's no point to continue.
We also loop through all of the aliens and we check for collisions.
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 reset the ability to fire and we output a message of hit, we also check 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 player.
So the game is over and we run the game over function.
So if we get a win or a loss, we run game over and that allows us to reset our player area.
And if none of those are 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 to one.
So that's where we're able to flip between negative one and one and give us the ability to kind of switch
directions when it reaches the end.
Also outputting that element content into the page by updating its style.
So this is where we add in the visible part of updating where the positions and the Y position is.
Next, we select our ship position, so we grab whatever the position of the ship is and we adjust it
accordingly.
We have also our firing position.
So if the if the fire projectile is in play, then we update its position.
So we subtract 15 for that and we make it visible to the player.
If it's out of play, then we simply hide it so we don't do anything with it.
If the fire is is not true and if it's less then or if it's greater than Y position that someone basically
we take it off a screen.
This is where we have the players actions where we're checking that key, the object to see which keys
are 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
mothership element, allowing us to move the ship according to the player's key presses.
And then we relaunch 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 and other content that's been covered in the course, I'm always
happy to help and address those.
Thanks again for taking this course and the section, and I do congratulate you on making it through.
Hope you've enjoyed it.
I'll see you in the next one.