Welcome back to our last lesson of the section where we're going to be reviewing our gameplay and just
making sure that it is functioning as intended so we can make our game back up to 100 percent and minimize
the screen area.
So we're all ready to try that out.
So we've got our press start and we've got our bird that's flying around.
So objective is to try to make sure that he doesn't hit any obstacles and try to keep him alive as much
as possible.
So once he hits one of the obstacles, then the game ends, or if he runs off the bottom of the screen,
the game ends and also want to make sure that we are able to restart the game.
So it's another crucial part that you should always check.
And we see that we are able to restart it.
And we saw that we also developed it fairly dynamically.
So some of these variables, we can adjust our speed as well as we can adjust the spacing between the
obstacles.
So if we wanted more spacing between the obstacles, we can add that in as well.
And now we see that we've got our speed.
So these are all dynamic, and when you are developing content, it's always best to keep it as dynamic
as possible.
So this leaves room for extending on it, expanding on it, and gives you the ability to make adjustments
to really tweak the gameplay.
When you need to tweak that, everything looks like it's working properly.
So we are ready to do a code review of all of the lessons that we've covered in the earlier part of
the course.
So we're looking through and we went through first.
We set up a bunch of styling and I don't want to focus too much on the styling and you can customize
the styling as needed.
So this was just to display the content in a bit better format.
And also the most important part was that we're setting position to absolute that gives us the ability
to move these elements within our screen.
We also tried to keep the HTML to a minimal as much as possible, minimizing how many elements we are
creating and want to keep the bulk of the element creation and the bulk of what's happening within the
scheme staying within our JavaScript.
Because, of course, the focus of this course is to work with JavaScript, become more familiar JavaScript,
interact with the elements on the page using JavaScript.
So we came into our project.
First thing we did is we set up our objects and these objects connected to our elements on the page.
So that made it really easy in order to select those elements.
So we gave them meaningful names and used our query selector in order to select the elements on the
page.
So brought them into objects and that allowed us to reference them in JavaScript and make use of them
within our JavaScript.
Next, we added in our event listeners.
So this is where all the interaction takes place.
We added in event listeners for certain key elements on the page, and then we added an event listeners
for any of the Moorestown functions.
So any time or the key down functions.
So any time the player is pressing one of the keys down, we're tracking which key gets pressed and
we're placing it in an object called Keys.
And then we're referencing that object in order to create our movement.
As we're looping through the animation frames, we also have a player object.
So this was to keep track of player information and player values that we need to use within the game.
And having these two within the global scope made it easy to reference within the functions we could
of as well pass them within the functions so that we don't have to call out to them or reference them
globally.
So that's an alternative as well.
And that's going to make a little bit more complex.
But that's something that if you wanted to extend on this project, you're able to do so.
Next, we came in and we set some values.
So whenever the start button was pressed or the game screen was pressed, we had a way to start the
gameplay.
So that's where we've got our start.
So we set some of the player object values.
We also updated some of the visuals for the player.
So updating the game area, clearing that out in case it's a restart and then hiding the element, the
message area.
We created a couple elements on the fly.
So this was our player character that we're generating using create element in JavaScript.
And then for these elements that we created, we needed to set some style properties as well as we're
using some data object in the background that's running within that element object so that we can reference
that when we need it functions that we use for the gameplay.
Then we also appended those elements to our page.
And again, we set some more player values within the player object in order to track where that player
character is.
The position.
We also were counting the number of pipes.
So this is something that isn't really adding to the gameplay, but it is an option if you want to count
how many pipes and have a specific means.
And again, this is dynamic content that you can use in order to extend your gameplay so you could take
the number of pipes.
And once you had 50 pipes or 20 pipes, then that level has passed and you can make some adjustments
to the speed as well as the spacing between the pipes.
So all of this is fairly dynamic and this is what we're using in order to set these values.
Also, we were calculating how many of the of the pipes that we can fit onto the screen.
So using the spacing value so you can make this global as well.
And again, even more dynamic if you need to.
So you could set the spacing to be something like that if you wanted to, and make it a little bit more
dynamic, then we loop through and we built all of the pipes, depending on how many we calculated that
we could fit in, and then we started our animation.
So this is one of the most important parts of the game because this is what creates our game flow and
our animation.
And what it does is it kicks off this function called play game.
So going into play game, this is where everything happens.
This is where the core gameplay takes place, so within play game, first thing that we do is we check
to see if the player inplay value is set to true.
There's a boolean value in this controls the actual gameplay.
So if we want to pause the gameplay, we could remove out the inplay and we could add that in if we
wanted to start that back up again, we select the elements from our document object.
So the element with the class bird and the class swing.
So these are the two that we created dynamically and then this will give us the option to adjust them
with the arrow key values.
We also kicked off the moving of the pipes since we could have as well added all that functionality
here.
But it's always better if you break apart some of these actions so you don't get these really long functions
and this one could be broken down even more as well if needed.
So we have a function that moves our pipes along.
So this was this one here where we have the same format where we select all of the elements with the
class of pipe.
We loop through them, we adjust their style values, and then we also check to see if it's run off
of the screen.
And we also do a collision check.
And if we do remove it from the screen, then we create a new one.
So we create another pipe.
So this is a brand new one that takes the position of the one that ran off the screen.
And we also have our tracking within the play game.
So we've got the tracking of the key presses.
So this is where we're looking in that Kei's object from where we're setting these as we press any of
the keys down and we release the keys.
So these are turning into boolean values.
So they're either true or false.
And we're checking to see if the key arrow left key is been pushed down, right.
Key up and down.
And then we're making the calculations accordingly.
Also, we're checking to see if we're within our boundaries of our screen area.
And that's the second part of the condition just to make sure that we are within the boundaries.
And if we are, then we're safe to make our movement and we set move to true.
The what the what move is doing is it's giving us the ability to move and adjust our position of our
wing.
So any time that any one of the keys is pressed, our wings will go up and down.
And if we're not pressing the keys, then the wings are going to be static.
There's going to be no movement in the next.
We're automatically moving the character down.
So this is our gravity effect that we're adding into the game.
We're also checking to see if the player Y is greater than the screen.
So if it's run off of the screen, then we play game over.
We also then adjust the bird position and adjusting the bird position because the wing is inside of
it, adjust the wing position as well.
And then we kick off our animation frame again so we continuously loop through this pre game function.
That's why it is the one of the most crucial functions here.
And we also update the score constantly.
So we're updating the score and we're outputting it to the player so they can see the score value.
We've got a few functions here where one where we're ending the game.
So essentially we're showing that message information by removing the class of height.
We're setting our inplay to false.
Remember this pauses any of the animation frame games.
And because it doesn't allow it to reset the animation frame again, because we are checking that condition,
that inplay value before we go into there, we're updating the birds or flipping them upside down when
he crashes.
And then we're opening a message for the player to see what happened.
This is where we're tracking the key values and we're placing it into our keys.
Objects are setting it us.
True.
Whenever the key is pressed down and we're setting it as false whenever the key is lifted.
And this also gives you the option to really easily add any other key process within our functionality.
So you can do quite a bit more with any other key presses it's already built in.
You just have to have the condition looking for that value within the Keys object.
Another important function that we have within our gameplay is the collision detection.
So we're using the get bounding client rectangle and that's the reference to the Mozilla area where
it's located.
So this was getting some parameters of what each element is.
So we've got our top right, left and bottom positions.
And using these values, we can fairly easily do a comparison on the on the vertical as well as the
horizontal and see if any of this overlap is true.
And if it is, then what we're doing is we're flipping this upside down.
And if it's coming out as false, so any of these are false, then we're turning it into true.
We're negating it, and that's how we're passing it back.
We're checking to see if the collision happened and the collision happened.
Then we end the game.
So this is, again, within that moving of the pipes.
Another important function that we had was the building of the pipes.
And this was a great exercise in creating elements on the fly where we're creating an element.
We're setting some default object values into it.
We're also updating its class list, updating that's in our HTML, updating its height randomly, and
then we're setting these values within the style properties.
And then we had a few other value object values that we had in the background that we're running that
we could utilize.
And we're setting their background color to red so we can also make this random if we wanted to.
So that's another way to extend upon the gameplay to make the board a little bit more interesting.
We also have our pipes here.
So this is the second part of the pipe.
And this one essentially is calculated out how high it has to be taking into consideration what our
total height that's available, our first pipe, the so the top pipe hiders minus also the spacing that
we generated here at random.
So we've got different spacing between the top and the bottom pipe.
We built out some styling, applied the styling to it, and then appended it to our game area just like
we did with the first pipe.
So essentially adding all of that in within one shot, within that one function.
So hope you had an opportunity to build out your own version of the game.
And I do encourage you to try out the code for yourself and see it working.
And you can even make adjustments and tweaks to really familiarize yourself working with the DOM, interacting
with elements within the dome and manipulating those elements.
Thanks again for taking the course.
And remember, I'm always available and always happy to help clarify any of the content within the Q&A
section.