1
00:00:00,690 --> 00:00:05,850
What's a game without interaction, this lesson we're going to be adding in keyboard event listeners

2
00:00:06,000 --> 00:00:09,480
so that we can create some user interaction into our project.

3
00:00:09,750 --> 00:00:14,070
So first of all, we need a few more variables that we need to set up and we have to set up the ones

4
00:00:14,070 --> 00:00:16,210
for the basic gameplay area.

5
00:00:16,470 --> 00:00:19,650
Let's set up one called player and then within player.

6
00:00:19,680 --> 00:00:25,080
So this is going to be an object as well and saves us a little bit of space where we can create one

7
00:00:25,080 --> 00:00:29,460
variable that can contain multiple values, having our speed.

8
00:00:29,550 --> 00:00:33,570
So the speed essentially is going to be the width of each one of these elements.

9
00:00:33,840 --> 00:00:36,210
And I usually just try to make it dynamic.

10
00:00:36,240 --> 00:00:41,870
So right now it's going to be one hundred and we can make it dynamically if we want it later on as well.

11
00:00:41,880 --> 00:00:46,970
But we know that each one of the movements is going to be a 100 movement, either up or down.

12
00:00:47,340 --> 00:00:51,240
And then you can also adjust this accordingly starting square.

13
00:00:51,270 --> 00:00:55,050
So this is the square position, the square that the player is sitting on.

14
00:00:55,200 --> 00:01:02,730
And we know from where we've got our game box and where we added in our player, which was box, that

15
00:01:02,730 --> 00:01:04,200
we're putting them in the first square.

16
00:01:04,210 --> 00:01:06,420
So we're going to set that square to one.

17
00:01:06,540 --> 00:01:11,980
And this is also going to adjust as we play the game, also setting our score to zero.

18
00:01:12,210 --> 00:01:16,590
So this gives us some variables that we can work with as we build the game out.

19
00:01:16,890 --> 00:01:22,950
Next, taking our document object, we're adding another event listener and this event listener is going

20
00:01:22,950 --> 00:01:24,300
to be on key up.

21
00:01:24,540 --> 00:01:31,520
So every time the key is up, then we want to launch this function and we want to listen for the listener.

22
00:01:31,830 --> 00:01:35,220
So that's going to be whatever triggered that event.

23
00:01:35,490 --> 00:01:40,210
So if a console log that and let's just add that other bracket there and refresh.

24
00:01:40,470 --> 00:01:46,650
So now whenever I press the key, we see that we've got these keyboard events that are firing off.

25
00:01:46,830 --> 00:01:50,220
I can clear that up and I'm just pressing the arrow keys.

26
00:01:50,230 --> 00:01:55,860
So we've got the key is Arrow writes, the code is Arrow, right?

27
00:01:56,460 --> 00:02:01,230
So we've got all of this key information and this is all of the information.

28
00:02:01,260 --> 00:02:07,350
This is the event, the key up event we've got, which which is the keyboard, the key number, the

29
00:02:07,350 --> 00:02:08,010
key value.

30
00:02:08,020 --> 00:02:12,330
We've got key code, which is also the same as which as well.

31
00:02:12,340 --> 00:02:13,770
So we can use either one of those.

32
00:02:14,370 --> 00:02:15,840
We could also use the arrow.

33
00:02:15,840 --> 00:02:16,320
Right.

34
00:02:16,320 --> 00:02:17,160
And so on.

35
00:02:17,340 --> 00:02:21,070
And in this case, what we're going to use is key code to do something a little bit different.

36
00:02:21,090 --> 00:02:25,170
So sometimes you can use the arrow, right, as well.

37
00:02:25,180 --> 00:02:28,930
So those ones are all just different, valid ways to track the key presses.

38
00:02:29,250 --> 00:02:32,310
So this is just another option for tracking key presses.

39
00:02:32,690 --> 00:02:38,160
So what we want to do is we want to take that key code and we want to pass it in.

40
00:02:38,610 --> 00:02:41,820
And also we want to restrict to certain keys.

41
00:02:42,030 --> 00:02:48,840
And the way that we're going to do that is we're going to allow key and create an object with only the

42
00:02:48,840 --> 00:02:50,340
key values that we want to allow.

43
00:02:50,460 --> 00:02:56,840
So having our 37 is going to be equal to left having our 38.

44
00:02:56,850 --> 00:02:59,590
So these are all the values that correspond with the key codes.

45
00:02:59,910 --> 00:03:00,740
So that's up.

46
00:03:00,750 --> 00:03:03,840
And as we saw, 39 is right.

47
00:03:03,930 --> 00:03:09,060
And then there's 40, which is the last one, the last movement that we need to track.

48
00:03:09,060 --> 00:03:15,550
And that's don't want to pass in those values into the console log before we pass it into the function.

49
00:03:16,020 --> 00:03:20,640
So we've got our allow key and then sending that in because this is an object.

50
00:03:20,820 --> 00:03:23,300
So we've got our E key code.

51
00:03:23,400 --> 00:03:27,550
And remember, this is the one that's being output there and we're passing that in.

52
00:03:27,570 --> 00:03:29,370
So show you what this is actually going to do.

53
00:03:29,640 --> 00:03:33,660
So I going to clear this and I'm pressing the arrow keys.

54
00:03:33,660 --> 00:03:36,090
So that's right down, left up.

55
00:03:36,360 --> 00:03:40,370
And any of the other keys that I'm pressing, it just comes back unidentified.

56
00:03:40,380 --> 00:03:44,820
So we know that if it's unidentified and that's because it's not within the loud keys.

57
00:03:45,210 --> 00:03:49,120
So if it's unidentified, then we don't want to do anything with it.

58
00:03:49,650 --> 00:03:55,980
So next, let's create another variable and another function and will handle key press.

59
00:03:55,990 --> 00:04:01,950
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

60
00:04:01,950 --> 00:04:10,530
see if al-Malki if it exists, then we handle the key press and we're going to pass that same key code

61
00:04:10,530 --> 00:04:13,170
value and let's create that function to handle that.

62
00:04:13,180 --> 00:04:20,440
And the key press function and we're passing in whatever the value of the key is, and console logout

63
00:04:20,460 --> 00:04:22,790
that value of key that's being pressed on.

64
00:04:22,800 --> 00:04:24,000
Let's try that one more time.

65
00:04:24,030 --> 00:04:24,810
I'll clear that.

66
00:04:25,140 --> 00:04:31,770
So if I press space comes back unidentified, if I press right, if I press down, if I press left,

67
00:04:31,950 --> 00:04:34,310
if I press up, then it goes to that function.

68
00:04:34,800 --> 00:04:36,050
So that's exactly what we want.

69
00:04:36,060 --> 00:04:41,490
And this is kind of a quick and easy way to restrict certain keys to be the ones that we're listening

70
00:04:41,490 --> 00:04:41,740
for.

71
00:04:42,180 --> 00:04:47,070
So now that we're passing it on to our handle key press, coming up next is where we're actually going

72
00:04:47,070 --> 00:04:51,950
to be removing this red box element around the different squares.

73
00:04:52,230 --> 00:04:53,280
So that's still to come.

74
00:04:53,610 --> 00:05:00,210
So go ahead and add in the ability to listen for the key up of that and then the.

75
00:05:00,610 --> 00:05:05,200
Whichever queues get pressed past it into a function and are going to be ready to move on to the next

76
00:05:05,200 --> 00:05:05,490
step.