1
00:00:00,480 --> 00:00:07,110
We have our player who is able to move their ship by pressing the arrow keys on their keyboard, the

2
00:00:07,110 --> 00:00:10,410
next that we need to do is add in a challenge to this.

3
00:00:10,560 --> 00:00:14,340
And that's going to be setting up our bad guys are bad characters.

4
00:00:14,470 --> 00:00:20,460
Let's create a function we can call it set up bad guys, and then here we can specify how many we want

5
00:00:20,460 --> 00:00:23,250
to add to the screen at any given time.

6
00:00:23,640 --> 00:00:26,630
So let's add six and we do have a total of 10.

7
00:00:26,790 --> 00:00:31,920
So that means that there's still going to be four left that aren't going to be on screen setting up

8
00:00:31,920 --> 00:00:34,560
a function in order to handle the setup.

9
00:00:34,570 --> 00:00:42,450
We take the value of the number that we want to set up as a parameter, giving a variable name of NUM,

10
00:00:42,870 --> 00:00:50,220
then looping through X and create a for loop where X is less than NUM, and then we'll increment X by

11
00:00:50,220 --> 00:00:50,580
one.

12
00:00:50,970 --> 00:00:54,290
And this is where we're going to actually make the bad guy.

13
00:00:54,420 --> 00:01:00,000
And this gives us more flexibility, having it in two separate functions so that we can control how

14
00:01:00,000 --> 00:01:02,490
many we want to set up at any time.

15
00:01:02,490 --> 00:01:04,090
And that's how we can launch the function.

16
00:01:04,290 --> 00:01:09,870
So if we update this value, then this will loop through larger numbers or smaller numbers, and then

17
00:01:09,870 --> 00:01:13,230
the making of the bad guy is always going to be the same function.

18
00:01:13,440 --> 00:01:20,070
And we can also launch the making of the bad guy as we have more left and as we remove them from the

19
00:01:20,070 --> 00:01:21,850
screen, we can add in new ones.

20
00:01:22,020 --> 00:01:29,580
So again, there's that flexibility when we're creating it dynamically and the flexibility to keep all

21
00:01:29,580 --> 00:01:30,930
of the characters in play.

22
00:01:31,110 --> 00:01:37,470
So player and total bad, we want to make sure that this value is greater than zero.

23
00:01:38,100 --> 00:01:40,680
And if it is, then we are good to go.

24
00:01:40,680 --> 00:01:43,140
We are good to make our characters.

25
00:01:43,750 --> 00:01:46,400
So let's set up a temporary holder for that.

26
00:01:47,040 --> 00:01:52,830
And this is going to have our total bad value that's going to be contained within here because of course,

27
00:01:52,830 --> 00:01:53,940
this is going to be changing.

28
00:01:54,300 --> 00:01:59,280
And then we're taking our player total bad and we're subtracting one off of it.

29
00:01:59,310 --> 00:02:05,040
And we also want to update the score because again, remember, we are updating one of the values here.

30
00:02:05,310 --> 00:02:07,890
So we're decreasing the number of bad guys.

31
00:02:08,040 --> 00:02:11,220
So we want to update the number of enemies left here.

32
00:02:11,370 --> 00:02:12,570
Now let's create them.

33
00:02:12,750 --> 00:02:20,820
So setting up a variable in order to hold our object that we're creating using crit element, method

34
00:02:20,820 --> 00:02:26,010
and JavaScript, setting up and creating a div, I'll make this bigger and then we'll run through the

35
00:02:26,010 --> 00:02:26,460
code.

36
00:02:26,460 --> 00:02:33,180
In order to construct the element, we can update its inner HTML of the element that we just constructed.

37
00:02:33,300 --> 00:02:37,290
So giving it a value and then this value can be whatever the value of Tempest's.

38
00:02:37,890 --> 00:02:44,310
So that's why when we track the value of temp and then we subtract the total bad, we could also increase

39
00:02:44,310 --> 00:02:45,220
that if we wanted to.

40
00:02:45,240 --> 00:02:51,690
Let's also take that element and class list and we're going to add a class and we'll give it a class

41
00:02:51,690 --> 00:02:53,400
of body that we want to add.

42
00:02:54,480 --> 00:02:57,330
And we also need to set that class up as well.

43
00:02:57,360 --> 00:03:04,920
We want to also give it an X and Y position and using math floor and then math random, we're going

44
00:03:04,920 --> 00:03:12,780
to generate a random position and it's going to be determined by the bound container with.

45
00:03:12,930 --> 00:03:19,580
So it could be anywhere on our bound container and then we're going to subtract 100 off of that.

46
00:03:19,590 --> 00:03:21,320
And then the div y.

47
00:03:21,330 --> 00:03:28,010
So this y position, we can use math as well so that they're not always starting in the same Y position.

48
00:03:28,680 --> 00:03:34,230
And this one we could just multiply by five hundred and we're going to multiply it by negative one because

49
00:03:34,230 --> 00:03:35,850
we want this to be a negative value.

