1 00:00:01,220 --> 00:00:06,470 We have a button that we created in the last lesson and we can click it, but it doesn't do anything 2 00:00:06,470 --> 00:00:06,980 yet. 3 00:00:07,340 --> 00:00:12,410 So in this lesson, we're going to be adding in event listeners to treat some type of interaction and 4 00:00:12,410 --> 00:00:14,620 action with that button element. 5 00:00:15,020 --> 00:00:20,810 So going into our ED, we're going to select our game message area. 6 00:00:20,820 --> 00:00:25,960 And this is going to be that same element that we're clicking and add an event listener to it. 7 00:00:26,480 --> 00:00:31,300 So adding an event listener and the event listener that we're adding in is a click event listener. 8 00:00:31,700 --> 00:00:35,960 And when it clicks, then we want to invoke a function called start. 9 00:00:36,650 --> 00:00:39,860 We also want to have the same event listener to the start screen. 10 00:00:40,100 --> 00:00:44,360 And depending on how you've built out your application, you might not even need both of them. 11 00:00:44,480 --> 00:00:48,800 But for now, I'm going to keep them both in as we have developed it with the start screen. 12 00:00:48,890 --> 00:00:51,570 And then we've got our game message right after that. 13 00:00:51,890 --> 00:00:53,490 So one of them could be hidden. 14 00:00:53,510 --> 00:00:57,380 It all depends on how much messaging you need within your application. 15 00:00:57,680 --> 00:01:00,940 Also, let's add an event listener to the document object. 16 00:01:01,220 --> 00:01:08,960 So this is if the key gets clicked anywhere while the document is open, then we're going to invoke 17 00:01:08,960 --> 00:01:12,830 the key down function and we can just call this one press on. 18 00:01:13,130 --> 00:01:16,020 And we also going to add in another key function. 19 00:01:16,040 --> 00:01:17,690 So this is the key up function. 20 00:01:18,200 --> 00:01:22,300 And this one, we can have a function called press off. 21 00:01:22,820 --> 00:01:28,100 So what these are going to do is this is going to track the key presses that the players pressing. 22 00:01:28,100 --> 00:01:33,980 So when they're pressing the key down, then we're going to update our active object with that value 23 00:01:34,130 --> 00:01:38,480 and with a key up, we're going to remove that value from our active object. 24 00:01:39,080 --> 00:01:43,250 So now we need to create some functions now that we're referencing them within our code. 25 00:01:44,350 --> 00:01:46,640 We've got our basic start function. 26 00:01:47,410 --> 00:01:53,940 We also have our press on function and then we also have our press off function. 27 00:01:54,190 --> 00:01:59,410 And usually the way that I like to do it is I like to add in console messages just to make sure that 28 00:01:59,410 --> 00:02:02,790 everything is working properly or as expected. 29 00:02:04,090 --> 00:02:07,750 And this one can be on and that one can be off. 30 00:02:07,870 --> 00:02:09,580 Save that and try it out. 31 00:02:09,610 --> 00:02:12,580 So now when I press on here, I get a start. 32 00:02:12,970 --> 00:02:18,010 So it's what I want if I press a key on my keyboard and obviously you can't see that, but you have 33 00:02:18,010 --> 00:02:18,910 to take my word for it. 34 00:02:19,210 --> 00:02:21,120 I am pressing the spacebar. 35 00:02:21,550 --> 00:02:26,230 So while I'm holding it down, I'm invoking and firing off that on value. 36 00:02:26,450 --> 00:02:28,180 And when they let go, I get off. 37 00:02:28,630 --> 00:02:35,230 So now next we need to track which keys are being pressed and then ultimately create our interaction 38 00:02:35,230 --> 00:02:36,700 with the keys that are being pressed. 39 00:02:37,090 --> 00:02:44,410 But before we do that, when we cross the start button, we're going to take our game message element 40 00:02:44,590 --> 00:02:46,860 and update one of the classes. 41 00:02:46,870 --> 00:02:49,750 So using the class list method. 42 00:02:49,990 --> 00:02:56,650 And what this does is this allows us to update a class list on an element and we're going to use ADD, 43 00:02:56,770 --> 00:03:02,500 which, as the name implies, adds a method of height to it. 44 00:03:02,950 --> 00:03:07,280 And remember, what height is going to do is it's going to hide that element. 45 00:03:07,810 --> 00:03:15,700 So now when we press start, we press the start screen, we're going to be hiding that element. 46 00:03:15,820 --> 00:03:19,000 So we're hiding the game message element, which is already hidden. 47 00:03:19,600 --> 00:03:24,170 And we also need to hide the screen because remember, both of them are going to the same function. 48 00:03:24,760 --> 00:03:26,260 So let's add that in as well. 49 00:03:26,270 --> 00:03:27,850 So we want to hide both of those. 50 00:03:28,240 --> 00:03:32,320 And we know that one is already hidden, the game messages already hidden. 51 00:03:32,800 --> 00:03:38,380 But this is just in case when we have our restart of our game, we're going to have a content within 52 00:03:38,380 --> 00:03:39,040 the game message. 53 00:03:39,040 --> 00:03:40,640 So we need to make sure that it is hidden. 54 00:03:40,810 --> 00:03:41,530 So let's try it out. 55 00:03:41,650 --> 00:03:46,360 So refresh and we see the button disappears and that's exactly what we want to happen for. 56 00:03:46,360 --> 00:03:53,680 Now, go ahead and add in event listeners into your code and you'd be ready to move on to the next lesson. 57 00:03:53,940 --> 00:03:58,000 We're going to track the key presses and take actions accordingly. 58 00:03:58,670 --> 00:03:59,620 So that's coming up next.