1
00:00:00,150 --> 00:00:00,780
Welcome back.

2
00:00:00,780 --> 00:00:05,220
In this lesson, we're going to animate the aliens, we created some nice looking aliens in the last

3
00:00:05,220 --> 00:00:07,260
lesson and they're just sitting there.

4
00:00:07,500 --> 00:00:13,070
So we want to make them move and we can do that within that same animation function that we have with

5
00:00:13,070 --> 00:00:19,380
this, the update function and going through and just checking to see what their position is so we can

6
00:00:19,380 --> 00:00:25,060
add them right in the beginning of this function, creating a temp aliens node list.

7
00:00:25,200 --> 00:00:27,630
So this is going to be a variable object.

8
00:00:27,640 --> 00:00:35,190
So using document and query selector all, we're going to select all the elements on the page that have

9
00:00:35,190 --> 00:00:36,820
a class of alien.

10
00:00:36,840 --> 00:00:41,340
So this is the one that we just set and these are going to apply to all the ones that we've dynamically

11
00:00:41,340 --> 00:00:41,940
generated.

12
00:00:42,240 --> 00:00:47,250
And then you can see if I log out temp aliens, you're going to see that we're going to get a lot of

13
00:00:47,250 --> 00:00:51,420
stuff logged out, but we get the whole node list of all the aliens that we have available.

14
00:00:51,790 --> 00:00:58,380
So that means that we can loop through this list of aliens and apply our animation to them.

15
00:00:58,680 --> 00:01:03,870
And the way that we want to do this is we want to actually start with the last alien, because that's

16
00:01:03,870 --> 00:01:06,090
going to be the first one that's going to reach the end.

17
00:01:06,240 --> 00:01:09,110
And it's also going to be the one that's the lowest down.

18
00:01:09,330 --> 00:01:14,160
So we want to make sure that the way that they're moving, when they get to the right hand side, we're

19
00:01:14,160 --> 00:01:18,660
looking at the last one, and that's the one that we're applying the first movement to.

20
00:01:18,870 --> 00:01:27,090
So doing that, we can loop through this node list and creating a variable of X and this instead of

21
00:01:27,300 --> 00:01:30,740
being zero because we want to go backwards.

22
00:01:31,080 --> 00:01:33,280
So we're taking aliens length.

23
00:01:33,280 --> 00:01:34,140
That's a node list.

24
00:01:34,140 --> 00:01:38,520
So it does have a length property and we're just subtracting one off of it.

25
00:01:38,730 --> 00:01:47,010
And then we're taking the value of X and we're making sure while X is larger than minus one and X is

26
00:01:47,010 --> 00:01:48,900
going to be subtracting one.

27
00:01:49,120 --> 00:01:54,870
So that's going to be able to break out of the loop and then taking a variable, we can set up a variable

28
00:01:54,870 --> 00:02:02,490
called El and this is going to be the temp aliens selecting the temp alien item from the array list.

29
00:02:02,770 --> 00:02:04,890
So it's that node list that we created up here.

30
00:02:05,520 --> 00:02:11,880
And there were a few variables that we did set when we were creating them, and that was the X the Y

31
00:02:11,880 --> 00:02:14,390
position as well as the direction move.

32
00:02:14,660 --> 00:02:18,090
So those were the three key ones that we need to take a look at.

33
00:02:18,300 --> 00:02:20,970
And then we're also updating the aliens accordingly.

34
00:02:20,980 --> 00:02:23,390
So roughly around the same thing is happening here.

35
00:02:23,550 --> 00:02:31,920
So we're going to update before we finish the loop, we need to update their top and their left positions

36
00:02:32,220 --> 00:02:37,140
with whatever the values of that element X and Y positions are.

37
00:02:37,380 --> 00:02:40,260
And then also the direction moving position.

38
00:02:40,260 --> 00:02:45,500
We have to look at that as well, because that might need to be adjusted if we've hit that end.

39
00:02:45,720 --> 00:02:48,060
And so these aren't going to be the exact positions.

40
00:02:48,210 --> 00:02:53,860
And I can update these to be El position and then El and so on.

41
00:02:53,880 --> 00:02:59,010
So this will give us the ability to move them because instead of the diff, we're referring to the element.

42
00:02:59,290 --> 00:03:03,750
So it's going to give us the same values that we set when we were constructing the alien.

43
00:03:04,840 --> 00:03:13,540
So next thing we need to do is we need to check to see if the alien has moved off of the offset position

44
00:03:13,540 --> 00:03:15,010
of the container.

45
00:03:15,790 --> 00:03:17,380
So it's right that conditions.

