1
00:00:00,880 --> 00:00:05,320
This lesson we're going to be adding in more event listeners, and these are going to be the key press

2
00:00:05,320 --> 00:00:11,650
event listeners, so whenever the player kicks a key on their keyboard, it's going to invoke these

3
00:00:11,650 --> 00:00:12,900
key press functions.

4
00:00:13,210 --> 00:00:18,620
So setting up our document, adding an event listener, just as we would any other event listener and

5
00:00:18,620 --> 00:00:21,600
the event listener that we're listening for is key down.

6
00:00:22,510 --> 00:00:28,510
So any time somebody presses on the keyboard and presses down on the keyboard when the where where they're

7
00:00:28,510 --> 00:00:34,270
located, the focus is located within the document, which is everywhere, the whole page, then we

8
00:00:34,270 --> 00:00:36,370
are going to be invoking our function.

9
00:00:36,790 --> 00:00:41,770
We'll call it press on, and then we're going to also do another one for press off.

10
00:00:41,960 --> 00:00:48,100
So we're going to be able to detect once the player presses the key and then once they let go of the

11
00:00:48,100 --> 00:00:53,500
key and using key up method in order to accomplish that or press on function.

12
00:00:53,500 --> 00:00:55,810
And we need to listen for the event object.

13
00:00:55,930 --> 00:01:03,970
So we're passing that in as a variable e and we can also prevent the default action by using the JavaScript

14
00:01:03,970 --> 00:01:05,160
method, prevent default.

15
00:01:05,170 --> 00:01:11,680
And I've got a console log out the value of event key and within this event object, we're passing quite

16
00:01:11,680 --> 00:01:18,040
a bit of information and we're going to be making use of determining what key was pressed whenever the

17
00:01:18,040 --> 00:01:19,240
key was off.

18
00:01:19,630 --> 00:01:25,330
And as well, we're going to take the key that was last pressed and we're going to output that into

19
00:01:25,340 --> 00:01:26,050
key off.

20
00:01:26,350 --> 00:01:31,080
And I'm going to separate the note so that we can distinguish between the two functions.

21
00:01:31,810 --> 00:01:32,770
So let's try that out.

22
00:01:32,800 --> 00:01:33,640
So refresh.

23
00:01:33,910 --> 00:01:38,230
And now whenever I press the key, I can see that I've got on.

24
00:01:39,160 --> 00:01:46,390
And key off and what we want to do for this is we want to toggle a function that determines which way

25
00:01:46,390 --> 00:01:52,180
in which key is actually being pressed so that we can take some type of action depending on what key

26
00:01:52,180 --> 00:01:52,780
is pressed.

27
00:01:53,260 --> 00:01:59,560
And we also want to have the ability to press multiple keys at the same time and check to see what those

28
00:01:59,770 --> 00:02:01,740
keys are and how they're being invoked.

29
00:02:01,990 --> 00:02:04,950
So in case we have multiple keys, I'll clear this out.

30
00:02:05,140 --> 00:02:08,530
And this time I'm going to press the up and the down at the same time.

31
00:02:08,740 --> 00:02:14,860
And you see, when I lift off of one and then I lift off of the other, we get that off function invoking.

32
00:02:15,220 --> 00:02:20,470
And that's how we can detect whether the player is pressing one key, two keys and depending on how

33
00:02:20,470 --> 00:02:21,790
many keys they've got.

34
00:02:23,470 --> 00:02:30,190
Pressed, we can take the action accordingly, set up an object to track which keys are being pressed

35
00:02:30,370 --> 00:02:36,130
and we're going to use the same values that we've got for the key names that we're seeing here being

36
00:02:36,130 --> 00:02:37,880
indicated within the console.

37
00:02:38,440 --> 00:02:44,830
So setting up an object and we're just going to check to see if the key is has a boolean value.

38
00:02:44,840 --> 00:02:48,980
So whether it's pressed on or off and then we're going to take a actions accordingly.

39
00:02:49,720 --> 00:02:53,800
So using arrow up, let's set that.

40
00:02:53,920 --> 00:02:56,490
So by default, we're going to set them all to be false.

41
00:02:56,530 --> 00:02:59,530
And this way we can handle multiple key presses.

42
00:02:59,530 --> 00:03:02,340
At the same time, there's also error rate.

43
00:03:02,650 --> 00:03:04,810
So default for that, of course, false.

44
00:03:05,570 --> 00:03:10,270
And then the last one that we're going to be tracking and if you can if you want to track additional

45
00:03:10,270 --> 00:03:13,630
key presses, you can do that as well within this type of format.

46
00:03:13,870 --> 00:03:17,710
So you could track as many keys as you wanted to within this Keeves object.

47
00:03:18,220 --> 00:03:24,280
So lesson that we want to do is instead of tracking that the keys have been up and down, we're going

48
00:03:24,280 --> 00:03:32,530
to simply take that key value from the event key and add within that key object setting the key.

49
00:03:32,980 --> 00:03:38,590
So corresponding to the string value of key that we saw output within the console or set that value

50
00:03:38,590 --> 00:03:39,220
to be false.

51
00:03:39,820 --> 00:03:42,460
And we need to do the same thing for UNCLICK.

52
00:03:42,670 --> 00:03:44,560
So we said it to be true in this case.

53
00:03:44,730 --> 00:03:45,940
Are you going to see that now?

54
00:03:45,940 --> 00:03:51,750
We're toggling between the Boolean values and we know exactly which keys are being pressed.

55
00:03:52,060 --> 00:03:55,630
So while I'm pressing the up arrow, I see that we've got Aperol.

56
00:03:55,630 --> 00:03:58,660
True if I'm pressing left area with the left arrows.

57
00:03:58,660 --> 00:04:01,190
True if I push another key.

58
00:04:01,600 --> 00:04:03,460
So now I'm pushing the left and the right.

59
00:04:03,460 --> 00:04:05,890
Ariels So arrow right is true.

60
00:04:05,890 --> 00:04:06,970
Arrow left is true.

61
00:04:07,210 --> 00:04:13,540
And we've got full control so we can have as many keys pressed as needed within our application and

62
00:04:13,540 --> 00:04:15,310
we can track all of the key presses.

63
00:04:15,910 --> 00:04:17,860
So go ahead and add this into your application.

64
00:04:18,010 --> 00:04:23,530
Add in the ability to track what keys are being pressed and also set up an object.

65
00:04:23,740 --> 00:04:28,900
You can call it keys as well, that tracks which keys are being pressed.

66
00:04:29,230 --> 00:04:33,490
And coming up next, I'm going to show you how to introduce gameplay and we'll create an object that

67
00:04:33,490 --> 00:04:36,370
will move around depending on what keys are pressed.