This lesson we're going to be adding in more event listeners, and these are going to be the key press
event listeners, so whenever the player kicks a key on their keyboard, it's going to invoke these
key press functions.
So setting up our document, adding an event listener, just as we would any other event listener and
the event listener that we're listening for is key down.
So any time somebody presses on the keyboard and presses down on the keyboard when the where where they're
located, the focus is located within the document, which is everywhere, the whole page, then we
are going to be invoking our function.
We'll call it press on, and then we're going to also do another one for press off.
So we're going to be able to detect once the player presses the key and then once they let go of the
key and using key up method in order to accomplish that or press on function.
And we need to listen for the event object.
So we're passing that in as a variable e and we can also prevent the default action by using the JavaScript
method, prevent default.
And I've got a console log out the value of event key and within this event object, we're passing quite
a bit of information and we're going to be making use of determining what key was pressed whenever the
key was off.
And as well, we're going to take the key that was last pressed and we're going to output that into
key off.
And I'm going to separate the note so that we can distinguish between the two functions.
So let's try that out.
So refresh.
And now whenever I press the key, I can see that I've got on.
And key off and what we want to do for this is we want to toggle a function that determines which way
in which key is actually being pressed so that we can take some type of action depending on what key
is pressed.
And we also want to have the ability to press multiple keys at the same time and check to see what those
keys are and how they're being invoked.
So in case we have multiple keys, I'll clear this out.
And this time I'm going to press the up and the down at the same time.
And you see, when I lift off of one and then I lift off of the other, we get that off function invoking.
And that's how we can detect whether the player is pressing one key, two keys and depending on how
many keys they've got.
Pressed, we can take the action accordingly, set up an object to track which keys are being pressed
and we're going to use the same values that we've got for the key names that we're seeing here being
indicated within the console.
So setting up an object and we're just going to check to see if the key is has a boolean value.
So whether it's pressed on or off and then we're going to take a actions accordingly.
So using arrow up, let's set that.
So by default, we're going to set them all to be false.
And this way we can handle multiple key presses.
At the same time, there's also error rate.
So default for that, of course, false.
And then the last one that we're going to be tracking and if you can if you want to track additional
key presses, you can do that as well within this type of format.
So you could track as many keys as you wanted to within this Keeves object.
So lesson that we want to do is instead of tracking that the keys have been up and down, we're going
to simply take that key value from the event key and add within that key object setting the key.
So corresponding to the string value of key that we saw output within the console or set that value
to be false.
And we need to do the same thing for UNCLICK.
So we said it to be true in this case.
Are you going to see that now?
We're toggling between the Boolean values and we know exactly which keys are being pressed.
So while I'm pressing the up arrow, I see that we've got Aperol.
True if I'm pressing left area with the left arrows.
True if I push another key.
So now I'm pushing the left and the right.
Ariels So arrow right is true.
Arrow left is true.
And we've got full control so we can have as many keys pressed as needed within our application and
we can track all of the key presses.
So go ahead and add this into your application.
Add in the ability to track what keys are being pressed and also set up an object.
You can call it keys as well, that tracks which keys are being pressed.
And coming up next, I'm going to show you how to introduce gameplay and we'll create an object that
will move around depending on what keys are pressed.