1
00:00:00,990 --> 00:00:06,480
Let's make this game interesting, I think, in keyboard event listeners, and this is the key to the

2
00:00:06,480 --> 00:00:13,020
game, because obviously we are listening for and this is a keyboard based game, so you press the arrow

3
00:00:13,020 --> 00:00:13,310
keys.

4
00:00:13,320 --> 00:00:14,490
We need to create some movement.

5
00:00:14,820 --> 00:00:17,160
So listen on the document object.

6
00:00:17,170 --> 00:00:22,500
So just like any other element, just as we listen to the button, we can add an event listener for

7
00:00:22,500 --> 00:00:22,770
this.

8
00:00:23,070 --> 00:00:26,910
And the event listener that we're listening for is the key down event.

9
00:00:27,390 --> 00:00:32,020
And then whenever the key is pressed down, we can invoke a function.

10
00:00:32,640 --> 00:00:36,420
So let's call this press key on function.

11
00:00:36,440 --> 00:00:37,680
So we're going to invoke that function.

12
00:00:38,100 --> 00:00:43,950
And then we also want to listen for the key and will press key off function.

13
00:00:44,310 --> 00:00:47,970
So those are the two functions that are going to handle all the key presses.

14
00:00:48,330 --> 00:00:55,590
Also, we need to create some variables and this is going to be a main object so we can have an object.

15
00:00:55,590 --> 00:00:59,800
We can call that keys and this is going to have all of the valid he presses.

16
00:01:00,180 --> 00:01:04,020
So we've got arrow up so that to false.

17
00:01:04,420 --> 00:01:08,220
We've also got arrow down and that's also false.

18
00:01:08,490 --> 00:01:12,180
And we're going to adjust these as the player presses the key.

19
00:01:12,190 --> 00:01:14,460
And then, of course, there's left and right.

20
00:01:14,790 --> 00:01:17,310
So setting both of those two false as well.

21
00:01:17,520 --> 00:01:23,880
And we're going to be ready to update this object value when we press the keys.

22
00:01:24,150 --> 00:01:29,070
And then when we run the animation, we're going to be checking to see what the value of the key is,

23
00:01:29,070 --> 00:01:29,490
is.

24
00:01:29,820 --> 00:01:34,530
And depending on what the value of the Keys object is, if any of these are true, then we're going

25
00:01:34,530 --> 00:01:39,010
to take the appropriate action, moving the players object accordingly.

26
00:01:39,360 --> 00:01:44,870
So now that we've got the function where we're listening for the key presses, so let's create that.

27
00:01:44,880 --> 00:01:47,240
And this is the key on.

28
00:01:47,250 --> 00:01:52,050
So whenever the player presses any of the keys, we're going to capture the event object.

29
00:01:52,260 --> 00:01:59,070
And within that event, object you're going to see will console log out the event key.

30
00:01:59,550 --> 00:02:05,460
And we also need to set up the on key off function so that we have a way to handle that.

31
00:02:05,460 --> 00:02:06,560
So let's refresh.

32
00:02:06,570 --> 00:02:12,120
And now whenever I press anywhere on the screen, you're going to see that it's capturing the keys.

33
00:02:12,120 --> 00:02:14,520
So there's the arrow down the arrow, right?

34
00:02:14,670 --> 00:02:16,860
The arrow up and the arrow left.

35
00:02:17,160 --> 00:02:23,130
And that's why I named the object within that format as well, so that we can update these simply by

36
00:02:23,130 --> 00:02:28,410
using the event key name and adding that into the keys object.

37
00:02:28,770 --> 00:02:32,310
So we don't have to specify what is being pressed down.

38
00:02:32,550 --> 00:02:34,830
And all we need to do is taken that event.

39
00:02:35,250 --> 00:02:36,480
Key object name.

40
00:02:36,490 --> 00:02:39,630
So that's the same one that we're putting in the console and set that to.

41
00:02:39,630 --> 00:02:39,930
True.

42
00:02:40,200 --> 00:02:45,770
And whenever the key is released, then we're going to set it back to false.

43
00:02:46,110 --> 00:02:50,730
So at this way we were able to track whatever is happening with the key presses.

44
00:02:51,030 --> 00:02:56,580
And there's one other thing that I did want to add in, and that's the event prevent default action.

45
00:02:56,850 --> 00:03:01,530
And what this does is it's a JavaScript method that prevents the default action.

46
00:03:01,740 --> 00:03:03,540
So you press a key on your keyboard.

47
00:03:03,690 --> 00:03:07,320
The default action is that a character gets entered in.

48
00:03:07,500 --> 00:03:10,070
So we don't really need to have the characters entered in.

49
00:03:10,090 --> 00:03:13,950
So those who are setting up to prevent default and let's try that out.

50
00:03:14,160 --> 00:03:18,780
So we hit the start button and we've got all of these arrows that we're pressing.

51
00:03:18,960 --> 00:03:24,840
And then at any time and of course, I can't press the keys and also see the keys object, but you can

52
00:03:24,840 --> 00:03:26,640
see that they're false.

53
00:03:26,850 --> 00:03:30,960
And then if I press any of the keys, they're actually going to be coming up.

54
00:03:30,960 --> 00:03:31,290
True.

55
00:03:31,290 --> 00:03:34,470
But I'm not outputting that object, so we can't actually see it.

56
00:03:34,470 --> 00:03:38,430
But you have to take my word for it to go ahead and add this into your project.

57
00:03:38,580 --> 00:03:43,200
And coming up next, we're going to make the magic happen where we're going to set up that animation

58
00:03:43,200 --> 00:03:50,190
frame and that's going to give us the ability to move our player object around the screen according

59
00:03:50,190 --> 00:03:51,660
to whatever the key presses are.

60
00:03:51,990 --> 00:03:53,160
So this is a crucial part.

61
00:03:53,370 --> 00:03:54,420
Go ahead and Adderson.

62
00:03:54,540 --> 00:03:58,020
And coming up next, we're going to make things even more interesting.