Welcome back in this lesson, we're going to be starting our animation frame so within the start game,
whenever we press the start button, that's where we're starting the game and this is where we can trigger
the starting of the game played.
So selecting that, we need to create a repeat animation frame and repeat a function that we're going
to run over and over again.
And this is what's going to do all of the updates that we need within our gameplay area.
So effectively creating the animation by running and constantly calling into the function.
And this function needs to be selected using a global object.
So we've got our player and we can set up an animation.
So this is within the global object and we're going to make a request animation frame.
And what this does is this going to call and invoke a function as an animation frame and then within
the function itself, within that update function, we're going to call back to update.
So effectively, what this is doing is this is going to constantly loop through update.
And if you console log update, we can call it player or we can add in whatever we want here.
And you're going to see what happens is when we hit start game, it's going to start the animation sequence.
So right now, all it's got is the console message.
So let's make something happen.
And we did set up the key presses and the last lesson so we can listen for those key presses.
So checking to see where we've got our key objects.
So key left, kvi left.
So checking to see if this is true.
And if it is, then we're going to make our appropriate movement for that.
So what we want to do is we want to have a temporary value position of value.
And this position value is going to use the microchip object and then using the value for offset left,
it's going to return the number of pixels that the upper left corner of the current element is offset
to the left.
So basically, it gets your left position in a pixel value, in a numeric value, and we can use this
and update it.
So if we're going left, what we're going to do is we're going to subtract off of it.
And the value that we're subtracting is the player speed value.
And if key KVI is right is true, that we're going to move it to the right.
So instead of subtracting, all we're going to do is add.
And then lastly, before we finish up the animation and to actually to create the animation, selecting
the massive object, we're going to dynamically updated style value using temp position.
So this is a newly created value and we're updating its picks location.
So try that and refresh so it start the game.
And now whenever I'm touching the keyboard, if I'm going left or if I'm right, then you can see that
the ship is moving either left or right accordingly.
So if I'm pressing them both, then I'm actually at a standstill because both of those keys are being
pressed.
So it's going left and it's going right.
So both of them are true.
So subtracting and then adding the player speed, and that's why we're not getting anything happening.
So go ahead and add this into your project.
And at this point, you should have the ability to touch your keyboard and move your object left or
right.
And coming up, we need to also set some boundaries so you can see that right now I can move way out
of my coordinates.
And in the earlier lesson, we saw how we selected the container dimensions.
So we've got that within a value.
And now we can utilize that to set the restrictions of where the ship can move to the left, as well
as where the ship can move to the right.
So that's coming up in the next lesson.