1
00:00:01,910 --> 00:00:06,290
So it looks like there's more elements that we need to create and the one that we need to create now

2
00:00:06,290 --> 00:00:11,330
is a bomb, so we need something to drop from our plane on top of our enemy base.

3
00:00:11,660 --> 00:00:15,800
So using that same thing, let's set up our styling first.

4
00:00:16,050 --> 00:00:18,870
So that's the bomb and position at left.

5
00:00:19,010 --> 00:00:20,510
And this is going to change.

6
00:00:20,510 --> 00:00:25,880
We're going to do this all dynamically with JavaScript on the top left, setting a width value.

7
00:00:26,090 --> 00:00:28,220
So the width is probably going to stay the same.

8
00:00:28,460 --> 00:00:31,420
We could adjust it if we want to have different size bombs.

9
00:00:32,000 --> 00:00:35,790
So that's always a possibility and everything is dynamic as we're building it out.

10
00:00:36,350 --> 00:00:41,330
So even if we adjust the size of the bomb, our collision detection will still detect the collision

11
00:00:41,330 --> 00:00:42,500
between the two elements.

12
00:00:42,890 --> 00:00:44,430
So it's going to be dynamic as well.

13
00:00:44,450 --> 00:00:50,810
So updating background color and we'll just set it by default to be black and we can adjust anything

14
00:00:50,810 --> 00:00:51,170
we want.

15
00:00:51,170 --> 00:00:54,000
All of this with JavaScript if needed as well.

16
00:00:54,140 --> 00:00:57,740
And let's set a font size for this one case.

17
00:00:57,770 --> 00:00:59,360
We want to write anything on those.

18
00:00:59,390 --> 00:01:04,400
So just as we did before, we want to initiate the making of the bomb.

19
00:01:04,400 --> 00:01:08,330
And the way that we want it to work is if the player presses the space.

20
00:01:08,330 --> 00:01:12,950
And that's why we went through all of that trouble to make sure that we don't just have a blank, that

21
00:01:12,950 --> 00:01:16,940
we can actually track it within our keys object once space is clicked.

22
00:01:16,950 --> 00:01:22,040
So let's check to see if he's space equals true.

23
00:01:22,040 --> 00:01:25,520
And if it does, we don't have any other conditions that we need to match.

24
00:01:25,550 --> 00:01:27,560
We want to just simply make a bomb.

25
00:01:27,680 --> 00:01:30,880
And this is going to be a function that we were creating the bomb.

26
00:01:31,160 --> 00:01:33,050
So let's create that function.

27
00:01:33,060 --> 00:01:38,840
So the MAKEM function, this is going to get invoked every time that we press the space bar.

28
00:01:38,870 --> 00:01:43,910
And for now, let's just do making as you like to double check just to make sure that everything is

29
00:01:44,090 --> 00:01:45,350
functioning as needed.

30
00:01:45,380 --> 00:01:49,460
So now when I press the space, you can see that we get this making showing up.

31
00:01:49,760 --> 00:01:54,970
So that's exactly what we want it to happen and we are ready to continue to make our bomb.

32
00:01:54,980 --> 00:02:01,730
So let's also check to make sure if player inplay is true and if it is, then we know that we can go

33
00:02:01,730 --> 00:02:06,200
ahead and create all of that action that we need within our gameplay.

34
00:02:06,260 --> 00:02:11,750
Also, one of the first things I want to do is I want to decrease the score because the more that are

35
00:02:11,750 --> 00:02:14,360
dropped, the score should continuously go down.

36
00:02:14,400 --> 00:02:18,920
Also, I'm going to introduce another value because I want to track the number of bombs that we have.

37
00:02:19,100 --> 00:02:25,430
So taking our player and I want to set up a limit to the number of bombs that they can create.

38
00:02:25,590 --> 00:02:30,590
So calculating out how many total bombs the player has.

39
00:02:30,830 --> 00:02:32,570
And for now, let's set that to two.

40
00:02:33,140 --> 00:02:35,900
So, again, trying to be as dynamic as possible.

41
00:02:36,230 --> 00:02:38,990
And here I'm going to track another variable.

42
00:02:38,990 --> 00:02:40,750
I'm going to call this active bomb.

43
00:02:41,000 --> 00:02:44,520
So every time we create one, we're going to create an active value.

44
00:02:44,750 --> 00:02:50,600
So within the player object, we can track how many we have on the screen at the time and we can use

45
00:02:50,600 --> 00:02:54,620
that value to compare it to whatever I-Max bomb values are.

46
00:02:54,650 --> 00:02:57,810
So now we are ready to create our element.

47
00:02:58,160 --> 00:03:04,790
So just as we've done several times before, using the create element method, we're going to create

48
00:03:04,790 --> 00:03:06,580
a div on the fly.

49
00:03:06,590 --> 00:03:10,730
You have JavaScript and then taking that object that we just created.

50
00:03:11,300 --> 00:03:15,310
Let's add to the class list the class of bomb.

51
00:03:15,860 --> 00:03:19,520
And this is a little bit different because over here we're setting an attribute here.

52
00:03:19,520 --> 00:03:20,480
We're setting a class.

53
00:03:20,690 --> 00:03:27,890
And if you had already existing class, you could add it with this format, with the syntax.

54
00:03:28,310 --> 00:03:32,780
And since we don't have anything existing, both of these are actually going to do the same.

55
00:03:32,790 --> 00:03:34,430
It's doing the same thing, the statements.

