1 00:00:00,700 --> 00:00:06,280 This is going to be a big lesson as we're going to be introducing request animation frame, so what 2 00:00:06,280 --> 00:00:12,880 request animation frame does is it's a method that tells the browser that you wish to perform an animation 3 00:00:13,090 --> 00:00:19,720 and request that browser to call a specified function to update the animation before the next repaint. 4 00:00:20,020 --> 00:00:27,160 So basically what it does is it presents a smooth way to transition and allows you to create really 5 00:00:27,160 --> 00:00:28,750 nice, smooth animations. 6 00:00:29,240 --> 00:00:32,260 They've got an example here automatically a developer network. 7 00:00:32,500 --> 00:00:34,180 So they've got start of NUL. 8 00:00:34,210 --> 00:00:35,550 They select the element. 9 00:00:35,950 --> 00:00:38,410 And so this is the element that they're going to move around. 10 00:00:38,770 --> 00:00:44,280 They create the request animation frame calling to the function step. 11 00:00:44,290 --> 00:00:46,120 So it's invoking the function step. 12 00:00:46,510 --> 00:00:54,580 That step function runs through and it's passing in a timestamp and that's checking to see if the timestamp 13 00:00:54,580 --> 00:00:56,860 is not there and. 14 00:00:58,290 --> 00:01:03,600 If it's not, then it's setting start to whatever the time stamp is, and then it's tracking the progress, 15 00:01:03,840 --> 00:01:11,040 transforming the element, and if the progress is less than 2000, then it's going to request the animation 16 00:01:11,040 --> 00:01:11,980 frame again. 17 00:01:12,270 --> 00:01:18,720 So essentially what it's going to do is it's going to loop through the step function two thousand times 18 00:01:18,720 --> 00:01:22,950 and then it's going to stop performing the step function because it's not going to be requesting that 19 00:01:22,950 --> 00:01:24,240 animation frame anymore. 20 00:01:24,480 --> 00:01:29,760 And that's the whole idea of the animation frame, is that you make the animation frame request and 21 00:01:29,760 --> 00:01:34,530 then within the function that you've requested the animation frame, then you continuously loop through 22 00:01:34,530 --> 00:01:37,720 and continuously play through the same animation. 23 00:01:38,220 --> 00:01:40,080 So we're going to create our function. 24 00:01:40,950 --> 00:01:47,730 And then within this function, we're going to call the same function and calling out the window request 25 00:01:47,730 --> 00:01:48,780 animation frame. 26 00:01:49,170 --> 00:01:54,600 And then within here, the only parameter that we need to provide is the name of the function that we're 27 00:01:54,600 --> 00:01:57,210 going to be looping through and to kick things off. 28 00:01:57,330 --> 00:02:00,690 We also are going to add that into the START function. 29 00:02:01,230 --> 00:02:06,720 So when the player comes in, they start the game and at the end of this it's going to build the whole 30 00:02:06,720 --> 00:02:11,730 game window game area and then it's going to run a function called play game. 31 00:02:11,880 --> 00:02:14,320 And then this is where all the magic is going to happen. 32 00:02:14,340 --> 00:02:16,110 So let's select our elements. 33 00:02:16,260 --> 00:02:18,870 And you actually won't see anything I can console. 34 00:02:18,870 --> 00:02:21,360 Log out a message here. 35 00:02:21,660 --> 00:02:26,730 And what's going to happen is this message is just going to continuously show while it's looping through. 36 00:02:26,980 --> 00:02:28,350 So look within the console. 37 00:02:28,350 --> 00:02:33,180 As soon as I press start, then play is just constantly looping through this. 38 00:02:33,390 --> 00:02:36,470 And this is what gives us the ability to do our animation. 39 00:02:36,870 --> 00:02:41,520 So I'm going I get rid of that console message because that one is going to run many, many times. 40 00:02:41,790 --> 00:02:43,640 Let's select our elements. 41 00:02:43,920 --> 00:02:47,570 So first of all, let's get our element, our bird. 42 00:02:47,970 --> 00:02:54,560 So using documents and query selector, we're going to select element with a class of bird. 43 00:02:54,960 --> 00:02:58,160 So this is going to be the one that we actually made up here. 44 00:02:58,350 --> 00:03:00,740 We also want to select our wing. 45 00:03:01,530 --> 00:03:08,570 So using the same format documents and query selector selecting the element with a class of wing. 46 00:03:08,910 --> 00:03:13,950 So that gives both of those elements within an object format and that means that we can make use of 47 00:03:13,950 --> 00:03:14,160 it. 48 00:03:14,160 --> 00:03:18,420 And then just before we close off, this is where we're going to create our animation. 49 00:03:18,450 --> 00:03:21,690 We're going to update the positioning of those elements. 50 00:03:22,110 --> 00:03:29,610 So selecting out our updating the bird style top position where we create a player object and we're 51 00:03:29,610 --> 00:03:36,420 going to track the position to player X and we'll also do or actually this should be player Y and we'll 52 00:03:36,420 --> 00:03:38,040 track the left position. 53 00:03:38,040 --> 00:03:41,220 So the horizontal on style left position. 54 00:03:41,370 --> 00:03:48,320 And as we start the game, we create a global object called player so we can add some content into here. 55 00:03:48,720 --> 00:03:56,730 So as we've built out that bird element, we take our player X and we're going to get the position of 56 00:03:56,730 --> 00:04:00,170 the bird object using offset left. 57 00:04:00,180 --> 00:04:02,400 So it's going to give us our horizontal position. 58 00:04:02,700 --> 00:04:11,340 So the left off of the main screen area and then Bird and Offset Top is going to give us a position 59 00:04:11,340 --> 00:04:12,070 off of the top. 60 00:04:12,090 --> 00:04:16,580 So what you can see here is a logout the player value. 61 00:04:16,590 --> 00:04:24,360 And as we refresh, you can see that I've got an X of 50 and a Y of 289, and that's going to be the 62 00:04:24,360 --> 00:04:28,790 position of where this particular element object is located. 63 00:04:28,980 --> 00:04:31,500 So it's matching with the player X and player Y. 64 00:04:31,680 --> 00:04:38,430 So I'll know all we have to do is update player X and player Y position as we loop through the animation. 65 00:04:38,610 --> 00:04:41,540 And this will also update where they're going to be located. 66 00:04:42,090 --> 00:04:46,560 So we've also created the Keys object and that's what we did earlier. 67 00:04:46,740 --> 00:04:51,810 And within Keys, we're actually tracking some information about the key presses. 68 00:04:52,050 --> 00:04:54,160 So we're getting different key values. 69 00:04:54,160 --> 00:05:00,510 So we're getting the arrow keys and we're getting up and down and all the different arrow functions 70 00:05:00,510 --> 00:05:00,960 we're getting. 71 00:05:00,960 --> 00:05:02,340 So that's being logged out here. 72 00:05:02,340 --> 00:05:04,260 And I know we're logging out quite a bit of stuff. 73 00:05:04,710 --> 00:05:08,340 So we've got arrow down, arrow right, arrow left and arrow up. 74 00:05:08,940 --> 00:05:18,510 So now we can check to see the value of keys and using arrow left increment, we can take player X and 75 00:05:18,510 --> 00:05:23,100 we can minus the value of player speed off of player X. 76 00:05:23,100 --> 00:05:27,150 So that will give us some movement and that's another value that we need to set. 77 00:05:27,660 --> 00:05:32,070 So right off the bat and trying to make it as dynamic as possible. 78 00:05:32,070 --> 00:05:34,380 So setting our player speed to two. 79 00:05:34,590 --> 00:05:37,290 So that's going to be how quickly the is going to be able to move. 80 00:05:37,290 --> 00:05:39,240 So we've got our arrow left. 81 00:05:39,480 --> 00:05:42,570 Also, we can do one four arrow right. 82 00:05:43,230 --> 00:05:49,500 And notice I'm just using if so, I'm not using or else if in case that there's multiple keys that are 83 00:05:49,500 --> 00:05:50,940 being pressed at the same time. 84 00:05:51,180 --> 00:05:56,730 So that will give us that kind of horizontal and vertical angled movement. 85 00:05:57,330 --> 00:05:57,570 So we. 86 00:05:57,650 --> 00:06:03,680 So have Arrow up and this is going to affect the vertical, so it's going to be player Y and if we're 87 00:06:03,680 --> 00:06:12,590 going up, then that means that we're subtracting off of Y, and if we're going down, that means that 88 00:06:12,590 --> 00:06:16,310 we're increasing on Y and the same thing is for right as well. 89 00:06:16,320 --> 00:06:17,220 So we're increasing. 90 00:06:17,420 --> 00:06:19,930 So now we are ready to try that out. 91 00:06:19,970 --> 00:06:24,290 So with the Arrow Keys I can effectively move my element around the page. 92 00:06:24,510 --> 00:06:30,230 So remember, I'm tracking that position as I'm creating the elements, I'm tracking it into player 93 00:06:30,230 --> 00:06:34,420 X and player Y, and then I'm also tracking the key presses. 94 00:06:34,690 --> 00:06:37,400 So that gives me the ability to move my character around. 95 00:06:37,580 --> 00:06:44,500 And we see that it's a nice, smooth animation and I can move multiple key presses at the same time. 96 00:06:44,720 --> 00:06:50,360 So go ahead and try this out and add this into your project so that you can move the character around. 97 00:06:50,570 --> 00:06:55,640 And we're going to update some of the functionality in the upcoming lessons where we're going to have 98 00:06:55,640 --> 00:06:57,830 the wings moving as well. 99 00:06:58,130 --> 00:07:06,080 And we can also introduce that this bird is automatically falling and you have to constantly press the 100 00:07:06,080 --> 00:07:08,130 spacebar to keep it moving up. 101 00:07:08,150 --> 00:07:09,200 So I'll introduce that. 102 00:07:09,200 --> 00:07:10,700 And that's coming up in the next lessons.