In the previous lesson, we set up functions in order to run blocks of code, and these blocks of code
will have the element that we have on the page.
So the next set we want to do in this project is add keyboard events.
So listing on the document object, let's set that up where we've got our document and adding an event
listener.
So anywhere that the document is clicked, we're going to be listening for the keyboard event.
And you can also specify keyboard events on particular elements as well.
So whenever the key down is clicked, then we're going to invoke this anonymous function and for now,
we'll log out and pass in the event object.
So clicking the keys, you get the keyboard event and we see the event object is being passed and there's
a bunch of information contained within each object and including the key code.
So this is the one that we're looking for and we're going to listen for the different key codes.
We also want to have a function that prevents any of the default actions.
So for a keyboard clicks, there's a default action associated with it.
And if we do a prevent default, that will null that default action.
And in this case, really, we don't see anything happening with the keys being pressed.
But it is always a good idea to include that in case you want to have that running in your code.
So we're listening for the key down anywhere on the document object and we're tracking the key code
values.
So if we want to just get the key code and this is an object, just like the elements, we can get the
exact key code.
So now clicking you can see that these clicks are responding to key codes for retrieving back the key
codes.
And this is the right area.
This is down.
This is left.
And this is up.
So we've got various numbers that are coming back.
So 37, 38, 39 and 40.
So next to that we want to do is we want to check whatever the key code value is.
And we can also put the key code in an object so that we can track it.
We can call it key C, and this is where we're going to get that key code value and then we can check
if whatever the value of key is.
And if Keesey is 37, then this means that we need to move left.
So we want to run the function of goal left.
So add that in and then we can use Elif and check to see if the other key values are present.
So checking to see if thirty nine is available and thirty nine is the right key.
And then we're going to invoke the function go rate and then also accounting for the up and down.
So the up key is thirty eight and these are the arrow keys on your keyboard.
So up is 38.
So it's attached the right function for that.
So go up and go down and let's see what happens.
So refresh opened this up bigger, so you press the keys and you're going to see the key code showing
up in the console.
So if I go right, you can see that the key code shows up down here at the bottom and the element moves
to the right.
We also can move down.
So it shows up as 40 also to the left.
And so it doesn't matter how many times you press the key code, it runs that block of code.
So it executes that function that's associated with it.
And now we've associated the key process with the various functions that we created in the previous
lesson.
So go ahead and add this into your project, and coming up, we're going to add some more interaction
with the keyboard, changing the element color later on in the lessons we're going to extend on the
functionality of this application.
So that is all still yet to come.