What's a game without interaction, this lesson we're going to be adding in keyboard event listeners
so that we can create some user interaction into our project.
So first of all, we need a few more variables that we need to set up and we have to set up the ones
for the basic gameplay area.
Let's set up one called player and then within player.
So this is going to be an object as well and saves us a little bit of space where we can create one
variable that can contain multiple values, having our speed.
So the speed essentially is going to be the width of each one of these elements.
And I usually just try to make it dynamic.
So right now it's going to be one hundred and we can make it dynamically if we want it later on as well.
But we know that each one of the movements is going to be a 100 movement, either up or down.
And then you can also adjust this accordingly starting square.
So this is the square position, the square that the player is sitting on.
And we know from where we've got our game box and where we added in our player, which was box, that
we're putting them in the first square.
So we're going to set that square to one.
And this is also going to adjust as we play the game, also setting our score to zero.
So this gives us some variables that we can work with as we build the game out.
Next, taking our document object, we're adding another event listener and this event listener is going
to be on key up.
So every time the key is up, then we want to launch this function and we want to listen for the listener.
So that's going to be whatever triggered that event.
So if a console log that and let's just add that other bracket there and refresh.
So now whenever I press the key, we see that we've got these keyboard events that are firing off.
I can clear that up and I'm just pressing the arrow keys.
So we've got the key is Arrow writes, the code is Arrow, right?
So we've got all of this key information and this is all of the information.
This is the event, the key up event we've got, which which is the keyboard, the key number, the
key value.
We've got key code, which is also the same as which as well.
So we can use either one of those.
We could also use the arrow.
Right.
And so on.
And in this case, what we're going to use is key code to do something a little bit different.
So sometimes you can use the arrow, right, as well.
So those ones are all just different, valid ways to track the key presses.
So this is just another option for tracking key presses.
So what we want to do is we want to take that key code and we want to pass it in.
And also we want to restrict to certain keys.
And the way that we're going to do that is we're going to allow key and create an object with only the
key values that we want to allow.
So having our 37 is going to be equal to left having our 38.
So these are all the values that correspond with the key codes.
So that's up.
And as we saw, 39 is right.
And then there's 40, which is the last one, the last movement that we need to track.
And that's don't want to pass in those values into the console log before we pass it into the function.
So we've got our allow key and then sending that in because this is an object.
So we've got our E key code.
And remember, this is the one that's being output there and we're passing that in.
So show you what this is actually going to do.
So I going to clear this and I'm pressing the arrow keys.
So that's right down, left up.
And any of the other keys that I'm pressing, it just comes back unidentified.
So we know that if it's unidentified and that's because it's not within the loud keys.
So if it's unidentified, then we don't want to do anything with it.
So next, let's create another variable and another function and will handle key press.
And so what we're going to do is we're going to pass this value in so we can do also a condition to
see if al-Malki if it exists, then we handle the key press and we're going to pass that same key code
value and let's create that function to handle that.
And the key press function and we're passing in whatever the value of the key is, and console logout
that value of key that's being pressed on.
Let's try that one more time.
I'll clear that.
So if I press space comes back unidentified, if I press right, if I press down, if I press left,
if I press up, then it goes to that function.
So that's exactly what we want.
And this is kind of a quick and easy way to restrict certain keys to be the ones that we're listening
for.
So now that we're passing it on to our handle key press, coming up next is where we're actually going
to be removing this red box element around the different squares.
So that's still to come.
So go ahead and add in the ability to listen for the key up of that and then the.
Whichever queues get pressed past it into a function and are going to be ready to move on to the next
step.