Congratulations on making it to the end of the section in this lesson, I'm going to do a quick review
of what we covered in the earlier lessons.
So first of all, we came in, we set up our HTML and then we also added in some styling, we tried
to keep it to a minimum because, of course, we do want to focus on JavaScript.
We created one main class, which was the brick as well as the container and then the score in the lives
so that it shows up a little bit bigger on the screen.
And we could have, of course, done that in JavaScript as well.
So it would have taken quite a few lines.
And the earlier lesson where we went through creating the element and applying all of the styling,
it was a good exercise in applying styling, but it did take quite a bit of time.
And as well, a lot of this is repetition.
So once you start accessing the styling and updating the styling, then this is just like setting styling
within a style sheet.
The format is pretty much the same.
The property values are the same, the property names are slightly different.
So keep that in mind as well, that we don't have any spaces, we don't have any dashes.
And this is all camel KAIST.
So sometimes you do have to look up and with editors like Brackett's, you're going to get a dropdown
when you do both style and another dot and you can see a dropdown of the options that you have for the
styling.
So you can start start typing it and generally be able to figure out what the style and how to adjust
that style property.
So everything you can do a success, you can do a JavaScript and you can do it better with JavaScript,
of course.
So getting the container, creating the elements or creating our main game elements, including the
paddle, the ball and then hiding them, we added in event listeners for the key presses to track the
key presses.
So this gives us an option to track multiple key presses at once.
We could have done it as well, that every time the key is pressed, then we take the action directly.
But in this case, we chose to add an update to the paddle object where we were setting the value of
left to right to true and then one key up to false.
So this is in case the user is holding the key down.
We don't need to register it multiple times.
And this is also leads to a smoother animation when you do it this way, because it's only looking for
the object value.
And doesn't matter if you're pressing the key, letting off the key, you're not going to have any type
of choppy movement.
And as soon as you let off the key, then it goes to false and whatever animation frame it's on, then
it's going to stop that action.
We also added in one last one here looking for the press of the up arrow and that would launch the ball.
You can also adjust this to other numbers, other key codes as well, and add that into the string.
So checking to see for a number of different key codes.
And the most important one here is that if player inplay is false, then we're going to set it to true.
And that's what that action is doing.
And setting it to true initiated the ball movement and allowed us to move the ball around.
We set up one main default object called player.
So this is where all the player values go and this is global sitting on the global scope.
So that gave us the ability to access it in any one of the functions and really easily access and update
those values starting the game.
So that was the main game function where when you hit the start game button starts the game.
So there is a bunch of variables that we had to set up.
So everything player is player related.
So we set all of those.
We also set a default position for the ball.
So in case we're starting the game again, we're setting the default position of that ball.
And we also we're handling it whenever we're adding it and landing it on the paddle so we could potentially
remove this.
But let's keep this in case.
But this probably isn't doing a whole lot right now because we did add that updated function.
So next, we set up all the variables for the player, set up the visuals and then set the bricks.
And this was dynamic so we can create as many bricks as we want and we created a function in order to
handle that.
So called it set up bricks.
It takes one parameter and that's the number of bricks that we need to create.
And it builds out the calculations for where it's going to position the bricks.
So positioning in a grid like fashion, so initially it centers them.
So the starting position is centered.
It calculates how many hundred picks bricks it can place across the screen and then it divides the remainder
by two.
So that gives us the ability to center it and then the starting position of Y and every time we hit
to the end of X and we increment X back to zero to the start position and then we also increment Y,
so we get another row of bricks and then whatever number of bricks we have, it will continue to build
out the rose.
We do have one calculation here where we're checking to see and making sure that the width, the the
bricks ro y hasn't passed our center point of the application because we don't want the bricks going
all the way down and we want that dynamic sizing for the screen.
So that's where we added in the ability to skip creating additional bricks, so once we hit a certain
point that we're not going to create any more bricks, we're just going to skip that and the creation
of the bricks.
So this was relatively a simple part where, again, we're creating an element, playing some styles
to it and then appending it to the main container.
So that's took care of starting the game.
We also have a function to update the score.
So any time the lives and the score need updating, we take the value that's contained within the player
object and we apply it to the screen so that we can see it within the screen.
And then we kick off our animation sequence making a request animation frame, calling the function
called update.
And then this is where all the action happens and all the fun stuff happens where we've got we're checking
to see if the game is over first and if the game is not over, if it's in play, we get the paddle position
and then we update the paddle position and we check to see if it's off screen and we can subtract to
it.
So we make sure that the boundaries are set for where we can subtract and where we can add to it.
And then we update its visual position at style properties, left properties.
And then we also check to see if the ball is in play.
So if the ball is waiting on the paddle, then we run the function waiting on the paddle.
If the ball is moving, then we run the function, move ball.
And then after all of that is said and done, we relaunched the animation to have a nice, smooth animation
with an update.
So it continuously runs this block of code while the game is in play.
We create a function waiting on paddle because there's a number of times that we would need to call
to this.
So this what this does is this sets the ball position according to wherever the paddle position is.
And that gave us the ability to kind of make it look like the ball was sitting on top of the paddle
and we could move it across and around.
And then once we the player launches the ball again that we're just go back to moving the ball.
We had some conditions to check to see if the ball falls off screen.
And if it does, then the player loses a life.
If the player is less than zero lives, then the game is over.
We have a function to run the game end and we just reset.
The player lives to zero.
We do an update of the score so that visually representing the change in the lives, so times change
the lives or the score, you need to update its run score updater.
And then we have a function called Storper, which is where we stop the ball from moving and we set
it on top of the paddle.
So that's our function that handles that end of game.
So that shows the start game again.
That option to restart the game gives us our score, sets the game over to Truc so that we're not running
anymore animation frames.
We also hide the ball, hide the ball off the screen.
We then look at all of the bricks and we make sure that there's no bricks left and there shouldn't be
if you've run out of bricks.
But this is just in case.
And of course, we want to remove any bricks that might be existing that might interfere with the next
round of the gameplay.
So always a good idea to kind of make sure.
And you've remove all of the moat.
So, Storper, we already talked about that one and that one runs the cancel animation frame, sets
it on the paddle, and then visually sets it on the paddle, outdates the ball direction and updates
the inplay.
We have our move ball.
So this is where we've got some calculations where we get the balls current position.
So using the offset left and offset top, we get an X and Y position and then we use those X and Y positions
to make our calculations.
We check to see if the ball is if it's gone off screen in any way and if it's at the edge of the screen.
So that created or boundaries gave us the ability to flip it.
So multiplying anything by a negative one will flip it to a negative will become a positive.
A positive will become a negative.
So that's how we change direction, where we just multiply the direction by one.
So whatever the value is within this array, we're just going to multiply it by one.
And this also gave us the flexibility, change the speed of the ball in the angle of the ball and all
of that.
If the ball runs off the screen, that means that we lost a life and we run the follow function, which
we've covered.
And then we also do the same thing for the X, the horizontal coordinates.
So we make sure that if the ball is running off the horizontal right side or the left side, then we
just change the direction of the ball.
So zero was ball direction of the value of how it moves horizontally and ball direction.
One is the one that takes care of the vertical moving.
We also checked to see if there's a collision with the paddle and if there is a collision that the paddle,
then we console logout hit.
We can remove that, we update the ball direction and then we also flip the horizontal direction as
well.
We go.
All of the bricks and we checked to see if bricks is at zero and if it is zero, then we stop the ball
from moving.
We set it back on the panel and then we set up a new set of bricks so the player can continuously play
score more until they actually lose all of their lives.
The game's not going to end.
We loop through all of the bricks that we've selected within the node list.
We check to see if there's collision with the ball.
If there's is collision with the ball, that means that the ball hit one of the bricks.
So we need to update the player score, remove the brick from the visible area and then update and do
the score updater.
And over here is where we're changing the ball's direction so that if it's going up, it'll start going
down and so on.
And then we make an update for the player position of the ball, depending on what we've done here within
the conditions.
And then lastly, we set the ball style properties to match what the ball position, the new ball position
is of X and Y.
I hope you had an opportunity to try out some of the code, extend on the functionality that we've covered
and make the game even better, enhance the gameplay, update some of the styling, make it look better,
really customize the game functionality.
There's a lot of directions to go from here.
Thanks again for taking the course and for taking the section.
If you have any questions or comments or need clarity on any of the topics that have been covered,
I'm always happy to help within the Q&A section.
Please let me know and I'll see you in the next one.