Welcome back in this lesson, we're going to be tracking our keyboard events and we saw in the last
lesson that we can add event listeners to the key down and key up.
And when I say what we're tracking our key presses, I want to create an object that's going to track
what keys are being pressed.
So creating an object on the global scope.
And we're going to just simply create this object and have keys as a blank object.
So that's going to allow us to, whenever the key is pressed, that we can track that key value.
So we're passing in in as an argument within the function that gets triggered when the key is down or
the key is up.
So we've got press on, press off functions and we're passing in an event and I'll show you what shows
up within that event objects.
So instead of typing in on and off, we'll pass on that full event object.
So now whenever I press one of the keys, you can see there's quite a bit of information that gets passed.
So the first one was on the key.
So tells you what type of event.
So the key down and it gives you some information.
So we've got what key was pressed and this is the important part.
So we can use either the key codes or we can use the actual key value.
And I'm going to actually be using the key.
A value is going to be a little bit easier for the way that I'm setting this up.
And we also have a code for space.
So we see that the key value was a space, but the code is a space as well.
So we can use either one of these and the same thing for the code being space.
So this is on the key up and I'll show you another one when we do the arrow keys.
So clicking on the objects.
So we've got our left arrow.
So again, the code is arrow left and the keyboard event is.
Four key up is arrow left as well.
So notice that within the code, we don't have to worry about the space because if we try to create
our objects accordingly with the key value, then we're going to have a blank for the key value.
So let's use the key code.
So passing in code value and let's try that one more time.
So now whenever I press any of the keys, you see that they're being output within our console.
Let's take a closer look at keyboard event Key and Mozilla developer network Campden has a really nice
example here.
What happens with the keyboard event key?
Whenever the key is pressed, then we pass off and we trigger an event.
So we've got an example down here.
So they're adding an event listener to the window object as key down and it's invoking this function
and passing in that event.
And then they're using the switch statement and depending on the event key.
So then we saw that there was a difference between key and code.
So we're going to be actually using code instead of key.
But we do have information here that if case is down, then what happens if arrow down and we can do
something?
And in some cases you're going to see that the movement is calculated within the key presses.
They can do that as well.
But but because we're planning on using the request animation frame, it's a better and a smoother transition
of the key presses if we're tracking it in as an object and then utilizing that information as we're
running our animation.
So depending on what is contained within the Keys object, which is going to be related to what keys
got pressed on and off, we're going to have a much smoother animation at the end.
So what we want to track is we want to add the key value into the keys object.
So taking that object information has set a value to the key code.
It's now going to be contained within the Keys object using booleans.
So we're going to set that as true.
And then when it's pressed off, we're going to get that same value and we'll press the note and will
output it as false.
So now when we refresh, I've got my right arrow and then when I let off of it, it goes to false.
So now we've got our up arrow and now it's close to true.
We've got our space is true and I've led off of it.
So now it's going back to false.
And when we're doing our animation frame, we can read these values into the animation frame and then
take the action accordingly.
Now there's one other action that can be included as well, and that's the prevent default.
And turning back to the Mozilla developer network.
So the event prevent default.
What this does is it prevents the default action from taking place.
So each one of the key presses already has a default action.
And because we don't want the user to be rating out any of the content, we want to prevent that default
action.
So essentially, the prevent default method, the event does not get explicitly handled.
Its default action should not be taken as normally.
And in this case, it's not going to really affect our application, but it's always a good idea to
include it in case you start using some of the keys that you do want to prevent default actions on.
And what it will do is it will stop the default action from occurring.
And also, keep in mind, what this is also doing is it's preventing any of your key presses from taking
place.
So you may or may not want to include this depending on how you want to build out your application.
So go ahead and add this into your project.
And in the next lesson, we're going to create our element and they'll have it move around depending
on what keys are pressed.
So that's coming up in a big lesson coming up next.