So at this point, you should be able to play through the game and have a fully functional game, also
go into your numbers and as you're starting the game, you can adjust these to 20, set up as many as
you want initially, and it should all work as well as there's flexibility in the screen size and dynamic
capability and making those adjustments as needed.
So if you make it wider, then it's going to work and it's still going to work the same way.
So that's really the objective is to try to make it as dynamic and flexible as possible and reserve
all of the gameplay so that you have the same functionality.
It doesn't matter how wide your screen is going to be.
So now let's go over and do a quick review of all of the code that we did and we went through in the
earlier lessons in order to build this application.
So there is some success and the success was mainly to present the content in a better format.
Also, we came into our project setting up our initial HTML, so we looked at what we need to present
to the user in order to prepare them for the gameplay.
So we have a score, we have the enemies left.
We have a main container where we're going to outputting all of the gameplay, a message, a button
to start the game and a basket, which is the player's element.
Then we use JavaScript to connect to all of those elements and have them as objects in JavaScript so
we could utilize them in our code.
We also set up some of the variables we use get bounding client rectangle in order to get the dimensions
of an element and use that and set that into variables that we could utilize within the code as well.
We set up a few default objects, so the keys object, which handled all of the key presses and then
the player object would handled all the player values.
Then we added in some of that listeners.
So mainly the start button click and then we have event listeners listening for key up and key down
the start, but starts the game.
So within the starting of the game, we still have to prepare the visuals.
So we hide the start button, we hide the message, we show the players basket, we reset some of the
player object values and then we update the score.
So it's visually updated because every time we make an update to the score or to the total bad guys
that are left, we have to update the score.
So we're using a function called Score Update to create that.
And what that does is that outputs the score value as well as the enemy left value and updates it on
the page for the player.
Then we set up bad guys.
So this is dynamic as well.
We can specify how many we want to set up and passing it into a function that loops through and then
make bad is the core function that's generating the bad guys where we use JavaScript to create an element
on the fly.
We also once again update our score.
We decrease the number of bad guys that are sitting there within the queue and we also check to see
if there are any still sitting in the queue.
If we're above zero and if we're not above zero, then we know that the queue is empty.
We don't have any to create any more at this point.
We create an element, a div on the fly, adding in some inner text in our HTML to it.
And then we've got some randomness where we're randomising its height values so that adjusting the height
as well as the line height to the same value, creating a random background color, so generating random
hex value, we add in the class of bodies.
So this is how we identify the elements that are the bad guy elements on the page by adding the class
of body.
And then later on we're going to scan for all the elements of the class Abadie and then update their
position.
We set a random X value and if X was less than zero, then we just set it to 100 because we don't want
the value of X to be off the page.
We also set value for Y and then this is to show it off screen setting random speed.
So these are all numbers that can be adjusted and manipulated as needed, that we append it to the container
object and update its elements left in top position according to the Div, X and Y values.
So those are numeric values.
And then for left and top, we need a string value with picks at the end.
So a number with picks at the end play game was our core function.
So this is our animation function that continuously loops while the player inplay is equal to true and
once that's equal to false, then we're not going to be able to play the game anymore.
We checked to see what keys are pressed and then also considering the boundaries.
Then we make an update to the bound basket Y and bound basket X values and those we use in order to
adjust and output the style values of the basket element.
And then we request the animation frame, we also loop through all of the elements with class of body,
and if there are none, then we end the game because that means the game is over.
There's nothing more to play.
And if there are some, then we update their position.
So while we're updating their position, we get their Y position and we add the speed to it.
So that gives them all the different dynamic, different speeds.
We also check to see the position of y if it's gone off screen, then we reset it back to the top.
So bring it back to the top and we randomize where the exposition is.
And then we update the exposition and later we update the Y position.
But first we check to see if a collision has taken place.
If there is a collision, then we update the player score.
We remove the element from the container, we update the score visually for the player, and then we
make another bad guy.
And we also put the console hit, which is something that can be removed as well.
We could have collision detection.
So this is where we're checking to see if the basket is collided with the element.
And we check the values of the get bounding rectangle object and we've got the bottom and top positions,
top and bottom positions.
So we check the vertical first and then the horizontals.
And if there is no overlap, so what we do is we negate that.
So it's turns back as a true value instead of a false value.
So it makes more sense when we are checking to see if there's a collision.
We could also negate it here at this point and remove the negating down here.
So this is optional.
You could do it either way.
Then we also have the score update function and we've got the key press handling.
And what the key press handling does is all we do is set according to the key event.
So we've got the keys object that has all the right key events listed in it.
And as they get pressed, we just simply set them to true our Orient.
And when they get released, they're set to false.
And we use these values as we're iterating through the animation frame and checking to see what keys
are currently being pressed so that we can take the appropriate actions that moving the element on the
screen.
And that's it.
So hope you had an opportunity to try out some of the source code and try it some of the game functionality.
Thanks again for taking the section on, building out the scheme from scratch using JavaScript.