1
00:00:00,150 --> 00:00:01,400
Hello and welcome back.

2
00:00:01,440 --> 00:00:07,530
Let's add in some event, listeners to listen for a keyboard presses so that we can take action on those

3
00:00:07,530 --> 00:00:08,900
user interactions.

4
00:00:09,180 --> 00:00:13,710
So using the document object, we're adding an event listener to the entire document.

5
00:00:13,950 --> 00:00:15,980
You could also add it to the container.

6
00:00:16,110 --> 00:00:20,880
So whenever the user has selected the container, but in this case, we're going to attach it to the

7
00:00:20,880 --> 00:00:21,450
document.

8
00:00:21,840 --> 00:00:28,950
So we're listening for the event of key down and if key down, if any of the keys are pressed on the

9
00:00:28,950 --> 00:00:32,070
keyboard, then this is going to invoke this key down function.

10
00:00:32,790 --> 00:00:36,540
You can see that we can console log out that event object.

11
00:00:36,780 --> 00:00:38,100
So I'm pressing the space.

12
00:00:38,400 --> 00:00:43,290
You can see that there's quite a bit of information that gets passed through the vent object.

13
00:00:43,560 --> 00:00:49,250
You can see which key got pressed within the key code as well as within the code.

14
00:00:49,260 --> 00:00:50,580
So it's going to be the same thing.

15
00:00:50,790 --> 00:00:57,540
And typically we do use the key codes as this is a more exact way to get what the key value is.

16
00:00:58,050 --> 00:01:01,410
You can also use which so that's going to also have that same key code.

17
00:01:01,710 --> 00:01:06,660
So for the space, the key code is thirty two for going left.

18
00:01:06,660 --> 00:01:09,330
It's going to be thirty seven and four going right.

19
00:01:09,330 --> 00:01:10,670
It's going to be thirty nine.

20
00:01:10,890 --> 00:01:15,510
So we're going to listen on those events and we're going to grab that key value.

21
00:01:15,530 --> 00:01:22,650
So getting the key value object where we're going to use that event object and then key code in order

22
00:01:22,650 --> 00:01:25,050
to retrieve that key information.

23
00:01:25,290 --> 00:01:30,890
And then we can also output in the console so that we can actually see which keys we're not passing,

24
00:01:30,900 --> 00:01:34,020
that we're not getting that full object in the console anymore.

25
00:01:34,140 --> 00:01:36,270
It's just going to be the same key values.

26
00:01:36,420 --> 00:01:37,140
So it's left.

27
00:01:37,140 --> 00:01:37,770
That's right.

28
00:01:37,890 --> 00:01:39,090
And that's space.

29
00:01:39,210 --> 00:01:41,630
And there's also up, which is thirty eight.

30
00:01:41,970 --> 00:01:48,840
So we're going to attach the firing on 32 and 38 left is going to be thirty seven and right is going

31
00:01:48,840 --> 00:01:49,830
to be thirty nine.

32
00:01:50,770 --> 00:01:57,520
And within the player object, we could add in those and we can also set up another main object in order

33
00:01:57,520 --> 00:02:03,270
to control the key press so we can say key value and then this can just be an open object.

34
00:02:03,400 --> 00:02:06,540
And then as we create those, we can create them down here.

35
00:02:06,550 --> 00:02:11,730
So checking to see if the key value is equal to 37.

36
00:02:12,310 --> 00:02:19,390
And if it is there, we're going to take the key value or just call it key key V with an uppercase V

37
00:02:19,780 --> 00:02:22,310
object and assigning left.

38
00:02:23,200 --> 00:02:25,690
So setting that left value to true.

39
00:02:25,720 --> 00:02:30,420
And then we're going to check to see if the key value is 39.

40
00:02:31,180 --> 00:02:33,910
And that means that we're setting the right to.

41
00:02:33,910 --> 00:02:34,220
True.

42
00:02:34,930 --> 00:02:37,840
So this is going to give us an indicator on which direction.

43
00:02:38,080 --> 00:02:43,460
And we're also going to listen for the key up and then we're going to set these object values to false.

44
00:02:43,870 --> 00:02:50,410
So listening for those key presses, and this can also be an elusive because if one of the keys is pressed,

45
00:02:50,410 --> 00:02:54,400
if it's 37, then it's not going to be 39 or any of the other ones.

46
00:02:54,850 --> 00:03:03,790
And also, let's check to see what if the key is pressed and if it's equal to 38 or if the key that's

47
00:03:03,790 --> 00:03:06,250
pressed is equal to 32.

48
00:03:06,490 --> 00:03:14,410
And if that's true, then we are going to fire so we can take the player fire value and set that to

49
00:03:14,410 --> 00:03:15,240
be true.

50
00:03:15,580 --> 00:03:20,800
So that means that the player has invoked and they fired and we'll take care of that in one of the upcoming

51
00:03:20,800 --> 00:03:21,380
lessons.

52
00:03:21,730 --> 00:03:28,750
So now we've got tracking those key V objects within the mean key object.

53
00:03:28,990 --> 00:03:34,060
So now if I press any of the keys, you can see that they go and we get the boolean values, whether

54
00:03:34,060 --> 00:03:35,140
they're true or not.

55
00:03:35,470 --> 00:03:40,010
So there's another event listener that we need to add, and this is going to do the opposite.

56
00:03:40,210 --> 00:03:46,240
So we've got key down and then whenever the player releases the key, we're going to do the same thing

57
00:03:46,240 --> 00:03:47,590
where we're getting the key event.

58
00:03:47,890 --> 00:03:52,470
And if it's key 37, we're going to set that to false.

59
00:03:53,140 --> 00:03:54,370
If the key.

60
00:03:54,370 --> 00:03:57,640
Right, and we're set that one to false.

61
00:03:57,880 --> 00:03:59,850
And if this is lifted it up.

62
00:04:00,130 --> 00:04:02,950
So we've got to have a different action for the key up.

63
00:04:02,950 --> 00:04:09,190
We don't need to listen for the firing because we're only listening for the firing on the key down so

64
00:04:09,190 --> 00:04:11,470
we can avoid it within that scenario.

65
00:04:11,770 --> 00:04:16,780
So now, whenever I press any of the keys, you're going to see that when I press it down, it goes

66
00:04:16,780 --> 00:04:17,140
true.

67
00:04:17,320 --> 00:04:18,880
When I release, it goes false.

68
00:04:19,090 --> 00:04:21,550
And then the next one, when I hit right, it goes true.

69
00:04:21,670 --> 00:04:23,630
And when I release, it goes false.

70
00:04:23,980 --> 00:04:29,590
So now we can because this is a global object, the key value is a global object.

71
00:04:29,860 --> 00:04:36,100
When we're doing our animation, we can check to see what this key value is and apply the motion in

72
00:04:36,100 --> 00:04:37,780
the movement up accordingly.

73
00:04:38,170 --> 00:04:39,940
So go ahead and add this into your project.

74
00:04:40,210 --> 00:04:45,880
And coming up next, we're going to create our animation frame and all of the key presses are going

75
00:04:45,880 --> 00:04:46,810
to become more evident.

76
00:04:46,810 --> 00:04:52,450
And we're actually going to be able to move our ship back and forth depending on what keys are being

77
00:04:52,450 --> 00:04:53,310
pressed on the keyboard.

78
00:04:53,530 --> 00:04:54,580
So that's coming up next.