Hey there, and this lesson, we are going to be making something happen, we're going to bring our
application to life, introducing key events, soliciting for the key presses, and as well as moving
the paddle from side to side, depending on what he is pressed.
So first of that, we want to do is add a request animation frame.
So what this does is this is a method.
And when you call this method, it allows us to create a nice, smooth animation.
There's a great example here.
When we run this function, what's going to happen here is that it gets initiated.
So the animation frame, step and step is the function that contains the animation sequence and it runs
through this block of code.
And if progress is less than 2000, then it requests animation frame step again and it will continuously
do so until progress is 2000.
And once progress is 2000, then it's going to stop the animation.
So this particular example will translate and it'll move the element across the page.
So how about we take this and we try it within our code so I can demonstrate it and then we'll apply
the request animation to our code itself instead of elements.
I'm just going to use the container.
And what's going to happen now is that it's going to move our element across the screen.
It's going to translate its translate X property.
So that will create some movement to see we get our element moving.
And then once progress is equal to 2000, then it's going to stop the animation.
You can also output it into the console so you can see that progress is going to be continuously incrementing.
And eventually, once it reaches 2000, then it's going to stop moving.
So that's how that works.
So I'm going to block this out, but I'll keep it within the code and you can read up more about it
within the Mozilla developer network at the request animation page.
So for now, what we're going to do is we're we create a brand new function.
I call it update, and this is the function that we're going to run.
And just as we start and we initiated the request animation frame step here, we're going to do the
same thing with update.
And what update is going to do is it's going to move our element and then within update itself, we're
going to call back to update.
So it's going to continuously run update.
So it'll continuously move the element or do whatever animations or animation checks that we want to
do to the element.
And the reason that I set that up is because we want to set up a particular value within the portal
where we're checking to see what keys are being pressed.
So if left is press that we want to take the appropriate action.
If right is press, we want to take the appropriate action.
And if the up key or the up arrow is pressed, then we want to release the ball for the user to start
the gameplay.
So let's set up the key press event listeners.
So add event listener and the listener that we're listening for is key down.
So any cues that are pressed down, it's going to initiate this function or passing in the event object
and we can console log that out so the E object and we're actually going to be listening for a key code.
So output E for now.
And I'll show you what we're actually listening for.
So now whenever I press the arrow keys, you can see that I'm getting the keyboard event is firing and
within the keyboard event object, you see all of this information is passed.
So we know which he got pressed and we can see the key down as well.
The key type and the one that we're actually going to be using is the key code.
So that one is usually more accurate, but you can use any one of those because this is an object.
So now whenever I press any of the keys, you can see that I'm tracking which key is being pressed.
So that's on the key down.
So I wanted to add in to the object.
We're going to do a check to see if key code and those were the arrow keys.
So the one that we're looking for and the arrow key for left is 37, right is thirty nine and up is
thirty eight.
So we're checking to see if the key code is thirty seven.
And if it is then the panel object, we're going to attach a new value to it and we're going to take
Padel left and we're going to set that to true and then do some other checks as well.
So we've got the thirty seven.
And 39 was the right arrow, was the right arrow or checking to see and if 39 is press, then Padel
right is going to be true.
And then within the request animation frame with an update, we're going to check to see the value of
Padel left and Padel right, and we're going to take the appropriate action for it.
So this will actually begin to move our padel.
So having another condition.
We're checking to see if Padel left.
And if Padel is left, then that means that we want to move our current position.
So let's first we'll get the current panel positioned.
So this will be our current position.
So Padel current position and we can use offset in order to get that.
So we're using offset left.
We'll we'll turn back the left position, our console like that out.
So P current log it out into the console so that you can see whatever the current position is of the
paddle as we're updating.
So now whenever I press start, our current position is offset 223 and we want to move that.
So we want to take our current and we want to and this is moving left.
So we're subtracting five off of it and then taking Padel style and updating its left position.
We can take whatever the value of P current is because it's changed and adding in picks to it.
So see what happens.
So now when I go and if I press, if I press start game, so that initiates the animation frame and
now I can move the paddle to the left.
And you see we don't have the key up.
So that is important because otherwise we just keep going to the left.
We have no way to stop this, to turn it to false.
So what we want to do is turn it to false whenever the key is up and whatever key is triggering the
key press.
So once we released up on up, then this is going to turn to false on left and up on right is once it's
released, then it's going to turn to false as well.
So this will give us the ability to move it whenever the key is pressed and we can press both keys at
the same time.
It doesn't matter because it's tracking all of the key downs and all of the key ups.
So that is all being tracked.
So next to that we want to do is update the if panel is right and if it is right, then we want to move
it the other way so that adding in rate instead of subtracting, we're going to add five to it and let's
try that.
So now I can go left and right on my panel.
So there's a few other things that we need to add in to the start game.
But I did want to get some action happening.
So go ahead and add this into your project.
So this should give you the ability with the animation frame.
So this is on a continuous loop and constantly looping to this block of code and this block of code
is checking to see whatever the value of Padel is.
So these are boolean values.
So that way we know that if the key has been pressed down, then it's always going to be true.
And once the key is released, then they go to false as a boolean value and then it will no longer update
the current position of that element.
So go ahead, try this.
Add into your code and get your paddle moving with the arrow keys.
And coming up next, we've got some fixes that we need to do to the start game because obviously we
want to get rid of the start game.
We want to build our game board.
We want to show the ball.
So there's a bunch of stuff that we need to do to start the game.
So that is all still yet to come.