This is going to be a big lesson as we're going to be introducing request animation frame, so what
request animation frame does is it's a method that tells the browser that you wish to perform an animation
and request that browser to call a specified function to update the animation before the next repaint.
So basically what it does is it presents a smooth way to transition and allows you to create really
nice, smooth animations.
They've got an example here automatically a developer network.
So they've got start of NUL.
They select the element.
And so this is the element that they're going to move around.
They create the request animation frame calling to the function step.
So it's invoking the function step.
That step function runs through and it's passing in a timestamp and that's checking to see if the timestamp
is not there and.
If it's not, then it's setting start to whatever the time stamp is, and then it's tracking the progress,
transforming the element, and if the progress is less than 2000, then it's going to request the animation
frame again.
So essentially what it's going to do is it's going to loop through the step function two thousand times
and then it's going to stop performing the step function because it's not going to be requesting that
animation frame anymore.
And that's the whole idea of the animation frame, is that you make the animation frame request and
then within the function that you've requested the animation frame, then you continuously loop through
and continuously play through the same animation.
So we're going to create our function.
And then within this function, we're going to call the same function and calling out the window request
animation frame.
And then within here, the only parameter that we need to provide is the name of the function that we're
going to be looping through and to kick things off.
We also are going to add that into the START function.
So when the player comes in, they start the game and at the end of this it's going to build the whole
game window game area and then it's going to run a function called play game.
And then this is where all the magic is going to happen.
So let's select our elements.
And you actually won't see anything I can console.
Log out a message here.
And what's going to happen is this message is just going to continuously show while it's looping through.
So look within the console.
As soon as I press start, then play is just constantly looping through this.
And this is what gives us the ability to do our animation.
So I'm going I get rid of that console message because that one is going to run many, many times.
Let's select our elements.
So first of all, let's get our element, our bird.
So using documents and query selector, we're going to select element with a class of bird.
So this is going to be the one that we actually made up here.
We also want to select our wing.
So using the same format documents and query selector selecting the element with a class of wing.
So that gives both of those elements within an object format and that means that we can make use of
it.
And then just before we close off, this is where we're going to create our animation.
We're going to update the positioning of those elements.
So selecting out our updating the bird style top position where we create a player object and we're
going to track the position to player X and we'll also do or actually this should be player Y and we'll
track the left position.
So the horizontal on style left position.
And as we start the game, we create a global object called player so we can add some content into here.
So as we've built out that bird element, we take our player X and we're going to get the position of
the bird object using offset left.
So it's going to give us our horizontal position.
So the left off of the main screen area and then Bird and Offset Top is going to give us a position
off of the top.
So what you can see here is a logout the player value.
And as we refresh, you can see that I've got an X of 50 and a Y of 289, and that's going to be the
position of where this particular element object is located.
So it's matching with the player X and player Y.
So I'll know all we have to do is update player X and player Y position as we loop through the animation.
And this will also update where they're going to be located.
So we've also created the Keys object and that's what we did earlier.
And within Keys, we're actually tracking some information about the key presses.
So we're getting different key values.
So we're getting the arrow keys and we're getting up and down and all the different arrow functions
we're getting.
So that's being logged out here.
And I know we're logging out quite a bit of stuff.
So we've got arrow down, arrow right, arrow left and arrow up.
So now we can check to see the value of keys and using arrow left increment, we can take player X and
we can minus the value of player speed off of player X.
So that will give us some movement and that's another value that we need to set.
So right off the bat and trying to make it as dynamic as possible.
So setting our player speed to two.
So that's going to be how quickly the is going to be able to move.
So we've got our arrow left.
Also, we can do one four arrow right.
And notice I'm just using if so, I'm not using or else if in case that there's multiple keys that are
being pressed at the same time.
So that will give us that kind of horizontal and vertical angled movement.
So we.
So have Arrow up and this is going to affect the vertical, so it's going to be player Y and if we're
going up, then that means that we're subtracting off of Y, and if we're going down, that means that
we're increasing on Y and the same thing is for right as well.
So we're increasing.
So now we are ready to try that out.
So with the Arrow Keys I can effectively move my element around the page.
So remember, I'm tracking that position as I'm creating the elements, I'm tracking it into player
X and player Y, and then I'm also tracking the key presses.
So that gives me the ability to move my character around.
And we see that it's a nice, smooth animation and I can move multiple key presses at the same time.
So go ahead and try this out and add this into your project so that you can move the character around.
And we're going to update some of the functionality in the upcoming lessons where we're going to have
the wings moving as well.
And we can also introduce that this bird is automatically falling and you have to constantly press the
spacebar to keep it moving up.
So I'll introduce that.
And that's coming up in the next lessons.