50
00:03:36,270 --> 00:03:41,910
So we don't we want it to appear the Y position off of screen and then we're going to have that character

51
00:03:41,910 --> 00:03:43,370
moving down on the screen.

52
00:03:43,410 --> 00:03:48,360
We can also set up any other variables at this point that we need to utilize.

53
00:03:49,040 --> 00:03:53,120
So we're setting up a speed so we can travel them all at different speeds.

54
00:03:53,370 --> 00:03:59,330
In this case, we're going to use math seeling than using our math random method.

55
00:03:59,340 --> 00:04:03,810
Again, let's multiply that by 10 and we'll add three to it.

56
00:04:03,810 --> 00:04:11,040
So it'll be traveling at least at three pixels for each iteration and then taking that elements.

57
00:04:11,220 --> 00:04:16,200
Let's add it to the main container object using append child.

58
00:04:16,200 --> 00:04:19,140
And that object that we are adding in is div.

59
00:04:19,320 --> 00:04:24,780
And then lastly, now that we've got it visible, we need to update its style properties.

60
00:04:25,020 --> 00:04:32,390
So setting its left value and we can use div x and also we need to update its top position.

61
00:04:33,000 --> 00:04:38,700
So this case we can use div y plus picks and then the div x in the div.

62
00:04:38,700 --> 00:04:43,560
Why are the values that we're going to be adjusting to create its animation and its movement.

63
00:04:43,740 --> 00:04:47,870
So let's also go up to our style and add some styling.

64
00:04:48,330 --> 00:04:50,370
So we created a class of body.

65
00:04:50,610 --> 00:04:57,660
So just as our main player object set its position to absolute so that we can move it around with the

66
00:04:57,660 --> 00:05:00,020
JavaScript and we can set a height.

67
00:05:00,330 --> 00:05:06,360
So this can be one hundred pics with 100 pics, and we could also adjust these dynamically as needed,

68
00:05:06,810 --> 00:05:09,600
also setting some default positions for it.

69
00:05:09,610 --> 00:05:12,160
So top and left background color.

70
00:05:12,210 --> 00:05:13,620
So make them all blue for now.

71
00:05:14,370 --> 00:05:18,570
And we can adjust this with JavaScript later on as well, adding in color.

72
00:05:18,600 --> 00:05:19,650
So set it as white.

73
00:05:19,660 --> 00:05:25,700
I usually like to use height because it allows me to center the content and then text align center.

74
00:05:25,950 --> 00:05:27,420
So I think we're ready to try that out.

75
00:05:27,450 --> 00:05:30,450
So let's go ahead and hit start.

76
00:05:30,750 --> 00:05:37,020
And you can see now they've all got added to the page and there's actually more than what we see on

77
00:05:37,020 --> 00:05:39,980
the screen because remember, some of them are completely off the screen.

78
00:05:40,320 --> 00:05:44,670
So we've essentially generated six of them on the screen right now.

79
00:05:44,850 --> 00:05:47,430
And then we're got still four that are hidden.

80
00:05:47,700 --> 00:05:51,870
So we're going to output these and we're going to start to move these in the animation frame.

81
00:05:52,110 --> 00:05:54,510
So we're going to do that in the upcoming lesson.

82
00:05:54,840 --> 00:06:00,240
And as you can see, all of the top positions are already set now within that container.

83
00:06:00,420 --> 00:06:06,360
And we might want to adjust this to be even a larger value of at least negative 200, because we want

84
00:06:06,360 --> 00:06:08,700
to make sure that they're completely off screen.

85
00:06:08,850 --> 00:06:14,760
And then this one over here that was left minus 72, we got to make sure that it's at least zero.

86
00:06:14,770 --> 00:06:18,060
So I'm not sure why it ended up being left minus 72.

87
00:06:18,330 --> 00:06:24,630
So let's take a quick look at our code and just make sure that things are proper where we're actually

88
00:06:24,630 --> 00:06:30,780
subtracting the one hundred off of the width and then let's add in another 50 into it.

89
00:06:30,810 --> 00:06:32,850
Or we can just add in a condition.

90
00:06:32,850 --> 00:06:40,800
If Div X is less than zero, then let's set div X to be 100.

91
00:06:41,070 --> 00:06:42,930
So that will take care of that problem.

92
00:06:43,260 --> 00:06:48,450
And then the other problem here is where we need to still add in another value into that.

93
00:06:49,210 --> 00:06:53,700
So let's wrap it with some brackets and then we'll subtract another two hundred.

94
00:06:54,040 --> 00:06:55,830
So I think we're ready to try that again.

95
00:06:55,890 --> 00:07:00,900
So let's make it big and we hit start and we don't see any of them, but they are on the page.

96
00:07:00,900 --> 00:07:06,060
When we go into the elements in the container, they're all located and it looks like the numbers turned

97
00:07:06,060 --> 00:07:06,900
out better this time.

98
00:07:06,930 --> 00:07:09,060
So next lesson, we're ready for the animation.