OK, this is going to be a super important lesson because this is where we're going to move the ball
and we're going to create a function in order to handle that and then create the actions of the function.
So we've actually re enabled the request animation frame.
So it's calling back to update and it will continuously loop that update function and run all of the
code contained with an update.
And that means that if we've got the function ball move ball and being invoked with an update, we're
going to be invoking that function as well every time the animation is running and the animation is
going to continuously loop through while the game is in play.
So the first thing we need to do is set up an object and this will be the position of the ball.
So we're going to take in two parameters in here.
We're going to need to get the current ball exposition.
So using the ball object, this is the ball that we created earlier and getting its offset position.
So we use offset left for the horizontal and then ball and offset top for the vertical position.
So this will give us our X and Y of where the ball currently is.
And so now we need to make our calculations and our conditions to update the ball direction.
And so this is going to actually get fairly complex because we want to make sure that we're able to
get and apply the different ball directions.
And I'm going to set that within the player object so that in case we want to increase the speed or
whatever we want to do, we can update the current ball direction.
And I'm going to set this as an array.
So we're going to have a couple of values in there.
So one is going to be the vertical movement and the other is the horizontal movement of the ball.
So within an array and then we can update these as needed.
So we've got two and the current speed is going to be five.
We can update this and adjust this.
And again, making it more dynamic is going to make the gameplay even more flexible.
So let's also add in our style updates.
So taking ball style and we're going to update the top position of it.
And this is now going to be equal to whatever the position ball value is.
And plus picks, of course.
And this is position ball y because this is the horizontal and then we're going to do one more for the
vertical.
So this is going to be a style left and update using the ball exposition.
So right now it's not going to do a whole lot, but it's going to stay still.
It's not going to move because we're not updating any of the values of ball, but we do have the directions
and we can launch the ball movement now.
So let's take a look at what we can do and how we can move this ball.
So we want it to be able to move the ball, but we also want to bounce whenever it hits certain, whenever
it hits one of the sites that we want to bounce off of the sides.
So change direction.
So that's one of the things.
And also when it hits the top, we want to change direction and come down.
And for now, we're going to do what it hits the bottom.
We want to change it to go up and we'll adjust that later on.
So basically, what this ball to be able to bounce around and when it hits the sides, it just simply
changes direction.
So that's all we want it to do.
So let's add that in as well, where we've got this player ball direction and for now we can take ball,
x or ball.
Why we have to do it for both player.
Ball direction and whatever the value that's contained in here, so this is essentially going to be
the speed that the ball is going to be moving.
And this is going to be zero, so it actually doesn't matter which one you use, zero one zero is going
to be for the X, for the horizontal Y is going to be for the vertical.
So let's see what happens now when a Head Start game, there goes our ball fell off the edge.
And that's not something we want.
So adding in a condition to check to see if our position ball y is greater than and checking to see
the container dimension height.
So we've got that container dimension that we're going to use again and the value that we're using is
height.
So if it's greater than this and the reason I'm bracketing around it is because I actually want to subtract
20 off of that.
So that makes sure that we account for the balls size as well.
So that gives us a little bit of a buffer and we'll make it look like more like it's bouncing right
off the edge.
And you might have to tweak and adjust this.
And of course, you can do that as needed.
So that's we're checking to see if it's greater than that.
And the other one that we needed to check to see is to check to see if Y is less than zero.
So position ball, why is less than zero, and if it is, then all we want to do is want to reverse
the ball direction.
So no matter which one we're doing, if we multiply any number by negative one, that means that we're
flipping it from a negative to a positive.
So instead of being positive, five will turn to negative five.
So see how this works.
And actually that should be that should be flipping around, number one.
So we see that we had that bounce there.
So that was really quick.
But we do need to add that in as well for the exposition.
So checking ball X and in this case we're doing the same thing, but we're checking to see making sure
that the width minus 10 and X and in this case, we're flipping that value, that first value.
So see what happens.
So now we've got our ball is bouncing around the page.
That's exactly what we want.
So go ahead and add the bouncy ball into your project.
And that's a lot of fun, especially once a tennis ball, of course.
And still to come is the important stuff like collision detection and also making sure that whenever
the paddle is hitting the ball, that it's bouncing off.
So that's another thing that we're going to be checking to see.
And if that collision occurs, then we're going to change direction on the ball.
So quite a few things still to come.
And, of course, some really important stuff to the gameplay.