How's it going so far?
This is going to be an exciting lesson because we're going to bring animation into our project.
So far, we click the press here to start game and we get an airplane.
We're tracking our key presses as well.
So you can see that, that whenever we press items on the keyboard, those are getting output and we're
tracking that within the keys object.
So we're all ready to bring our animation.
The animation is going to be done through Windows, request animation, frame object and JavaScript.
It's a method that basically allows you to perform animation requests.
So what it does is it loops through and continuously will loop through a particular function.
So in this example on the module, the developer network, they have a step function that's going to
continuously loop through until the value of progress.
And while the value of progress is less than 2000, it's going to continuously request that same animation
frame so that same step function within itself.
So we'll continuously do this transformation and do this set of code until the animation runs out and
then it gets initiated down here with the request animation step.
So we're going to do the same thing in our project where we've got our START game and this is going
to trigger off the window request animation frame.
And then all we need to do is specify the function that we want to kick off.
We're going to call it play game, then opening up a function, creating a function called play game.
This is where we're going to continuously loop through and calculate out all of the movement that we
need to take place in order to move our character around.
And then within this same play game, we're going to continuously keep looping that play game animation.
And the way that we're going to check to see if we should keep looping through is we're going to use
this in play function.
Now that we've set it to true, we're going to check to see if it is true.
And if it is, then we're going to continuously loop out.
And once this value is no longer true, then our animation frame is going to stop.
So that's going to be the main core of the way that our application is going to function.
So next, we need to introduce listening for whatever the key values are and remember coming in.
So every one of these animation frames and Ilic list out keys for now.
You're going to see that this Kei's object, once we start, it's going to continuously be outputting.
So it's looping through this request animation frame and that's where we're getting all of these key
objects being listed out.
And it's continuously growing our massive list here within the console.
So now we can make use of our key tracking that we had set up earlier where we're tracking.
Whenever we press a key, you can see that it's going to update.
I got to get way to the bottom of this massive list.
And you can see that up arrow now has been included because at one point here, I pressed up Arrow and
it was true.
And if up arrow is true that we want to move our airplane up.
So let's take care of that.
So going into where we've got our play game, we can detect to see if the value of keys and arrow is
actually arrow up is going to be the key event name.
And we're also using that within the object name as well to reference it.
So we're checking to see if this value is true and if it is that we want to move our airplane up.
And the way that we're going to do that is, first of all, we need a few other things that we need
to take care of and that's setting up some more values within player.
So using that player object, sending player X, I'm taking the value of player plane.
So this is that plane object that we created earlier and using offset left in order to get its position
off of the left side.
And then I'm taking player Y.
So this is a new object that I'm creating and then also from the player plane object that we created,
we're taking offset top.
So what these values are going to do is this is going to give me a numeric value of where the plane
is positioned so that X and Y coordinates of where it currently is.
And we're going to utilize that within our plane game area and we're going to update that player y value.
So taking player Y and updating it, so increasing it by whatever the player speed value is.
And we can do the same thing for the down arrow.
So the arrow down so of arrow down is true.
Then while it's true we're going to decrease the value of Y and actually it's the other way around because
decreasing moves set up and increasing moves it down.
So just before we finish up our animation frame, we're going to update the position of player plane.
So it's that object that we created.
And remember, it's in a global value of player.
So that plane is the one that we've got here on the screen that we're able to see.
We're selecting a.
Style and selecting left position, so we're going to reset the left position and we're going to reset
it to whatever the value of X's, and because this is a numeric value, we have to add in the picks
and then doing the same thing for player playing style top because remember, this is absolute.
So we can move it around and with JavaScript we can reset the style properties.
So that's what we're going to do here.
So let's try that out.
So going in here we click.
So pushing down moves it down, pushing up, move, set up those two other things that we need to take
care of and that's going to be moving it forward and then also moving it backwards.
So arrow and this one is arrow left value instead of X, we're going to move along.
Instead of Y, we're going to move around the horizontal and this is going to be arrow, right.
Because we know that we've got four arrow keys on a keyboard.
So one of them is going to move it left.
One of them is going to move it right and left is the decreasing one.
So we always try that out.
So now I'm pushing forward.
So I'm moving the plane forward now, moving it back down and up.
And you can see in the bottom right hand corner which of the key values is true.
And that's corresponding with the movement.
And also I can do combinations so I can press two keys at once and I can get this kind of angled movement.
So both going forward and up and down.
So now we've got animation and movement within our project.
So we're moving along very close to completing this project.
So this is the core functionality that we needed.
And of course, we need a few other things with the keyboard space where we're going to drop some bombs
and we're going to create those as well as we need to create an enemy base that we need to target.
There's quite a few things still to do, but this was one of the core pieces of functionality that I
want to introduce within this section.
So go ahead and try this out for yourself.
Get this working so that you can press your keyboard keys, arrow keys, up, down, left, right,
and have the element that you created in the earlier lesson.
Move around the page.
And don't forget that you do need to set position absolute so that you can adjust the style properties
to top and left.
And if you go in, if you do an inspect on it before we conclude, you can see that I've got style left
and style top.
And as I'm pressing the keys, you can see that this is also updating and it's moving.
And I'm not sure why I ended up with two of them.
I think every time we start game, we're creating a new plane.
So that's why we're ending up with so many different planes.
So that is another thing that we need to take care of.
Of course, that it looks like we're generating multiple planes.
So there's a few things to still tweak and that's still all to come.