1
00:00:00,450 --> 00:00:01,420
Are you ready?

2
00:00:01,440 --> 00:00:08,610
Let's create some aliens going into our style area and they're going to create a style called alien

3
00:00:08,760 --> 00:00:13,400
and this is a class that we're going to be adding in to each of the aliens as we create them.

4
00:00:13,650 --> 00:00:20,670
So using position and this time we use position, relative setting the top position to zero.

5
00:00:20,910 --> 00:00:27,930
And these are going to be dynamically adjusted with JavaScript and then a width of 80 PEX.

6
00:00:29,380 --> 00:00:35,170
I usually like to set a few defaults before we adjust it with JavaScript and also maybe make it a little

7
00:00:35,170 --> 00:00:36,220
bit higher.

8
00:00:36,220 --> 00:00:45,700
So 50 pics, add some padding and of course, you can style these aliens as needed again to add in a

9
00:00:45,700 --> 00:00:47,620
box shadow as well for this.

10
00:00:48,460 --> 00:00:49,930
And we'll set a font size.

11
00:00:51,620 --> 00:00:56,230
So we can decorate the aliens with some text, text line some.

12
00:00:57,550 --> 00:01:03,800
And slightly rounded sites, so it's alien by default, so now we're ready to add them and create them.

13
00:01:03,850 --> 00:01:05,730
We're going to do this using JavaScript.

14
00:01:06,640 --> 00:01:12,940
So using JavaScript, we're going to create an element on the fly using the crit element method.

15
00:01:13,180 --> 00:01:19,480
And this gives us the ability to create elements or create a div and all console log that devotes so

16
00:01:19,480 --> 00:01:21,390
that we can see it as we're constructing it.

17
00:01:22,450 --> 00:01:25,000
So we go into alien, make sure we hit start.

18
00:01:25,180 --> 00:01:30,040
You can see that we're creating a bunch of divs here, but we don't have anything else happening.

19
00:01:30,040 --> 00:01:31,240
We're just creating a bunch of diffs.

20
00:01:31,720 --> 00:01:33,910
So let's add some content into the div.

21
00:01:36,370 --> 00:01:40,240
We're going to take the Divx and using Closs list.

22
00:01:41,640 --> 00:01:47,910
And and we'll add that class of alien that we just created to the diff, so that's going to make the

23
00:01:47,910 --> 00:01:52,410
alien have that class and you can see now the class of alien has been added.

24
00:01:54,040 --> 00:02:01,900
And we should also set those those values to the style properties, so taking the style value.

25
00:02:02,880 --> 00:02:11,400
Of with as we're sending in a value for temp with this, it's going to get adjusted dynamically and

26
00:02:11,400 --> 00:02:14,340
we need to always make sure that we add the picks there at the end.

27
00:02:15,240 --> 00:02:16,350
It won't it won't set.

28
00:02:16,350 --> 00:02:17,600
It was just a numeric value.

29
00:02:19,950 --> 00:02:26,730
And we want to also set an X and Y position, so for this element will have an X position.

30
00:02:28,730 --> 00:02:37,280
And this can be whatever the value of Rolex is that we're passing in and d'Hiv, why possession is going

31
00:02:37,280 --> 00:02:40,820
to be equal to whatever the value of real life is that we passed and.

32
00:02:43,530 --> 00:02:52,980
And let's use math flaw so we bring it down to its closest value, so use the math method in order to

33
00:02:52,980 --> 00:02:53,400
do that.

34
00:02:55,790 --> 00:03:04,010
So bring it down to its closest around rounded value than selecting the div, updating its style, and

35
00:03:04,010 --> 00:03:06,490
we're going to update the style left position.

36
00:03:07,640 --> 00:03:10,430
So using div x position.

37
00:03:12,310 --> 00:03:19,750
Plus pics, so that will set its left position and we also want to set its top position.

38
00:03:21,440 --> 00:03:29,270
So use the value of div y position for that, and I also wanted to add in one more object and this is

39
00:03:29,270 --> 00:03:34,090
going to be the direction moving and we'll set it to one.

