This lesson we're going to be looking at a JavaScript method called request animation frame, and what
this is going to do is this is going to allow us to have a method that allows our browser to understand
that we've got an animation frame.
And essentially what that does is it allows you to loop through multiple times within that same function
and the way that it works.
We've got an example here on the Mozilla developer network.
They've got start to equal to null.
Then we've got our element there.
So whatever that element is that we want to animate, it's making a selection from the HTML and then
using timestamp.
So Downbelow, it initiates that function window request animation frame.
And we know with Windows methods we don't need to specify window, but it's always a good idea to do
that anyway.
So sometimes you might see the request animation frame without the window prefixing it and that's OK
as well.
And in this case, we are going to be using window request animation frame to request our animation
frame.
And what it does is it invokes a function and the function that's going to invoke is going to be over
here.
We've got it running on a timestamp.
So in this particular example, it's going to be moving that element around.
And depending on how far this progress is and tracking the current timestamp and the value minus start,
it's going to be transforming that particular element.
So this is a really neat example.
And you can go ahead and you can try this out for yourself.
And we're going to bring the request animation frame into our application and added into our application
making animations happen.
So setting up a brand new function.
And then this is the function where all the magic is going to happen.
We're going to call this plea game and this is the function that we're going to request.
So with the console log in play and once we hit that start button, so we've got the start function
we want, this is where we want to invoke the request animation frame.
So using the window object and then request animation frame.
All we need to do is specify what the function is that we want to request and the function that we want
to request is the play game function.
So now let's see what happens.
So we hit start and we have in place, so it's not exactly looping quite yet and you see that what's
happening here is that within the animation frame, they're requesting that animation frame again,
and that's what actually creates the loop of the animation.
So just as any function that we're invoking within itself, it's going to constantly loop and create
additional animation frames.
So we've only got one animation theme that we're animating right now, and now we're going to invoke
that same function within itself and what that's going to do when we go back out here.
And we started we see that we've got an animation happening.
So now we can also check to see that if the game is in play.
So let's set up a variable, we'll call it player.
So this is going to be a blank object.
And once we start the game, then we're going to take our player object set start to true.
And then in our animation frame, we're going to take our player object start and we're going to make
sure that that is true.
So we're not going to do anything unless the game is actually started and in play and we're not going
to request any additional animations or anything unless this function is true.
And really, at the end of the day, it's not going to make much difference because we are setting the
player start to be equal to true before we're calling the play game.
And that's why we don't see any difference quite yet.
So now that we've got that in play, the next part of this is to add in that animation and make something
move.
So what we need to do is we need to create an element that we can access and we can move around our
screen.
So going into our game area, this is where we want to place that particular element.
So we've got the game area object that we created earlier and we're going to use JavaScript to generate
our car or a vehicle.
So setting up a variable, we can call it a car and document creating an element.
So in this case, we're creating an element, an element that we're going to create is a div.
And then adding into car, an update, the inter text.
And for now, I guess it's just going to say car inside of it.
And then using that game area object, we're going to append a child to it and the child that we're
spending is the car, we're spending a child.
And we quite and currently right now, we still have the class of display, none being shown.
And we need to hide the start screen.
So that's the next function that we need to do as well within the start area.
So once we start the game, we can get rid of the console message now because we're not going to have
that in use anymore.
So taking the start screen, selecting class list, we're going to remove a class from it and the class
that we're moving is hide.
And also we want to do four game area is we're going to select class list and in this case, we're going
to add the class of height.
And actually, I just got that opposite.
So we want to add height to the start screen and we want to remove hide from our game area.
So let's try that one more time.
So now we've got that element that we've created.
You can take a look at it.
And this is the one that we're actually going to be moving around.
So that is still yet to come in the upcoming lessons.
So I'll show you how to do that, how we're going to make car that element that we created move depending
on the Iraqis.
So that's still to come in upcoming.
Let's try request animation frame added into your project.
So when the game starts, you've got an animation that's playing and you've got a function that's handling
all of the gameplay.