This is where things start getting really interesting and this is the lesson you've been all waiting
for, because, of course, everyone loves animation and we're introducing the animation into this lesson.
So we added in and we updated the key press functions.
We added the event listeners.
And I've moved a few things around to output it in a more orderly fashion.
So we've got our constant objects that we're selecting.
Those are all element objects.
We've got some of the global variables that we're setting.
So global variable objects that we're setting.
And then all of our event listeners are all in one place.
And then these are all the functions that make things happen.
So we've got a start game function and we want to add in the ability to launch an animation frame and
continuously play that animation frame.
And JavaScript has a method called request animation frame.
So tells the browser that you wish to perform an animation and it gives you the ability to nisson smoothly
run animations.
So that means that we're going to call a function called play game.
You could call it whatever you wanted in this case.
I've called it play game, so we're just referencing that function.
And then this is where all of the action takes place.
All any of the movements that we're doing is going to be done within this one function.
And first, we're going to check to see if player in is true.
And if it is, then we know that the player is in play and we can do all of the great stuff that we
want to do with the animation frame.
Also within the animation frames, once we check to make sure that the player is the game is in play,
we're going to call the animation frame again from within itself.
So this will create that constant loop that every time once we kick it off here and we do play play
game and while the players and play, then we're going to run all of the movements.
And then lastly, we're going to call play game again.
So it will create all of that over and over again until player in play is no longer true.
And that's how we're going to break out of the cycle of animation.
So what do we want to do?
We want to move the players.
So taking our keys object that we have that we set up earlier.
And this is where we're tracking the key presses.
We can check to see if Arrow is down.
And if it is, then we can take this action.
We can also update the boundaries.
And this is maybe another global object that we can set or we can add that in within the play game.
So whenever we're playing the game, we're going to create an object called Bound Basket.
And what this is going to do is this is going to get using our basket object and we're going to use
another method called get bounding client rectangle.
And what this method does is this produces the element gives us the element information so we can console
log that out and you can see what's going to get produced here.
So when we press start and because we've got it within the animation, it's going to launch this and
there's going to be quite a lot of it's showing up on the screen.
So what is happening here is that we're getting our DOM rectangle and attaching getting the information
values that are contained for this particular element.
So it's bottom one, 998 height is 50.
Left is 409, rate five or nine.
So left four or nine.
Right, five or nine.
Off the side top is 148, its width is 100.
So those are the values that we set.
And then we also have it's X and Y position so we can take these values and notice that they're also
numeric values and we can adjust them accordingly depending on what the arrow presses are.
So we have value here because this is within an object format.
We can now use bounding basket left to get the position of that current element so we can take bounding
basket.
And because this is up and down, we're going to use the vertical position and adjust bound basket y
value by whatever the player speed is.
So we're incrementing it.
And let's also apply the same thing for the other keys.
So we've got keys up as the other one that we're listening for.
And in this case, we're subtracting the player speed.
We also have keys aril left as well.
So this one is working on the vertical or the horizontal axis.
We need to use X and updating its position.
So we're subtracting four left and we're going to add four four.
Right.
And adding at four.
Right.
So using that bound basket position.
So it's always getting the position of where Baskett is located and we're updating those values.
So next that we want to do as we.
I actually want to update it visibly, so take the basket object and using the style properties, updating
the left position and left position is bound basket X plus, and we have to add in the picks.
So this is going to turn it into a string value as it's expecting a string value, just as you would
with success.
And we could do the same thing for top setting its Y position accordingly.
And I'm not going to output that bound basket value.
And speaking of which, we do need to take that path bound basket value and turn that into a global
object.
Otherwise, every time we're looping through the animation, we're going to be resetting its coordinates
and we don't want to do that.
So we want to have that sitting as a global object, so let's add that in and we are ready to try the
suit.
So going into our project, I'll make the smaller will refresh, hit the start button.
And now whenever I'm pressing the arrow keys, I see I've got the movement.
And there's one thing that's happening is we're able to go out of the balance.
So we need to take care of that and make a few minor tweaks, adjustments.
But it is working and we are getting the responding element moving depending on what the arrow keys,
which Iraqis are being pressed.
So you can add in the animation frame into your project and you can be ready to move on to the next
step where we're going to check the boundaries and make sure that we're not going out of balance of
the main container.
So that's still to come, an upcoming lesson.