1 00:00:00,480 --> 00:00:05,220 Hey there, and this lesson, we are going to be making something happen, we're going to bring our 2 00:00:05,220 --> 00:00:11,970 application to life, introducing key events, soliciting for the key presses, and as well as moving 3 00:00:11,970 --> 00:00:15,350 the paddle from side to side, depending on what he is pressed. 4 00:00:15,630 --> 00:00:18,980 So first of that, we want to do is add a request animation frame. 5 00:00:19,200 --> 00:00:21,690 So what this does is this is a method. 6 00:00:21,690 --> 00:00:26,010 And when you call this method, it allows us to create a nice, smooth animation. 7 00:00:26,220 --> 00:00:27,630 There's a great example here. 8 00:00:27,630 --> 00:00:33,150 When we run this function, what's going to happen here is that it gets initiated. 9 00:00:33,150 --> 00:00:40,620 So the animation frame, step and step is the function that contains the animation sequence and it runs 10 00:00:40,620 --> 00:00:41,940 through this block of code. 11 00:00:41,940 --> 00:00:48,330 And if progress is less than 2000, then it requests animation frame step again and it will continuously 12 00:00:48,330 --> 00:00:51,270 do so until progress is 2000. 13 00:00:51,420 --> 00:00:54,790 And once progress is 2000, then it's going to stop the animation. 14 00:00:54,990 --> 00:01:00,080 So this particular example will translate and it'll move the element across the page. 15 00:01:00,780 --> 00:01:05,730 So how about we take this and we try it within our code so I can demonstrate it and then we'll apply 16 00:01:05,730 --> 00:01:09,630 the request animation to our code itself instead of elements. 17 00:01:09,630 --> 00:01:11,010 I'm just going to use the container. 18 00:01:11,190 --> 00:01:17,100 And what's going to happen now is that it's going to move our element across the screen. 19 00:01:17,320 --> 00:01:20,520 It's going to translate its translate X property. 20 00:01:20,700 --> 00:01:24,560 So that will create some movement to see we get our element moving. 21 00:01:24,570 --> 00:01:29,500 And then once progress is equal to 2000, then it's going to stop the animation. 22 00:01:29,640 --> 00:01:36,060 You can also output it into the console so you can see that progress is going to be continuously incrementing. 23 00:01:36,330 --> 00:01:40,200 And eventually, once it reaches 2000, then it's going to stop moving. 24 00:01:40,350 --> 00:01:41,630 So that's how that works. 25 00:01:41,640 --> 00:01:45,780 So I'm going to block this out, but I'll keep it within the code and you can read up more about it 26 00:01:45,780 --> 00:01:49,630 within the Mozilla developer network at the request animation page. 27 00:01:50,130 --> 00:01:53,220 So for now, what we're going to do is we're we create a brand new function. 28 00:01:53,220 --> 00:01:56,850 I call it update, and this is the function that we're going to run. 29 00:01:57,030 --> 00:02:03,090 And just as we start and we initiated the request animation frame step here, we're going to do the 30 00:02:03,090 --> 00:02:04,560 same thing with update. 31 00:02:04,890 --> 00:02:10,200 And what update is going to do is it's going to move our element and then within update itself, we're 32 00:02:10,200 --> 00:02:11,560 going to call back to update. 33 00:02:11,730 --> 00:02:13,710 So it's going to continuously run update. 34 00:02:13,720 --> 00:02:19,500 So it'll continuously move the element or do whatever animations or animation checks that we want to 35 00:02:19,500 --> 00:02:20,220 do to the element. 36 00:02:20,410 --> 00:02:26,850 And the reason that I set that up is because we want to set up a particular value within the portal 37 00:02:27,030 --> 00:02:29,270 where we're checking to see what keys are being pressed. 38 00:02:29,490 --> 00:02:32,340 So if left is press that we want to take the appropriate action. 39 00:02:32,490 --> 00:02:34,980 If right is press, we want to take the appropriate action. 40 00:02:35,160 --> 00:02:41,700 And if the up key or the up arrow is pressed, then we want to release the ball for the user to start 41 00:02:41,700 --> 00:02:42,270 the gameplay. 42 00:02:42,600 --> 00:02:46,050 So let's set up the key press event listeners. 43 00:02:46,200 --> 00:02:50,400 So add event listener and the listener that we're listening for is key down. 44 00:02:50,410 --> 00:02:57,000 So any cues that are pressed down, it's going to initiate this function or passing in the event object 45 00:02:57,000 --> 00:03:03,660 and we can console log that out so the E object and we're actually going to be listening for a key code. 46 00:03:03,810 --> 00:03:05,490 So output E for now. 47 00:03:05,610 --> 00:03:07,960 And I'll show you what we're actually listening for. 48 00:03:08,250 --> 00:03:14,580 So now whenever I press the arrow keys, you can see that I'm getting the keyboard event is firing and 49 00:03:14,610 --> 00:03:18,870 within the keyboard event object, you see all of this information is passed. 50 00:03:19,050 --> 00:03:23,790 So we know which he got pressed and we can see the key down as well. 51 00:03:23,790 --> 00:03:28,380 The key type and the one that we're actually going to be using is the key code. 52 00:03:28,620 --> 00:03:33,390 So that one is usually more accurate, but you can use any one of those because this is an object. 53 00:03:33,870 --> 00:03:40,050 So now whenever I press any of the keys, you can see that I'm tracking which key is being pressed. 54 00:03:40,050 --> 00:03:41,330 So that's on the key down. 55 00:03:41,820 --> 00:03:44,220 So I wanted to add in to the object. 56 00:03:44,360 --> 00:03:49,850 We're going to do a check to see if key code and those were the arrow keys. 57 00:03:49,860 --> 00:03:56,610 So the one that we're looking for and the arrow key for left is 37, right is thirty nine and up is 58 00:03:56,610 --> 00:03:57,210 thirty eight. 59 00:03:57,540 --> 00:04:00,810 So we're checking to see if the key code is thirty seven. 60 00:04:00,810 --> 00:04:06,540 And if it is then the panel object, we're going to attach a new value to it and we're going to take 61 00:04:06,540 --> 00:04:12,240 Padel left and we're going to set that to true and then do some other checks as well. 62 00:04:12,240 --> 00:04:14,220 So we've got the thirty seven. 63 00:04:15,060 --> 00:04:22,200 And 39 was the right arrow, was the right arrow or checking to see and if 39 is press, then Padel 64 00:04:22,200 --> 00:04:23,270 right is going to be true. 65 00:04:23,730 --> 00:04:30,060 And then within the request animation frame with an update, we're going to check to see the value of 66 00:04:30,060 --> 00:04:33,670 Padel left and Padel right, and we're going to take the appropriate action for it. 67 00:04:33,840 --> 00:04:36,150 So this will actually begin to move our padel. 68 00:04:36,450 --> 00:04:37,830 So having another condition. 69 00:04:37,860 --> 00:04:40,020 We're checking to see if Padel left. 70 00:04:40,980 --> 00:04:45,550 And if Padel is left, then that means that we want to move our current position. 71 00:04:45,720 --> 00:04:48,830 So let's first we'll get the current panel positioned. 72 00:04:49,440 --> 00:04:51,870 So this will be our current position. 73 00:04:51,870 --> 00:04:58,170 So Padel current position and we can use offset in order to get that. 74 00:04:58,440 --> 00:05:00,360 So we're using offset left. 75 00:05:00,780 --> 00:05:04,340 We'll we'll turn back the left position, our console like that out. 76 00:05:05,070 --> 00:05:11,070 So P current log it out into the console so that you can see whatever the current position is of the 77 00:05:11,070 --> 00:05:13,090 paddle as we're updating. 78 00:05:14,370 --> 00:05:22,380 So now whenever I press start, our current position is offset 223 and we want to move that. 79 00:05:22,620 --> 00:05:27,620 So we want to take our current and we want to and this is moving left. 80 00:05:27,750 --> 00:05:35,720 So we're subtracting five off of it and then taking Padel style and updating its left position. 81 00:05:36,000 --> 00:05:41,840 We can take whatever the value of P current is because it's changed and adding in picks to it. 82 00:05:43,080 --> 00:05:43,980 So see what happens. 83 00:05:44,010 --> 00:05:51,330 So now when I go and if I press, if I press start game, so that initiates the animation frame and 84 00:05:51,330 --> 00:05:53,040 now I can move the paddle to the left. 85 00:05:53,160 --> 00:05:55,620 And you see we don't have the key up. 86 00:05:55,920 --> 00:06:00,000 So that is important because otherwise we just keep going to the left. 87 00:06:00,000 --> 00:06:03,160 We have no way to stop this, to turn it to false. 88 00:06:03,570 --> 00:06:10,560 So what we want to do is turn it to false whenever the key is up and whatever key is triggering the 89 00:06:10,560 --> 00:06:11,120 key press. 90 00:06:11,460 --> 00:06:19,620 So once we released up on up, then this is going to turn to false on left and up on right is once it's 91 00:06:19,620 --> 00:06:22,170 released, then it's going to turn to false as well. 92 00:06:22,470 --> 00:06:28,170 So this will give us the ability to move it whenever the key is pressed and we can press both keys at 93 00:06:28,170 --> 00:06:28,860 the same time. 94 00:06:28,860 --> 00:06:33,180 It doesn't matter because it's tracking all of the key downs and all of the key ups. 95 00:06:33,190 --> 00:06:34,890 So that is all being tracked. 96 00:06:35,190 --> 00:06:41,760 So next to that we want to do is update the if panel is right and if it is right, then we want to move 97 00:06:41,760 --> 00:06:48,750 it the other way so that adding in rate instead of subtracting, we're going to add five to it and let's 98 00:06:48,870 --> 00:06:49,290 try that. 99 00:06:49,420 --> 00:06:51,720 So now I can go left and right on my panel. 100 00:06:52,110 --> 00:06:54,720 So there's a few other things that we need to add in to the start game. 101 00:06:54,720 --> 00:06:56,610 But I did want to get some action happening. 102 00:06:56,790 --> 00:06:58,740 So go ahead and add this into your project. 103 00:06:58,920 --> 00:07:01,740 So this should give you the ability with the animation frame. 104 00:07:01,750 --> 00:07:08,310 So this is on a continuous loop and constantly looping to this block of code and this block of code 105 00:07:08,310 --> 00:07:11,790 is checking to see whatever the value of Padel is. 106 00:07:11,820 --> 00:07:13,020 So these are boolean values. 107 00:07:13,230 --> 00:07:18,270 So that way we know that if the key has been pressed down, then it's always going to be true. 108 00:07:18,450 --> 00:07:25,140 And once the key is released, then they go to false as a boolean value and then it will no longer update 109 00:07:25,140 --> 00:07:27,870 the current position of that element. 110 00:07:28,770 --> 00:07:29,700 So go ahead, try this. 111 00:07:29,910 --> 00:07:33,840 Add into your code and get your paddle moving with the arrow keys. 112 00:07:33,990 --> 00:07:38,460 And coming up next, we've got some fixes that we need to do to the start game because obviously we 113 00:07:38,460 --> 00:07:39,600 want to get rid of the start game. 114 00:07:39,600 --> 00:07:40,890 We want to build our game board. 115 00:07:40,890 --> 00:07:41,850 We want to show the ball. 116 00:07:42,030 --> 00:07:44,660 So there's a bunch of stuff that we need to do to start the game. 117 00:07:44,670 --> 00:07:46,560 So that is all still yet to come.