1
00:00:00,210 --> 00:00:06,090
So you know what will make this game more interesting, having an objective, a base to destroy an enemy

2
00:00:06,090 --> 00:00:08,390
base, so let's create that in this lesson.

3
00:00:08,700 --> 00:00:11,550
So starting out, we're going to create a class of base.

4
00:00:11,820 --> 00:00:18,060
And just as we added in the other elements, we're going to create this dynamically using JavaScript

5
00:00:18,450 --> 00:00:20,040
position at at the bottom.

6
00:00:20,760 --> 00:00:25,290
So instead of top, we're just going to always have it sitting at the bottom position and the width

7
00:00:25,290 --> 00:00:26,880
we're going to change with JavaScript.

8
00:00:26,890 --> 00:00:29,800
So some of these values, we are going to be changing with JavaScript.

9
00:00:30,180 --> 00:00:37,410
So just to set up some default ones and color white in case we want to write some text on it and background

10
00:00:37,410 --> 00:00:37,860
color.

11
00:00:38,160 --> 00:00:41,580
So for now, we'll set it as block and we could also play around with this.

12
00:00:41,580 --> 00:00:44,070
And adding an image is just as we did with the plane.

13
00:00:44,280 --> 00:00:50,370
If we need to do that and let's set up the font size, so make the font fairly small in case we need

14
00:00:50,370 --> 00:00:54,710
to type or add some text into the game, into the bad guy.

15
00:00:55,260 --> 00:01:00,090
So next, what we want to do, I'll make this bigger because we are a little cramped there.

16
00:01:00,420 --> 00:01:05,400
So now when we start the game, I want to create that bad guy.

17
00:01:05,400 --> 00:01:11,430
So create the enemy base and we can make a function, call it make enemy sounds good.

18
00:01:11,430 --> 00:01:15,210
And then just down below the start, let's create that function.

19
00:01:15,420 --> 00:01:18,780
And what this is going to do is this is going to generate that enemy.

20
00:01:19,080 --> 00:01:22,420
So this is the objective of what the player is trying to destroy.

21
00:01:23,190 --> 00:01:28,770
So we can use it under the player object or you can create another one if you want or to documents and

22
00:01:28,770 --> 00:01:32,280
using the same format as before create elements.

23
00:01:32,280 --> 00:01:34,410
And the element that we're going to create is a div.

24
00:01:34,890 --> 00:01:40,200
So this way we can be fairly dynamic and we can create multiple bases, possibly for one or two as well.

25
00:01:40,770 --> 00:01:48,090
Taking our player base object that we just created and just as we did with our plane, we need to set

26
00:01:48,090 --> 00:01:48,900
an attribute.

27
00:01:49,230 --> 00:01:54,430
So we're setting a class value and the class value is that one that we just created.

28
00:01:54,720 --> 00:01:56,420
So that's going to be the base.

29
00:01:56,490 --> 00:02:00,330
So a class of base so that we apply all of that staling to it.

30
00:02:00,660 --> 00:02:04,290
And once we apply the styling, that gives us the ability to move it around.

31
00:02:04,530 --> 00:02:09,910
And we also want to not have them all be the same size and look the same.

32
00:02:10,230 --> 00:02:17,610
So let's mix things up a little bit, making them with width so we'll update the width using math floor

33
00:02:17,760 --> 00:02:23,320
and then math random to create some random and unexpectedness into our gameplay.

34
00:02:23,550 --> 00:02:29,650
So it could possibly be as wide as 200 picks and always add in some type of value.

35
00:02:29,680 --> 00:02:32,570
So we have a minimum and a maximum value.

36
00:02:32,760 --> 00:02:35,490
So you don't want to have it ending up being zero.

37
00:02:35,500 --> 00:02:39,050
So that way it's going to be a little bit hard to hit if we can't see it.

38
00:02:39,540 --> 00:02:44,710
Next, let's set a default or a random height to it.

39
00:02:44,730 --> 00:02:50,280
So using the same formula with math, random, and sometimes you might have to adjust some of these

40
00:02:50,280 --> 00:02:54,130
numbers depending on how the calculations turn out, of course.

41
00:02:54,660 --> 00:02:59,070
So let's add one hundred, because I don't want to have a little tiny base.

42
00:02:59,250 --> 00:03:01,090
I want to have it coming up a little bit.

43
00:03:01,710 --> 00:03:07,640
And then lastly, let's set our lifestyle position, and this is going to be the left position.

44
00:03:07,920 --> 00:03:10,840
So this is where it's sitting on our screen.

45
00:03:11,250 --> 00:03:18,000
So using math, random, again, let's multiply it and we're going to make it dynamic.

46
00:03:18,000 --> 00:03:21,150
So always try to make things as dynamic as possible.

47
00:03:21,330 --> 00:03:26,310
So using game area offset width and what does that give us?

48
00:03:26,340 --> 00:03:29,610
That gives us the right side pixel value.

49
00:03:29,790 --> 00:03:34,050
So basically the width of the screen is going to be the far right pixel.

50
00:03:34,770 --> 00:03:40,470
So multiplying it by that is going to return back anywhere on the screen, but it could be all the way

51
00:03:40,470 --> 00:03:42,160
over to the right hand side.

52
00:03:42,540 --> 00:03:45,480
So this is also it could be a zero value.

53
00:03:45,840 --> 00:03:48,330
So let's add in plus 100.

54
00:03:48,540 --> 00:03:51,800
But on this value, we're going to subtract two hundred.

55
00:03:52,140 --> 00:03:59,010
So this should always land us an offset of up to minus two hundred of whatever the width of the screen

56
00:03:59,010 --> 00:04:00,780
is and then plus 100.

57
00:04:00,790 --> 00:04:02,630
So we're not right up against the wall.

58
00:04:02,790 --> 00:04:08,370
And again, sometimes you do need to make some adjustments to this as you play the game and you realize

59
00:04:08,550 --> 00:04:10,780
that the calculations might be a little bit off.

60
00:04:10,800 --> 00:04:15,020
So always good to be dynamic and be able to adjust these values.

61
00:04:15,720 --> 00:04:19,030
And also, if you want to make it more challenging, you could do that as well.

62
00:04:19,590 --> 00:04:23,500
So once you've created the base next, we want to add it to the page.

63
00:04:23,880 --> 00:04:26,640
So that should be adding it into the page.

64
00:04:26,850 --> 00:04:29,550
And it turned out really, really big.

65
00:04:29,550 --> 00:04:35,340
There are going to decrease the screen size because I'm at one hundred and ten percent and I'm probably

66
00:04:35,340 --> 00:04:36,780
going to make some more space here.

67
00:04:36,780 --> 00:04:38,620
So let's try that one more time.

68
00:04:39,090 --> 00:04:40,370
So that looks a lot better.

69
00:04:40,740 --> 00:04:43,760
So I was because my screen was quite a bit it was zoomed in.

70
00:04:44,130 --> 00:04:49,440
So as you can see, there's our base that we need to bomb with the plane flying by it.

71
00:04:49,740 --> 00:04:54,780
And that's coming up next, where we have to introduce the ability to drop a bomb.

72
00:04:54,780 --> 00:04:58,350
Suppressing the space is going to drop a bomb from the current position.

73
00:04:58,590 --> 00:04:59,910
And we're going to also do.

74
00:04:59,970 --> 00:05:04,540
Collision detection to check if it hits the target, so all of that is yet to come.

75
00:05:04,800 --> 00:05:10,290
So go ahead and add in the enemy base into your project, creating the element on the fly.

76
00:05:10,470 --> 00:05:13,530
And you can also customize your styling as needed.