1 00:00:00,090 --> 00:00:06,840 Welcome back in in this lesson, we're going to be introducing animation so far we've got a game where 2 00:00:06,840 --> 00:00:12,360 we've got some limited interaction and when we click the dynamically created element, we can change 3 00:00:12,360 --> 00:00:13,320 its color. 4 00:00:13,560 --> 00:00:16,740 But it's not very interesting because it's always in the same spot. 5 00:00:16,860 --> 00:00:19,820 It's not moving around, not doing anything too exciting. 6 00:00:19,830 --> 00:00:21,660 So let's make this more interesting. 7 00:00:21,670 --> 00:00:24,950 And, of course, animation makes everything interesting. 8 00:00:25,200 --> 00:00:30,600 So selecting our window object, we're going to add a request animation frame. 9 00:00:30,600 --> 00:00:37,100 And this is the ideal solution for creating a loop of constantly invoked functions. 10 00:00:37,380 --> 00:00:41,940 So creating a function, we're going to create a function called move, and this is where it's going 11 00:00:41,940 --> 00:00:43,620 to handle all of our animation. 12 00:00:43,860 --> 00:00:49,410 And this one here is going to be the initial one that's going to kick off our animation frame. 13 00:00:49,650 --> 00:00:54,760 So creating a function, having it called move, this is where all the magic is going to happen. 14 00:00:54,840 --> 00:01:01,650 So let's set up some random speed that we can add in using math random. 15 00:01:01,650 --> 00:01:07,440 And I know when I say random always mean that we're looking at JavaScript to create some random values 16 00:01:07,680 --> 00:01:09,720 so we can do 10 plus 15. 17 00:01:09,900 --> 00:01:16,860 So it's always going to be a minimum of at least 15 and it could be all the way up to 25 or it could 18 00:01:16,860 --> 00:01:17,850 stay at 15. 19 00:01:17,860 --> 00:01:21,000 So it's always going to move at at least the speed of 15. 20 00:01:21,090 --> 00:01:24,600 Next, we need to select our element that we want to move around. 21 00:01:24,840 --> 00:01:27,600 And this is the one that we gave it a class of box. 22 00:01:27,840 --> 00:01:30,840 We could as well pass it into the move object. 23 00:01:30,840 --> 00:01:38,790 But an easier way and more efficient way is to select our box element and using document because now 24 00:01:38,790 --> 00:01:41,040 it's available within the document object. 25 00:01:41,280 --> 00:01:43,550 We can use query selector. 26 00:01:43,680 --> 00:01:48,780 So that's my favorite methods to use, selecting the element with a class of box. 27 00:01:48,990 --> 00:01:51,200 So that's going to bring us within this function. 28 00:01:51,420 --> 00:01:54,980 So allow us to utilize that element within this function. 29 00:01:54,990 --> 00:01:56,310 So that's the box element. 30 00:01:56,310 --> 00:01:59,550 This is the one that we created dynamically in the previous lesson. 31 00:01:59,580 --> 00:02:06,060 We can get its boundaries as well so we can get bounds of it, creating a variable for that. 32 00:02:06,300 --> 00:02:09,810 And this is the boundaries of the output area. 33 00:02:09,820 --> 00:02:16,110 So we know what our parameters are, where we can move the box to, because we do want it to stay within 34 00:02:16,110 --> 00:02:20,730 that output object and for now, a console log outbound. 35 00:02:20,770 --> 00:02:27,900 So these are the boundaries for our box where we're going to move it around to see that with get bounding 36 00:02:27,900 --> 00:02:29,130 client rectangle. 37 00:02:29,280 --> 00:02:34,950 We get a lot of really good information and this is the information that's contained within this output 38 00:02:34,950 --> 00:02:35,490 object. 39 00:02:35,820 --> 00:02:41,820 So we've got a bottom, we've got a height left, right, top width, x and Y position. 40 00:02:41,970 --> 00:02:45,600 So exposition is eight, Y is 24. 41 00:02:45,750 --> 00:02:48,840 And we know that we want to keep our parameters in here. 42 00:02:49,080 --> 00:02:54,210 And this is really good, especially if we're moving things around that we have these values to work 43 00:02:54,210 --> 00:02:58,110 with because we don't want to move it off of screen or off of the visible area. 44 00:02:58,560 --> 00:03:05,100 And keeping this in mind as well, there's all other ways to calculate this, but this is one of the 45 00:03:05,100 --> 00:03:10,260 easiest ways by doing the get bound and client rectangle so we don't have to add in that's left position 46 00:03:10,260 --> 00:03:12,450 and then add the width to get the right position. 47 00:03:12,630 --> 00:03:14,670 We have that all within that one object. 48 00:03:14,820 --> 00:03:19,080 So next thing that we want to do is we want to set a series of steps. 49 00:03:19,090 --> 00:03:24,130 So when it's moving around, we want it to move within one direction or the other other other. 50 00:03:24,160 --> 00:03:26,820 It's going to be very zigzaggy and jaggery. 51 00:03:27,000 --> 00:03:33,230 So creating another object as we created that element and we're going to give this one a name of steps. 52 00:03:33,780 --> 00:03:38,460 This can also utilize random multiplying it by a value of twenty. 53 00:03:38,730 --> 00:03:42,600 So it will take twenty steps in either direction on a random basis. 54 00:03:42,610 --> 00:03:49,050 So next we can take that element object and we can take that steps value and decrease that by one. 55 00:03:49,140 --> 00:03:54,450 And next check to see if steps is less than zero. 56 00:03:54,450 --> 00:03:59,370 And if it is that we're going to reset the number of steps and this is going to also account for the 57 00:03:59,370 --> 00:04:00,020 directions. 58 00:04:00,040 --> 00:04:08,700 We're going to set a default direction for the element using math floor and then math random because 59 00:04:08,700 --> 00:04:13,200 we want to have a random number of random direction and there's four possible directions. 60 00:04:13,210 --> 00:04:18,180 So anywhere from zero to three is what we want to return back here. 61 00:04:18,540 --> 00:04:21,230 So our direction is going to change. 62 00:04:21,240 --> 00:04:27,240 So taking that element direction and we also need to change that whenever our box hits zero. 63 00:04:27,240 --> 00:04:33,380 So we need to have that same two values here as we do whenever the box sets zero, whenever we want, 64 00:04:33,380 --> 00:04:36,330 change directions and reset the number of steps. 65 00:04:36,360 --> 00:04:39,840 So this is giving us a random direction that we can move the box in. 66 00:04:40,500 --> 00:04:45,930 So for now, we can consider log out that information so we can do box direction. 67 00:04:46,140 --> 00:04:51,960 And as we refresh one of the things that we do need to add in, if we want to complete our animation, 68 00:04:52,110 --> 00:04:54,420 we have to call our animation frame again. 69 00:04:54,420 --> 00:04:58,430 So make sure that we add that in and this is going to be done at the end of the animation. 70 00:04:58,680 --> 00:04:59,850 So basically this function. 71 00:04:59,930 --> 00:05:05,420 Is going to call itself and it's going to continue to loop and animate the movement, so you can see 72 00:05:05,420 --> 00:05:09,350 here that we're constantly counting down and we're getting a direction. 73 00:05:09,350 --> 00:05:12,170 The direction is staying for a number of steps. 74 00:05:12,380 --> 00:05:16,160 And that's actually what we want because we want it to move in one direction or the other. 75 00:05:16,190 --> 00:05:19,220 We don't want it to be all zigzaggy and jaggery. 76 00:05:19,520 --> 00:05:25,370 So adding in that direction, the next thing that we could do is we can check to see what the direction 77 00:05:25,370 --> 00:05:27,460 is and what direction we're supposed to be going. 78 00:05:27,770 --> 00:05:30,740 So taking our direction, element, object. 79 00:05:31,010 --> 00:05:36,530 So taking direction, just refresh this and I'm not going to get rid of this one because we don't need 80 00:05:36,530 --> 00:05:39,380 to constantly see this direction because a little bit distracting. 81 00:05:39,380 --> 00:05:42,260 They're running in the console, the box direction. 82 00:05:42,590 --> 00:05:47,750 We're checking to see if the direction is zero and we can apply any direction to this. 83 00:05:47,930 --> 00:05:54,200 And also we're going to check to see if box X position is less then. 84 00:05:54,710 --> 00:05:58,400 And we've got our bounce that we set that bounce object. 85 00:05:58,580 --> 00:05:59,990 So this is the boundary object. 86 00:06:00,320 --> 00:06:08,000 So we're checking to see if Box X is less than the bounce right position minus one hundred. 87 00:06:08,000 --> 00:06:15,080 And if it is, then that means that we can increment the box X value by whatever speed is. 88 00:06:15,080 --> 00:06:16,960 So we're going to add speed value. 89 00:06:17,150 --> 00:06:19,610 So we're not going to see a whole lot happening quite yet. 90 00:06:19,880 --> 00:06:27,140 And the interesting thing is when we update its style position and we're going to set our top style 91 00:06:27,440 --> 00:06:37,340 to be equal to our box y plus picks and the picks is really important and also correspondingly so we 92 00:06:37,340 --> 00:06:38,630 can move the horizontal. 93 00:06:38,780 --> 00:06:42,620 And all this is resetting is the style position of that element. 94 00:06:43,190 --> 00:06:45,440 And that's how we're getting the animation and movement. 95 00:06:45,590 --> 00:06:50,600 So see that it is moving and it's only moving to the right so far and it's hitting the boundary and 96 00:06:50,600 --> 00:06:51,680 it's not moving any further. 97 00:06:51,800 --> 00:06:54,820 So let's add in the ability to move in the other direction. 98 00:06:55,070 --> 00:07:03,200 So adding in if the balance if the direction is one, we're going to check to make sure that balance 99 00:07:03,200 --> 00:07:07,970 is larger or that X is larger than balance left. 100 00:07:07,980 --> 00:07:11,110 And if it is, then we can subtract the speed. 101 00:07:11,360 --> 00:07:13,250 So this will get us to move left. 102 00:07:13,580 --> 00:07:14,510 Let us to move right. 103 00:07:14,510 --> 00:07:16,370 And two more directions to go. 104 00:07:16,400 --> 00:07:22,340 So next, let's check to see if our direction is to and if direction is too. 105 00:07:22,430 --> 00:07:26,300 And as long as we're accounting for all the direction, that doesn't matter which one you use as zero 106 00:07:26,300 --> 00:07:28,400 one, two, three, it doesn't really matter. 107 00:07:28,790 --> 00:07:31,040 There all have equal chance of being displayed. 108 00:07:31,310 --> 00:07:38,900 So checking to see our box y position and we're checking to see if box y and this one is another one 109 00:07:38,900 --> 00:07:45,020 where we have to formulate the bounds value and we're using a bottom and bottom, just like. 110 00:07:45,020 --> 00:07:45,500 Right. 111 00:07:45,500 --> 00:07:53,450 Should have a subtraction of 100 which will give us the ability to move it down to just above the visible 112 00:07:53,450 --> 00:07:53,890 area. 113 00:07:54,230 --> 00:07:56,960 And this is going to be Y plus. 114 00:07:57,140 --> 00:07:59,870 So it's not minus because we're moving it down. 115 00:08:00,030 --> 00:08:01,940 So now our element will move down. 116 00:08:02,090 --> 00:08:06,230 It'll get stuck there at the bottom because we don't have the ability to move up quite yet. 117 00:08:06,230 --> 00:08:08,450 And that's the last one that we need to include. 118 00:08:08,930 --> 00:08:12,200 So the last direction is the moving of up. 119 00:08:12,620 --> 00:08:19,370 And this one just like moving left, we just have to make sure that bounce Y is greater than the bounce 120 00:08:19,370 --> 00:08:19,790 top. 121 00:08:20,000 --> 00:08:23,090 And if it is, then we can keep subtracting off of it. 122 00:08:23,100 --> 00:08:28,430 So now we've got our element and it's moving around rapidly on the page. 123 00:08:28,580 --> 00:08:32,750 And the objective really is to kind of click it and try to catch it, click it. 124 00:08:33,080 --> 00:08:39,200 And once you do, then we can update and change the color so we can also introduce one more variable 125 00:08:39,200 --> 00:08:41,300 into there so we can have something like score. 126 00:08:41,600 --> 00:08:47,120 And I'll show you how to do that in the upcoming lesson where we've got an X and Y and a score and we're 127 00:08:47,120 --> 00:08:51,250 increased score every time we click the element still to come. 128 00:08:51,440 --> 00:08:57,890 So go ahead and add in the ability to move your element around the one that we created that box element 129 00:08:58,130 --> 00:09:01,610 and make sure that stays within the boundaries of its parent. 130 00:09:01,910 --> 00:09:04,580 And you're ready to go to move on to the next lesson.