46
00:03:17,380 --> 00:03:20,250
So we've got our L x position.

47
00:03:21,070 --> 00:03:28,620
So this is where the alien X position is located and we're checking to see if X has gone off screen.

48
00:03:28,630 --> 00:03:32,660
So if it's gone outside of the container demn width area.

49
00:03:32,950 --> 00:03:34,710
So that means that he's gone too far.

50
00:03:34,870 --> 00:03:42,450
But we also have to take into account the offset width of the element as well.

51
00:03:42,730 --> 00:03:50,380
So are subtracting getting this position on the far right, which is the container dim width, and then

52
00:03:50,380 --> 00:03:57,010
we're subtracting the alien offset width to that to get the position whenever the alien is about to

53
00:03:57,010 --> 00:03:58,050
hit the right hand side.

54
00:03:58,240 --> 00:04:04,990
And there's also one other conditions for checking to see if that is true or we're checking to see if

55
00:04:04,990 --> 00:04:12,520
El Exposition is less than zero and this is actually container demn left.

56
00:04:12,700 --> 00:04:18,010
And if that's true, then what we need to do is we're going to change direction.

57
00:04:18,220 --> 00:04:24,970
So we're multiplying this by negative one and when you multiply one by negative one, you end up with

58
00:04:24,970 --> 00:04:25,780
negative one.

59
00:04:25,930 --> 00:04:29,410
But if you multiply negative one by negative one, you end up with a one.

60
00:04:29,650 --> 00:04:34,930
So this gives us the ability to kind of flip back and forth between that value, the negative one and

61
00:04:34,930 --> 00:04:35,370
the one.

62
00:04:35,560 --> 00:04:38,220
So this will allow us to account for direction.

63
00:04:38,830 --> 00:04:44,100
We're also going to update the Y position as we want the aliens to move down.

64
00:04:44,950 --> 00:04:46,920
So we're increment it by 40.

65
00:04:47,770 --> 00:04:52,090
So this gives us our direction movement and the next thing that we need to do.

66
00:04:52,090 --> 00:04:57,160
So we don't need to set the Y position because we're setting it over here and we just need to account

67
00:04:57,160 --> 00:05:06,850
for the player alien speed and we're going to multiply this by el direction move as we're setting this.

68
00:05:06,850 --> 00:05:10,810
And this will give us whichever direction if we're moving left or right.

69
00:05:11,030 --> 00:05:12,960
So we're just going to increment the position.

70
00:05:14,140 --> 00:05:15,850
So let's try that and see what happens.

71
00:05:15,880 --> 00:05:17,350
So now we've got a bunch of aliens.

72
00:05:17,350 --> 00:05:18,340
So they're moving.

73
00:05:18,790 --> 00:05:24,220
And we initially we had an area there where they just seem to drop off because we didn't give an opportunity

74
00:05:24,220 --> 00:05:26,320
to move directions.

75
00:05:26,470 --> 00:05:29,650
So we're actually starting them off too far over.

76
00:05:30,190 --> 00:05:33,010
So let's subtract something off of that left position.

77
00:05:33,640 --> 00:05:36,090
So they're going a little bit too far off to the left.

78
00:05:36,310 --> 00:05:38,350
So that means that we're positioning them.

79
00:05:38,350 --> 00:05:42,430
Their original position, their start position isn't a good start position.

80
00:05:42,670 --> 00:05:44,830
So we need to make an adjustment on that.

81
00:05:45,040 --> 00:05:50,140
And that's when we were constructing the aliens that we were setting the Y position.

82
00:05:50,470 --> 00:05:54,490
So maybe let's add a little bit to that position so we'll add 50 to it.

83
00:05:54,700 --> 00:05:57,610
So we're not going to have these aliens dropping off.

84
00:05:57,880 --> 00:06:01,590
So we'll add 50 and we need also add the 50 down here.

85
00:06:01,630 --> 00:06:03,250
So let's see what happens.

86
00:06:03,490 --> 00:06:05,710
So now it looks like they're moving properly.

87
00:06:06,040 --> 00:06:11,830
And coming up next is where we have to do collision detection and a few other tweaks and adjustments

88
00:06:11,830 --> 00:06:12,430
to the game.

89
00:06:12,730 --> 00:06:16,510
The other thing, too, we don't want the aliens running off of the screen at the bottom.

90
00:06:16,660 --> 00:06:19,650
So that basically means that the player lost the game.

91
00:06:19,810 --> 00:06:21,090
So we have to account for that.

92
00:06:21,550 --> 00:06:25,270
So all of that in the tweaks, adjustments are coming up in the upcoming lesson.