Let's make this game interesting, I think, in keyboard event listeners, and this is the key to the
game, because obviously we are listening for and this is a keyboard based game, so you press the arrow
keys.
We need to create some movement.
So listen on the document object.
So just like any other element, just as we listen to the button, we can add an event listener for
this.
And the event listener that we're listening for is the key down event.
And then whenever the key is pressed down, we can invoke a function.
So let's call this press key on function.
So we're going to invoke that function.
And then we also want to listen for the key and will press key off function.
So those are the two functions that are going to handle all the key presses.
Also, we need to create some variables and this is going to be a main object so we can have an object.
We can call that keys and this is going to have all of the valid he presses.
So we've got arrow up so that to false.
We've also got arrow down and that's also false.
And we're going to adjust these as the player presses the key.
And then, of course, there's left and right.
So setting both of those two false as well.
And we're going to be ready to update this object value when we press the keys.
And then when we run the animation, we're going to be checking to see what the value of the key is,
is.
And depending on what the value of the Keys object is, if any of these are true, then we're going
to take the appropriate action, moving the players object accordingly.
So now that we've got the function where we're listening for the key presses, so let's create that.
And this is the key on.
So whenever the player presses any of the keys, we're going to capture the event object.
And within that event, object you're going to see will console log out the event key.
And we also need to set up the on key off function so that we have a way to handle that.
So let's refresh.
And now whenever I press anywhere on the screen, you're going to see that it's capturing the keys.
So there's the arrow down the arrow, right?
The arrow up and the arrow left.
And that's why I named the object within that format as well, so that we can update these simply by
using the event key name and adding that into the keys object.
So we don't have to specify what is being pressed down.
And all we need to do is taken that event.
Key object name.
So that's the same one that we're putting in the console and set that to.
True.
And whenever the key is released, then we're going to set it back to false.
So at this way we were able to track whatever is happening with the key presses.
And there's one other thing that I did want to add in, and that's the event prevent default action.
And what this does is it's a JavaScript method that prevents the default action.
So you press a key on your keyboard.
The default action is that a character gets entered in.
So we don't really need to have the characters entered in.
So those who are setting up to prevent default and let's try that out.
So we hit the start button and we've got all of these arrows that we're pressing.
And then at any time and of course, I can't press the keys and also see the keys object, but you can
see that they're false.
And then if I press any of the keys, they're actually going to be coming up.
True.
But I'm not outputting that object, so we can't actually see it.
But you have to take my word for it to go ahead and add this into your project.
And coming up next, we're going to make the magic happen where we're going to set up that animation
frame and that's going to give us the ability to move our player object around the screen according
to whatever the key presses are.
So this is a crucial part.
Go ahead and Adderson.
And coming up next, we're going to make things even more interesting.