1 00:00:00,530 --> 00:00:06,260 Welcome back in this lesson, we're going to be tracking our keyboard events and we saw in the last 2 00:00:06,260 --> 00:00:10,520 lesson that we can add event listeners to the key down and key up. 3 00:00:10,730 --> 00:00:16,370 And when I say what we're tracking our key presses, I want to create an object that's going to track 4 00:00:16,370 --> 00:00:17,960 what keys are being pressed. 5 00:00:18,200 --> 00:00:20,660 So creating an object on the global scope. 6 00:00:20,930 --> 00:00:27,530 And we're going to just simply create this object and have keys as a blank object. 7 00:00:27,950 --> 00:00:34,330 So that's going to allow us to, whenever the key is pressed, that we can track that key value. 8 00:00:34,670 --> 00:00:40,610 So we're passing in in as an argument within the function that gets triggered when the key is down or 9 00:00:40,610 --> 00:00:41,530 the key is up. 10 00:00:41,690 --> 00:00:48,710 So we've got press on, press off functions and we're passing in an event and I'll show you what shows 11 00:00:48,710 --> 00:00:50,380 up within that event objects. 12 00:00:51,200 --> 00:00:55,670 So instead of typing in on and off, we'll pass on that full event object. 13 00:00:55,940 --> 00:01:01,250 So now whenever I press one of the keys, you can see there's quite a bit of information that gets passed. 14 00:01:01,550 --> 00:01:04,150 So the first one was on the key. 15 00:01:04,430 --> 00:01:05,870 So tells you what type of event. 16 00:01:05,900 --> 00:01:08,930 So the key down and it gives you some information. 17 00:01:09,620 --> 00:01:13,640 So we've got what key was pressed and this is the important part. 18 00:01:13,880 --> 00:01:19,340 So we can use either the key codes or we can use the actual key value. 19 00:01:19,730 --> 00:01:22,400 And I'm going to actually be using the key. 20 00:01:22,400 --> 00:01:26,360 A value is going to be a little bit easier for the way that I'm setting this up. 21 00:01:26,540 --> 00:01:29,180 And we also have a code for space. 22 00:01:29,720 --> 00:01:34,480 So we see that the key value was a space, but the code is a space as well. 23 00:01:34,820 --> 00:01:39,690 So we can use either one of these and the same thing for the code being space. 24 00:01:39,950 --> 00:01:44,120 So this is on the key up and I'll show you another one when we do the arrow keys. 25 00:01:44,420 --> 00:01:45,760 So clicking on the objects. 26 00:01:45,760 --> 00:01:47,460 So we've got our left arrow. 27 00:01:47,930 --> 00:01:53,240 So again, the code is arrow left and the keyboard event is. 28 00:01:54,200 --> 00:01:56,700 Four key up is arrow left as well. 29 00:01:57,020 --> 00:02:02,060 So notice that within the code, we don't have to worry about the space because if we try to create 30 00:02:02,060 --> 00:02:08,660 our objects accordingly with the key value, then we're going to have a blank for the key value. 31 00:02:08,690 --> 00:02:10,160 So let's use the key code. 32 00:02:11,180 --> 00:02:15,600 So passing in code value and let's try that one more time. 33 00:02:16,040 --> 00:02:22,340 So now whenever I press any of the keys, you see that they're being output within our console. 34 00:02:23,120 --> 00:02:30,440 Let's take a closer look at keyboard event Key and Mozilla developer network Campden has a really nice 35 00:02:30,440 --> 00:02:31,150 example here. 36 00:02:31,160 --> 00:02:34,160 What happens with the keyboard event key? 37 00:02:34,160 --> 00:02:38,410 Whenever the key is pressed, then we pass off and we trigger an event. 38 00:02:38,480 --> 00:02:39,910 So we've got an example down here. 39 00:02:39,920 --> 00:02:46,070 So they're adding an event listener to the window object as key down and it's invoking this function 40 00:02:46,310 --> 00:02:47,840 and passing in that event. 41 00:02:47,870 --> 00:02:52,400 And then they're using the switch statement and depending on the event key. 42 00:02:52,730 --> 00:02:55,820 So then we saw that there was a difference between key and code. 43 00:02:56,210 --> 00:02:58,830 So we're going to be actually using code instead of key. 44 00:02:58,850 --> 00:03:05,540 But we do have information here that if case is down, then what happens if arrow down and we can do 45 00:03:05,540 --> 00:03:06,020 something? 46 00:03:06,230 --> 00:03:11,560 And in some cases you're going to see that the movement is calculated within the key presses. 47 00:03:11,600 --> 00:03:12,710 They can do that as well. 48 00:03:12,710 --> 00:03:19,400 But but because we're planning on using the request animation frame, it's a better and a smoother transition 49 00:03:19,400 --> 00:03:27,050 of the key presses if we're tracking it in as an object and then utilizing that information as we're 50 00:03:27,050 --> 00:03:28,130 running our animation. 51 00:03:28,310 --> 00:03:33,920 So depending on what is contained within the Keys object, which is going to be related to what keys 52 00:03:33,920 --> 00:03:37,850 got pressed on and off, we're going to have a much smoother animation at the end. 53 00:03:37,940 --> 00:03:43,880 So what we want to track is we want to add the key value into the keys object. 54 00:03:43,880 --> 00:03:48,550 So taking that object information has set a value to the key code. 55 00:03:48,560 --> 00:03:51,850 It's now going to be contained within the Keys object using booleans. 56 00:03:51,860 --> 00:03:53,630 So we're going to set that as true. 57 00:03:53,630 --> 00:03:58,460 And then when it's pressed off, we're going to get that same value and we'll press the note and will 58 00:03:58,460 --> 00:03:59,820 output it as false. 59 00:03:59,840 --> 00:04:06,620 So now when we refresh, I've got my right arrow and then when I let off of it, it goes to false. 60 00:04:06,770 --> 00:04:09,920 So now we've got our up arrow and now it's close to true. 61 00:04:10,250 --> 00:04:13,280 We've got our space is true and I've led off of it. 62 00:04:13,290 --> 00:04:14,800 So now it's going back to false. 63 00:04:14,810 --> 00:04:21,290 And when we're doing our animation frame, we can read these values into the animation frame and then 64 00:04:21,290 --> 00:04:22,760 take the action accordingly. 65 00:04:22,820 --> 00:04:28,430 Now there's one other action that can be included as well, and that's the prevent default. 66 00:04:28,430 --> 00:04:31,090 And turning back to the Mozilla developer network. 67 00:04:31,370 --> 00:04:33,250 So the event prevent default. 68 00:04:33,290 --> 00:04:37,390 What this does is it prevents the default action from taking place. 69 00:04:37,430 --> 00:04:40,850 So each one of the key presses already has a default action. 70 00:04:41,060 --> 00:04:46,700 And because we don't want the user to be rating out any of the content, we want to prevent that default 71 00:04:46,700 --> 00:04:47,220 action. 72 00:04:47,300 --> 00:04:52,040 So essentially, the prevent default method, the event does not get explicitly handled. 73 00:04:52,040 --> 00:04:55,100 Its default action should not be taken as normally. 74 00:04:55,110 --> 00:04:59,690 And in this case, it's not going to really affect our application, but it's always a good idea to 75 00:04:59,690 --> 00:05:04,820 include it in case you start using some of the keys that you do want to prevent default actions on. 76 00:05:04,850 --> 00:05:09,290 And what it will do is it will stop the default action from occurring. 77 00:05:09,380 --> 00:05:15,800 And also, keep in mind, what this is also doing is it's preventing any of your key presses from taking 78 00:05:15,800 --> 00:05:16,220 place. 79 00:05:16,580 --> 00:05:21,840 So you may or may not want to include this depending on how you want to build out your application. 80 00:05:21,860 --> 00:05:23,690 So go ahead and add this into your project. 81 00:05:23,900 --> 00:05:28,370 And in the next lesson, we're going to create our element and they'll have it move around depending 82 00:05:28,370 --> 00:05:29,450 on what keys are pressed. 83 00:05:29,750 --> 00:05:32,240 So that's coming up in a big lesson coming up next.