1 00:00:00,150 --> 00:00:06,330 Are you ready for some action in this lesson, the last lesson we created, the bad guys or the other 2 00:00:06,330 --> 00:00:11,100 objects that the player needs to capture as he as they play the game? 3 00:00:11,370 --> 00:00:16,560 And now we need to create some animation because even though they are created, we don't see them on 4 00:00:16,560 --> 00:00:19,230 the screen and there isn't a whole lot happening. 5 00:00:19,500 --> 00:00:24,020 And everything that happens in the game happens within a game function. 6 00:00:24,180 --> 00:00:26,730 So this is where all of the action takes place. 7 00:00:27,000 --> 00:00:30,110 So we're going to select all of the elements, all of the bad guys. 8 00:00:30,690 --> 00:00:38,520 So using a variable, we can call it temp enemy and then documents Querrey selector, all because we 9 00:00:38,520 --> 00:00:42,740 want to select all the elements that have a class of Bady. 10 00:00:43,530 --> 00:00:45,600 So that's the class that we set up to them. 11 00:00:45,930 --> 00:00:50,130 So what this is going to do is this is going to create node list. 12 00:00:50,910 --> 00:00:53,310 So I would put that into the console. 13 00:00:53,310 --> 00:00:55,200 You're going to see that it hits start. 14 00:00:55,620 --> 00:00:58,230 It's creating a node list of all of those elements. 15 00:00:58,440 --> 00:01:01,290 And even though we can't see them, we can select them. 16 00:01:01,290 --> 00:01:03,240 So they're all up in the page. 17 00:01:03,390 --> 00:01:09,380 And the next thing that we want to do is we want to move them and move them down through the screen. 18 00:01:09,990 --> 00:01:11,970 So we need to create that type of action. 19 00:01:12,660 --> 00:01:16,660 So we're going to check to see if temp enemy length. 20 00:01:16,890 --> 00:01:23,790 So just make sure that there are some on the screen is equal to if it is equal to zero, then this is 21 00:01:23,790 --> 00:01:27,750 where we need to end game and we'll handle that later on. 22 00:01:27,750 --> 00:01:29,280 And that one of the upcoming lessons. 23 00:01:29,310 --> 00:01:33,670 So now if the game isn't over, that we need to move that element. 24 00:01:34,320 --> 00:01:36,630 So what we want to do is loop through. 25 00:01:36,630 --> 00:01:38,760 So let's do a simple loop and looping. 26 00:01:38,760 --> 00:01:47,520 While AI is less than temp enemy length because a node list, it works similar to an array where we've 27 00:01:47,520 --> 00:01:50,760 got lengths involved in it and that's create a function. 28 00:01:50,760 --> 00:01:56,100 In order to move that element, we can pass in the element information. 29 00:01:56,280 --> 00:02:02,010 So temp aname AI is going to represent that element information from the node list. 30 00:02:02,190 --> 00:02:07,500 So we're passing that in each time and to create a function in order to handle it. 31 00:02:07,500 --> 00:02:10,640 And we break this apart so that we get more flexibility. 32 00:02:11,100 --> 00:02:16,260 So the object coming in is just going to represent the element and we can now put in the console. 33 00:02:16,380 --> 00:02:19,980 And what this is going to do is going to put it output a ton of stuff into the console. 34 00:02:20,250 --> 00:02:23,900 So you can see it's outputting all of those element lists separately. 35 00:02:24,540 --> 00:02:25,440 So that's what we want. 36 00:02:25,440 --> 00:02:32,220 And now that we've got the element in here, we can move it so we can output its Y position. 37 00:02:32,220 --> 00:02:34,140 Because remember, we did set a Y position. 38 00:02:34,560 --> 00:02:43,440 So take the E y so that element y position and we're going to add to it whatever the element speed is. 39 00:02:43,990 --> 00:02:49,550 And the next thing that we want to do is we want to update the element style top. 40 00:02:49,560 --> 00:02:55,050 So just as we did with the other ones that we're moving, we're going to take the E y and we're going 41 00:02:55,050 --> 00:02:56,600 to update its PIC's value. 42 00:02:56,730 --> 00:02:57,870 So let's try that. 43 00:02:57,870 --> 00:03:02,220 And you can see now they're falling, but they keep continuously falling. 44 00:03:02,460 --> 00:03:05,280 So we need to have them stop at a certain point. 45 00:03:05,610 --> 00:03:11,310 So whenever they go off the screen, then what we want to do is reset them back to the top. 46 00:03:11,320 --> 00:03:12,110 So let's do that. 47 00:03:12,330 --> 00:03:18,900 So adding in a condition, we're taking the value of E y and if we're checking to see if it's larger 48 00:03:18,900 --> 00:03:27,570 than bound container height and if it is, that means that we've gone off screen and we need to reset 49 00:03:27,570 --> 00:03:31,720 the value of E y and we can set it to negative one hundred. 50 00:03:32,040 --> 00:03:38,010 So now what's going to happen is that as they fall off the screen, they're going to come back up to 51 00:03:38,010 --> 00:03:38,580 the top. 52 00:03:38,580 --> 00:03:40,800 And that's the effect essentially that we want. 53 00:03:40,980 --> 00:03:43,530 And we should also subtract off of here. 54 00:03:43,560 --> 00:03:46,680 So now they're falling because we weren't accounting for their height. 55 00:03:46,920 --> 00:03:50,400 So once you add in their height, you can see now they're falling. 56 00:03:50,400 --> 00:03:58,320 And next we need to do collision detection to check to see if the player is actually on top of them 57 00:03:58,320 --> 00:03:59,910 and if there's a collision. 58 00:04:00,030 --> 00:04:04,050 And if there is, then we're going to remove them from the screen and we're going to add another one. 59 00:04:04,050 --> 00:04:08,820 We're going to update the player score so that they can have an option to capture all of the elements 60 00:04:08,820 --> 00:04:09,590 that are on the screen. 61 00:04:09,750 --> 00:04:11,770 So that's still to come in the next lesson. 62 00:04:12,090 --> 00:04:18,270 So for this lesson, go ahead and add in the movement into your objects that we created in the last 63 00:04:18,270 --> 00:04:18,660 lesson.