1 00:00:00,700 --> 00:00:01,560 Welcome back. 2 00:00:01,660 --> 00:00:06,700 This lesson we're going to be covering a key event listeners, so listening for keyboard events and 3 00:00:06,700 --> 00:00:09,280 of course, our game is a keyboard based game. 4 00:00:09,440 --> 00:00:13,770 So we need to listen for those key presses from the user's keyboard. 5 00:00:14,140 --> 00:00:19,420 So using the document add event, listener method, that's a default in JavaScript. 6 00:00:19,570 --> 00:00:21,610 We're going to listen for a key down. 7 00:00:21,760 --> 00:00:25,330 So that's the event that we're listening for and we're listening on the document object. 8 00:00:25,510 --> 00:00:28,360 So it doesn't matter where they are on the document object. 9 00:00:28,450 --> 00:00:34,480 If they press key down, it will invoke this function and we're going to do a press on function. 10 00:00:34,490 --> 00:00:36,580 So we're going to create that function next. 11 00:00:36,580 --> 00:00:43,480 Let's do a document and we want to track when the user lifts the key up as well. 12 00:00:43,690 --> 00:00:47,020 So we want to track another one and that's key up function. 13 00:00:47,440 --> 00:00:50,620 And we'll call this function press off. 14 00:00:50,620 --> 00:00:51,970 Let's create those functions. 15 00:00:52,930 --> 00:00:54,460 So press on function. 16 00:00:54,460 --> 00:01:00,310 We're passing the event object in and for now we'll console log out as well. 17 00:01:00,550 --> 00:01:02,710 We're going to create another one for press. 18 00:01:03,250 --> 00:01:04,110 And this is when. 19 00:01:04,300 --> 00:01:09,660 So this will indicate to us when the user is no longer pressing the key. 20 00:01:10,030 --> 00:01:15,850 So we want to have the user want to give them the ability to constantly have the key down and be able 21 00:01:15,850 --> 00:01:17,070 to run the functionality. 22 00:01:17,440 --> 00:01:18,820 That's why we're doing it this way. 23 00:01:18,970 --> 00:01:22,280 Instead of listening for the key down and then taking the action. 24 00:01:22,300 --> 00:01:23,620 So this way, it's more effective. 25 00:01:23,830 --> 00:01:30,640 And we can also listen for multiple key events at the same time as we loop through our animation sequence. 26 00:01:31,330 --> 00:01:32,230 Let's try this out. 27 00:01:32,380 --> 00:01:37,270 So going into our console so we don't see anything new within the browser area. 28 00:01:37,630 --> 00:01:43,120 But if we go into the console and if I type some keys, you can see that I've got a keyboard event. 29 00:01:43,120 --> 00:01:45,270 So press the cookie. 30 00:01:45,460 --> 00:01:46,300 Let's try one more. 31 00:01:46,300 --> 00:01:52,000 So I press the esky and you can see as soon as I press it down, we try that one more time. 32 00:01:52,210 --> 00:01:56,410 So I'm pressing it down and I'm constantly still pressing it down. 33 00:01:56,530 --> 00:02:00,550 And when I lift up, it's going to invoke one more event, the key up event. 34 00:02:01,120 --> 00:02:05,710 And you see that we've got a bunch of information that's being passed through within that event object. 35 00:02:05,710 --> 00:02:09,760 And the one that we're going to be looking at, the part of the object that we're looking at is the 36 00:02:09,760 --> 00:02:13,030 key, which is going to actually tell us which key got pressed. 37 00:02:13,600 --> 00:02:16,960 There's one key that we do need to listen for, and that's going to be the space. 38 00:02:17,200 --> 00:02:21,760 And as you can see within the key, it's going to be blank. 39 00:02:22,060 --> 00:02:24,820 We could also listen for a key code as well. 40 00:02:25,120 --> 00:02:27,340 So there's a number of different things that we can do. 41 00:02:27,460 --> 00:02:35,380 But we are going to listen for the space as well, and we're going to listen for the space value to 42 00:02:35,380 --> 00:02:41,170 be pressed in also tracking all of the key events within a key object. 43 00:02:41,470 --> 00:02:43,810 And this is going to be a global key object. 44 00:02:43,990 --> 00:02:50,320 And then we're going to reference this global ki's object as needed when we have when we're running 45 00:02:50,320 --> 00:02:53,560 through our animation frame to determine what we need to do. 46 00:02:53,710 --> 00:03:00,160 So setting this up as a default of false and on key press, first, we want to prevent default. 47 00:03:00,170 --> 00:03:03,070 And what this does is this prevents the default action. 48 00:03:03,490 --> 00:03:08,560 So even though the key is pressed, if there was some action that's by default associated with it, 49 00:03:08,740 --> 00:03:10,770 this would remove that default action. 50 00:03:11,260 --> 00:03:17,950 I usually like to include this just in case, even though the key presses typically don't have default 51 00:03:17,950 --> 00:03:19,960 actions that are going to affect the gameplay. 52 00:03:20,140 --> 00:03:22,620 But there are some keys that potentially might. 53 00:03:22,900 --> 00:03:25,000 So that's why I usually like to include that. 54 00:03:25,240 --> 00:03:30,940 The next thing that we want to do is track the key event and we want to track it back into our object. 55 00:03:31,120 --> 00:03:38,170 And as we saw that whatever the space is pressed, then we just get a blank area so we can't have an 56 00:03:38,170 --> 00:03:40,060 object name as just a blank. 57 00:03:40,210 --> 00:03:42,070 We need to give it an actual name. 58 00:03:42,250 --> 00:03:46,240 So that's where we're going to be selecting and we're checking to see what key is pressed. 59 00:03:46,480 --> 00:03:50,470 So under the event object, we saw that we could see the key value. 60 00:03:50,710 --> 00:03:55,180 So we're checking to see if that key value is equal to the blank space. 61 00:03:55,540 --> 00:03:59,920 And if it is, then we're going to provide a name of space for it. 62 00:04:00,460 --> 00:04:04,630 And if it's not, then we're just going to use whatever the key name was. 63 00:04:04,910 --> 00:04:10,540 Are you going to use these within the objects, within this type of format where we've got our keys 64 00:04:10,540 --> 00:04:17,140 object that we created and this is a global variable so we can access it from anywhere to whatever is 65 00:04:17,140 --> 00:04:18,340 equal to Temkin. 66 00:04:18,730 --> 00:04:23,560 So if it's an up or down, then that will be the temporary key within keys. 67 00:04:23,800 --> 00:04:26,980 And if it's a space, then it will be under space. 68 00:04:26,980 --> 00:04:29,470 So bickies spaetzle it to true. 69 00:04:30,070 --> 00:04:32,500 And then here, whatever the value of Keyes's. 70 00:04:33,190 --> 00:04:34,990 So let's go in and try this out and I'll show it. 71 00:04:34,990 --> 00:04:38,830 This looks like so now when I press space we get space. 72 00:04:39,010 --> 00:04:39,340 True. 73 00:04:39,940 --> 00:04:44,920 When I'm up throwing I get up Otaru when I'm right throwing I get right erro true. 74 00:04:45,250 --> 00:04:49,330 When I'm down throwing I get down arrow true up true. 75 00:04:49,510 --> 00:04:52,060 And so we get all of these values as true. 76 00:04:52,390 --> 00:04:58,300 So we need to do one last thing and that's going to be to remove them out and set them as false when 77 00:04:58,300 --> 00:04:59,350 the key is up. 78 00:04:59,740 --> 00:05:00,040 So the. 79 00:05:00,110 --> 00:05:05,990 Format is the same for the first two, and then the difference here is we're setting it to false whenever 80 00:05:05,990 --> 00:05:06,960 the key is up. 81 00:05:07,460 --> 00:05:08,710 So now let's try that out. 82 00:05:09,320 --> 00:05:16,100 So now we should have only a true value when the key is being pressed, make clear that whatever the 83 00:05:16,100 --> 00:05:18,430 key is pressed, we have a true value. 84 00:05:18,770 --> 00:05:21,260 And then when it's let off, we have a false value. 85 00:05:21,560 --> 00:05:23,240 So I'm pressing two keys right now. 86 00:05:23,240 --> 00:05:25,250 So that's the up arrow and the right arrow. 87 00:05:25,640 --> 00:05:28,280 If I'm adding in the space, the space goes to true. 88 00:05:28,730 --> 00:05:33,800 If I'm pressing any of the other keys, you can see that they're going to true on the right hand side. 89 00:05:34,630 --> 00:05:40,780 And this is exactly what we want as we're iterating through, we're going to check the Keys object values 90 00:05:40,780 --> 00:05:41,740 because this is global. 91 00:05:41,950 --> 00:05:47,500 So within the function where we're doing our animation frame that will tell us which direction to move 92 00:05:47,500 --> 00:05:54,840 our character, effectively creating the ability to move our character using the keyboard. 93 00:05:55,150 --> 00:06:00,220 And also we're going to be tracking the space, which is how the airplane is actually going to drop 94 00:06:00,220 --> 00:06:00,670 the bomb. 95 00:06:01,090 --> 00:06:02,650 So that's still all yet to come. 96 00:06:02,890 --> 00:06:09,400 So go ahead and try this one out where you're tracking the key events, placing into a key object. 97 00:06:09,910 --> 00:06:13,810 And depending on if the key is pressed, it's going to be true. 98 00:06:13,900 --> 00:06:16,660 And if it's not pressed, it's going to go back to false. 99 00:06:16,720 --> 00:06:17,650 So go ahead and try that. 100 00:06:17,860 --> 00:06:18,910 Add that into your project.