56
00:03:34,700 --> 00:03:38,600
So at this point, you could choose whichever one works best for you.

57
00:03:38,690 --> 00:03:45,380
Just keeping in mind that setting the attribute of class, if you already have a class value, you're

58
00:03:45,380 --> 00:03:46,880
going to set it to just be base.

59
00:03:47,090 --> 00:03:51,730
And this also gives you the opportunity to add additional values really easily as well.

60
00:03:51,980 --> 00:03:57,660
So whatever format is best suited for your needs, that's the one that you should use.

61
00:03:58,010 --> 00:04:02,420
So for now, also, let's track how many active bombs we have.

62
00:04:02,420 --> 00:04:05,760
So player active bomb value.

63
00:04:06,290 --> 00:04:07,950
So this is the active bomb value.

64
00:04:08,210 --> 00:04:09,740
Let's set a default.

65
00:04:10,700 --> 00:04:20,540
Positions, so our bomb style and we can actually set the X and Y positions of these because we know

66
00:04:20,540 --> 00:04:27,080
them to be equal currently to whatever the value of our player X and Y is.

67
00:04:27,440 --> 00:04:36,530
So taking our player Y value and then the bomb X is going to be equal to whatever the player Y, the

68
00:04:36,530 --> 00:04:40,240
player access and then moving it to the left.

69
00:04:40,250 --> 00:04:43,430
We can use these values that we've just created.

70
00:04:43,970 --> 00:04:48,560
And then don't forget to add Picts to them because these are numeric values, otherwise they won't show

71
00:04:48,560 --> 00:04:56,600
up and we're doing style left and style top and this one just adjust it to be y so we're setting the

72
00:04:56,600 --> 00:04:57,860
positioning for it.

73
00:04:58,970 --> 00:05:06,650
And then lastly, let's add it into our game area using append child, so just as we did before, we're

74
00:05:06,650 --> 00:05:11,570
going to spend that freshly created element and there's actually one other value that I want it to do.

75
00:05:11,570 --> 00:05:19,220
So instead of in play, let's do ready, because the problem here is going to be that we want to have

76
00:05:19,220 --> 00:05:22,160
a little bit of time between the bombs dropping.

77
00:05:22,170 --> 00:05:25,560
So let's keep it in play and I'll see what the problem is right now.

78
00:05:26,360 --> 00:05:34,100
So going back out and refreshing and pressing our space, you see that we're adding those out.

79
00:05:34,130 --> 00:05:37,730
We can add those anywhere we want and see there's a whole bunch of them.

80
00:05:37,730 --> 00:05:39,740
So literally, I could add a whole bunch in a row.

81
00:05:39,950 --> 00:05:41,240
So we don't want that to happen.

82
00:05:42,110 --> 00:05:44,600
So let's add in some spacing between there.

83
00:05:45,050 --> 00:05:50,740
And the way that we can do this is we can add another variable into the player ready object.

84
00:05:51,680 --> 00:06:00,080
And right now, once we create the bomb, we can set player ready to force and then using set time out

85
00:06:00,380 --> 00:06:06,650
method and JavaScript, we can run another function that will reset that to be true.

86
00:06:06,740 --> 00:06:11,730
So player ready is now true so we can drop another one.

87
00:06:12,050 --> 00:06:17,240
So you need to have that weight in between them and we'll do five hundred milliseconds.

88
00:06:17,240 --> 00:06:18,890
So half a second weight between them.

89
00:06:19,640 --> 00:06:24,570
And also because we're looking for value of true when we start the game.

90
00:06:24,590 --> 00:06:28,240
Let's set this one to be true so we can start dropping the bombs.

91
00:06:28,670 --> 00:06:29,810
So let's see how that works.

92
00:06:29,840 --> 00:06:35,570
So now whenever I hit space, you see there's intervals between there and we're actually not getting

93
00:06:35,570 --> 00:06:38,560
the right value here of the player active bomb.

94
00:06:38,720 --> 00:06:41,390
So we need to set a default value for that as well.

95
00:06:41,390 --> 00:06:43,490
But we have a starting value to increment.

96
00:06:43,910 --> 00:06:49,050
So now we've getting the values and we can drop them wherever the position of the plane is.

97
00:06:49,100 --> 00:06:50,810
So that's exactly what we want to happen.

98
00:06:50,870 --> 00:06:54,770
So one thing that's missing on these is we don't have any movement yet.

99
00:06:55,340 --> 00:06:59,620
We're able to drop them, but we're not able to get them dropping and actually moving.

100
00:06:59,900 --> 00:07:01,100
So we need to take care of that.

101
00:07:01,100 --> 00:07:05,930
And that's coming up in the next lesson where we're going to be dropping these down and have them moving.

102
00:07:06,230 --> 00:07:09,380
I'm also going to do a quick adjustment to the flight size.

103
00:07:09,650 --> 00:07:11,250
I think it's a little bit too big.

104
00:07:11,270 --> 00:07:15,000
So this way we have a little bit more space on top of the bomb.

105
00:07:15,110 --> 00:07:17,370
So coming up next, we're going to introduce movement.

106
00:07:17,720 --> 00:07:24,290
So go ahead and add the ability to create these elements, generate these elements using the space bar

107
00:07:24,650 --> 00:07:28,280
and position them where you're player X and Y position is.

108
00:07:28,760 --> 00:07:30,770
And coming up next, I'll show you how we can move those.