40
00:03:34,400 --> 00:03:39,800
So that means that whenever they get to the end, I want them to go the other way and we're going to

41
00:03:39,800 --> 00:03:44,690
be able to accomplish that was just using the one variable where if we multiply it by negative one,

42
00:03:44,870 --> 00:03:49,040
that one will turn into a negative and then we can move it the other way.

43
00:03:49,250 --> 00:03:53,880
And then once we hit this wall that we want to turn it around and move them back the same way.

44
00:03:54,140 --> 00:03:57,300
So turning that back into one so positive value.

45
00:03:57,560 --> 00:04:03,350
And then lastly, we're going to take our container object and we're going to attend a child to it.

46
00:04:03,710 --> 00:04:07,130
And the child that we're adding in is the div that we just created.

47
00:04:07,280 --> 00:04:12,770
And there's a few adjustments on the calculations that we still need to make because we've got we're

48
00:04:12,770 --> 00:04:15,440
looking at the container with here.

49
00:04:15,440 --> 00:04:21,770
So maybe let's adjust this to be 100 and we're also going to take this temp with and move this around.

50
00:04:21,770 --> 00:04:26,060
So we get to move a few things around here just to make sure our calculations are correct.

51
00:04:26,210 --> 00:04:32,960
And we're using that same value instead of setting that position container dim left position.

52
00:04:33,590 --> 00:04:35,900
And that can be our default left position.

53
00:04:36,020 --> 00:04:39,530
And also, when we reset it, we need to update that one as well.

54
00:04:39,680 --> 00:04:46,130
And I'm also going to change Elian from going relative to absolute so that the other aliens that are

55
00:04:46,130 --> 00:04:48,980
added in aren't going to be affecting those elements.

56
00:04:49,010 --> 00:04:55,420
So updating relative to absolute and also update the display to be in line blocks already to try that.

57
00:04:55,430 --> 00:04:57,050
So refresh Head Start game.

58
00:04:57,200 --> 00:05:02,600
And we built out our aliens and notice that they're still positioning themselves to close together.

59
00:05:02,750 --> 00:05:07,520
So we need to make another tweak on the calculation of where the aliens are being positioned.

60
00:05:08,030 --> 00:05:15,170
So as we're building them, we're setting that roll value and that roll value actually has to be accounted

61
00:05:15,170 --> 00:05:18,320
for swoony to add another little bit into it.

62
00:05:18,320 --> 00:05:19,430
So plus 20.

63
00:05:19,430 --> 00:05:20,360
So try that now.

64
00:05:20,580 --> 00:05:25,850
So now that they're more stacked and their spacing between them and you can, of course, adjust this

65
00:05:25,850 --> 00:05:26,710
as needed.

66
00:05:26,900 --> 00:05:33,830
So if we adjust our alien width, so if we go 50, you can see that now we're aligning with five aliens

67
00:05:33,830 --> 00:05:37,160
on the same roll as we're not hitting that end part.

68
00:05:37,340 --> 00:05:41,720
But as soon as we hit that end part, then they go on to the next rosoff, which is 70.

69
00:05:41,900 --> 00:05:43,250
They're going to be a little bit wider.

70
00:05:43,430 --> 00:05:46,880
And as mentioned, they're going to be sitting on the left hand side.

71
00:05:47,060 --> 00:05:50,660
And the idea is that all of these aliens are going to be moving over to the right.

72
00:05:50,810 --> 00:05:55,040
And then once they hit the right, they go down a little bit and then they start heading back left.

73
00:05:55,190 --> 00:05:57,820
So we're going to create that all of that within the animation frame.

74
00:05:58,070 --> 00:06:05,060
So go ahead and add this into the project so that you can create elements on the fly and add in some

75
00:06:05,060 --> 00:06:06,230
styling to them as well.

76
00:06:06,440 --> 00:06:11,060
And coming up next, we'll make them look a little bit more interesting before we continue with the

77
00:06:11,060 --> 00:06:11,680
animation.

78
00:06:12,020 --> 00:06:13,280
So that's still all to come.