Welcome back.
This lesson we're going to be covering a key event listeners, so listening for keyboard events and
of course, our game is a keyboard based game.
So we need to listen for those key presses from the user's keyboard.
So using the document add event, listener method, that's a default in JavaScript.
We're going to listen for a key down.
So that's the event that we're listening for and we're listening on the document object.
So it doesn't matter where they are on the document object.
If they press key down, it will invoke this function and we're going to do a press on function.
So we're going to create that function next.
Let's do a document and we want to track when the user lifts the key up as well.
So we want to track another one and that's key up function.
And we'll call this function press off.
Let's create those functions.
So press on function.
We're passing the event object in and for now we'll console log out as well.
We're going to create another one for press.
And this is when.
So this will indicate to us when the user is no longer pressing the key.
So we want to have the user want to give them the ability to constantly have the key down and be able
to run the functionality.
That's why we're doing it this way.
Instead of listening for the key down and then taking the action.
So this way, it's more effective.
And we can also listen for multiple key events at the same time as we loop through our animation sequence.
Let's try this out.
So going into our console so we don't see anything new within the browser area.
But if we go into the console and if I type some keys, you can see that I've got a keyboard event.
So press the cookie.
Let's try one more.
So I press the esky and you can see as soon as I press it down, we try that one more time.
So I'm pressing it down and I'm constantly still pressing it down.
And when I lift up, it's going to invoke one more event, the key up event.
And you see that we've got a bunch of information that's being passed through within that event object.
And the one that we're going to be looking at, the part of the object that we're looking at is the
key, which is going to actually tell us which key got pressed.
There's one key that we do need to listen for, and that's going to be the space.
And as you can see within the key, it's going to be blank.
We could also listen for a key code as well.
So there's a number of different things that we can do.
But we are going to listen for the space as well, and we're going to listen for the space value to
be pressed in also tracking all of the key events within a key object.
And this is going to be a global key object.
And then we're going to reference this global ki's object as needed when we have when we're running
through our animation frame to determine what we need to do.
So setting this up as a default of false and on key press, first, we want to prevent default.
And what this does is this prevents the default action.
So even though the key is pressed, if there was some action that's by default associated with it,
this would remove that default action.
I usually like to include this just in case, even though the key presses typically don't have default
actions that are going to affect the gameplay.
But there are some keys that potentially might.
So that's why I usually like to include that.
The next thing that we want to do is track the key event and we want to track it back into our object.
And as we saw that whatever the space is pressed, then we just get a blank area so we can't have an
object name as just a blank.
We need to give it an actual name.
So that's where we're going to be selecting and we're checking to see what key is pressed.
So under the event object, we saw that we could see the key value.
So we're checking to see if that key value is equal to the blank space.
And if it is, then we're going to provide a name of space for it.
And if it's not, then we're just going to use whatever the key name was.
Are you going to use these within the objects, within this type of format where we've got our keys
object that we created and this is a global variable so we can access it from anywhere to whatever is
equal to Temkin.
So if it's an up or down, then that will be the temporary key within keys.
And if it's a space, then it will be under space.
So bickies spaetzle it to true.
And then here, whatever the value of Keyes's.
So let's go in and try this out and I'll show it.
This looks like so now when I press space we get space.
True.
When I'm up throwing I get up Otaru when I'm right throwing I get right erro true.
When I'm down throwing I get down arrow true up true.
And so we get all of these values as true.
So we need to do one last thing and that's going to be to remove them out and set them as false when
the key is up.
So the.
Format is the same for the first two, and then the difference here is we're setting it to false whenever
the key is up.
So now let's try that out.
So now we should have only a true value when the key is being pressed, make clear that whatever the
key is pressed, we have a true value.
And then when it's let off, we have a false value.
So I'm pressing two keys right now.
So that's the up arrow and the right arrow.
If I'm adding in the space, the space goes to true.
If I'm pressing any of the other keys, you can see that they're going to true on the right hand side.
And this is exactly what we want as we're iterating through, we're going to check the Keys object values
because this is global.
So within the function where we're doing our animation frame that will tell us which direction to move
our character, effectively creating the ability to move our character using the keyboard.
And also we're going to be tracking the space, which is how the airplane is actually going to drop
the bomb.
So that's still all yet to come.
So go ahead and try this one out where you're tracking the key events, placing into a key object.
And depending on if the key is pressed, it's going to be true.
And if it's not pressed, it's going to go back to false.
So go ahead and try that.
Add that into your project.