1
00:00:00,780 --> 00:00:05,670
OK, we kind of have a game, but it's not very interesting because there's no obstacle, there's no

2
00:00:05,670 --> 00:00:06,530
challenge to it.

3
00:00:06,750 --> 00:00:12,450
We've got a little bird, he flies around, he moves around the page, and there's nothing for him to

4
00:00:12,450 --> 00:00:14,250
really avoid, nothing for him to hit.

5
00:00:14,490 --> 00:00:16,080
So he just is kind of there.

6
00:00:16,320 --> 00:00:21,570
So to make a little bit more interesting and challenging and I'm also going to set the default position

7
00:00:21,810 --> 00:00:24,450
to be coming off of the top 100 pics.

8
00:00:25,140 --> 00:00:29,450
So that will default the bird fairly high up instead of coming off the bottom.

9
00:00:29,760 --> 00:00:31,170
So a little minor adjustment there.

10
00:00:31,500 --> 00:00:38,490
So going into where we start the game, we need to add in our obstacles and the way that we can do that.

11
00:00:38,490 --> 00:00:41,580
And again, trying to be as dynamic as possible.

12
00:00:41,970 --> 00:00:43,200
Let's try that.

13
00:00:43,210 --> 00:00:45,900
I and we'll start out with player pipe.

14
00:00:46,290 --> 00:00:53,010
So this is the starting pipe that we're going to have and how much spacing we want to have between them.

15
00:00:53,010 --> 00:00:58,620
So this can be a value and picks and well, I'll show you how we're going to use these variable values.

16
00:00:58,920 --> 00:01:03,630
So the spacing is be between each pipe, let's say four hundred picks between each one.

17
00:01:04,290 --> 00:01:07,890
And now we need to determine how many we need.

18
00:01:08,310 --> 00:01:11,280
So let's create a variable call it how many, of course.

19
00:01:11,730 --> 00:01:14,160
And we're going to do a little bit of math here.

20
00:01:14,550 --> 00:01:19,950
So taking the JavaScript math for one around, this one down.

21
00:01:20,960 --> 00:01:31,000
And we're going to calculate out how much game area offset with value divided by let's make this bigger.

22
00:01:31,520 --> 00:01:35,690
So we're going to divide this value by our spacing.

23
00:01:35,700 --> 00:01:42,350
And what this is going to return is it's going to return us back a value that will calculate how many

24
00:01:42,350 --> 00:01:43,320
we want to create.

25
00:01:44,240 --> 00:01:45,470
So let's see how that works.

26
00:01:45,470 --> 00:01:46,020
How many?

27
00:01:46,430 --> 00:01:47,650
So what are the width of it?

28
00:01:47,960 --> 00:01:50,780
How many 400 pick slots are going to fit in?

29
00:01:50,780 --> 00:01:53,510
There is what we're going to put into the console.

30
00:01:53,960 --> 00:01:57,740
And we see that once we hit the start and it's going to be right up at the top.

31
00:01:57,950 --> 00:02:00,350
So so far, we can only put one in there.

32
00:02:00,920 --> 00:02:02,330
Let's make it wider.

33
00:02:02,990 --> 00:02:04,720
Start this time we got two.

34
00:02:05,450 --> 00:02:07,310
So maybe we don't want 400 spacing.

35
00:02:07,310 --> 00:02:12,080
We'll do 300 spacing and that will give us a few more pipes within that spacing.

36
00:02:12,590 --> 00:02:17,840
I'm also going to shrink down the screen size as well, will shrink down the screen size as well so

37
00:02:17,840 --> 00:02:19,450
we can fit even more in there.

38
00:02:19,850 --> 00:02:21,460
So try that one more time.

39
00:02:21,740 --> 00:02:25,880
I'm also going to get rid of these console messages as we don't really need them anymore.

40
00:02:26,060 --> 00:02:30,470
So now we hit start and we see we can do three pipes there can fit on the screen.

41
00:02:30,980 --> 00:02:32,180
So let's set those up.

42
00:02:32,180 --> 00:02:37,720
And as we calculate out how many we need, we can do this with a simple for loop.

43
00:02:38,240 --> 00:02:45,560
So starting out at X equals zero and within here will have a function that will build pipes and will

44
00:02:45,560 --> 00:02:47,550
pass in the player pipe value.

45
00:02:47,600 --> 00:02:52,170
I probably don't actually need that, but we'll calculate it out with the space.

46
00:02:52,220 --> 00:02:56,240
So this is the argument that we're going to posehn to that function.

47
00:02:56,510 --> 00:03:02,720
I'll clean this up a bit and now let's create that build pipes function and we're passing in our start

48
00:03:02,870 --> 00:03:04,870
position of the pipe.

49
00:03:04,880 --> 00:03:06,800
So this is where the first pipe is going to start.

50
00:03:06,950 --> 00:03:08,840
And let's grab some variables.

51
00:03:08,840 --> 00:03:16,790
So our total height value that we have to work with is coming from game area and we're using offset

52
00:03:16,790 --> 00:03:17,780
height for that.

53
00:03:18,470 --> 00:03:21,440
We've got our total of our game area.

54
00:03:22,100 --> 00:03:28,010
So again, calculating out our screen size is going to help us with positioning and we're trying to

55
00:03:28,010 --> 00:03:30,170
just make it as dynamic as possible.

56
00:03:30,680 --> 00:03:33,620
Will increment player pipe.

57
00:03:33,620 --> 00:03:34,850
So increase that.

58
00:03:35,060 --> 00:03:38,410
And so now it looks like we're ready to create those pipes.

59
00:03:38,780 --> 00:03:42,110
So using and we need to have one for the top and one for the bottom.

60
00:03:42,110 --> 00:03:43,750
So we'll create pipe one.

61
00:03:44,690 --> 00:03:50,340
I'll make this big using the document hitting a div and we'll apply the styling afterwards.

62
00:03:50,360 --> 00:03:52,780
So pipe and these have to move as well.

63
00:03:53,060 --> 00:03:56,030
So we need to have dynamic start position.

64
00:03:56,690 --> 00:04:01,400
So we're taking our start position that we're passing it in plus the total width.

65
00:04:01,730 --> 00:04:05,570
So that will move it all the way over to the right side off screen.

66
00:04:05,660 --> 00:04:11,030
The classless will do it a little bit different, will reduce class list and then add and we'll add

67
00:04:11,030 --> 00:04:13,940
a class of pipe and we'll style those afterwards.

68
00:04:13,970 --> 00:04:18,010
Next with pipe, let's add some inner HTML to it.

69
00:04:18,020 --> 00:04:19,990
So adding an inner HTML.

70
00:04:20,000 --> 00:04:26,720
However, the player pipe value is so can see which one they are and they're going to constantly be

71
00:04:26,720 --> 00:04:27,850
incrementing and count.

72
00:04:27,950 --> 00:04:32,360
So again, taking that pipe one object, let's, let's set some height for it.

73
00:04:32,480 --> 00:04:35,630
And this can be random height, math, random.

74
00:04:35,630 --> 00:04:43,190
So it could be anywhere to let's say 350 and to make it dynamic, we should as well use that off of

75
00:04:43,220 --> 00:04:44,060
the height.

76
00:04:44,270 --> 00:04:48,910
But for now, let's set a value there and then we can adjust this later, later if we need to.

77
00:04:49,340 --> 00:04:56,440
So positioning the height of that element so that we've calculated out and set value to that.

78
00:04:56,450 --> 00:04:57,710
So that's setting the height of it.

79
00:04:58,280 --> 00:05:02,000
We also taking the pipe object and using style.

80
00:05:02,010 --> 00:05:03,560
So again, setting our style.

81
00:05:03,950 --> 00:05:09,650
So where it's going to be positioned, the left position and we're going to use this value in order

82
00:05:09,650 --> 00:05:14,750
to move it, just like we're moving the bird and the pipe one is going to be right up to the top.

83
00:05:15,260 --> 00:05:17,300
So that's not going to be changing.

84
00:05:17,300 --> 00:05:19,040
So this is always right at the top.

85
00:05:19,040 --> 00:05:20,150
So zero picks there.

86
00:05:20,240 --> 00:05:27,200
And let's let's take that position of pipe so we use the same the same format that we use for the bird.

87
00:05:27,530 --> 00:05:29,270
So we'll have an X and Y.

88
00:05:29,420 --> 00:05:33,200
We could also assign an I.D. to it because they're all going to be different.

89
00:05:33,500 --> 00:05:39,400
So if we do need to return back the ID value, we're going to have the player pipe value as the ID.

90
00:05:39,530 --> 00:05:43,550
And for now, let's take our pipe and we'll set a background color.

91
00:05:43,820 --> 00:05:46,970
And we can always adjust this later on to make it a little bit more interesting.

92
00:05:47,280 --> 00:05:53,360
So once we've created it, we need to append it to our game area or pending the pipe one object, just

93
00:05:53,360 --> 00:05:55,010
as we've done with the other elements.

94
00:05:55,340 --> 00:05:57,500
So next we need to create the bottom pipe.

95
00:05:57,740 --> 00:06:02,900
So the starting position is going to be the same, but there's going to be spacing in between where

96
00:06:02,930 --> 00:06:04,700
this one ends at the top.

97
00:06:04,700 --> 00:06:13,250
And we need to create some spacing to create this as a random space value and using math floor and then

98
00:06:13,250 --> 00:06:17,720
math random and JavaScript will make makerspace space up to 250.

99
00:06:18,230 --> 00:06:20,310
And with the minimum, we're up to four.

100
00:06:20,990 --> 00:06:26,990
But with a minimum of 150, so it's the formula for that, so it's going to give us a variable value

101
00:06:27,140 --> 00:06:30,380
anywhere from 150 to three ninety nine.

102
00:06:30,500 --> 00:06:34,630
So now we can create our second pipe and a lot of this is going to be very similar.

103
00:06:35,000 --> 00:06:36,560
So let's add that in.

104
00:06:36,560 --> 00:06:39,610
And we're going to simply create pipe, too.

105
00:06:39,920 --> 00:06:41,880
And this is going to be a div as well.

106
00:06:42,290 --> 00:06:49,430
We need to have it start position and the start position is going to be whatever the start position

107
00:06:49,430 --> 00:06:54,300
of pipe one is, we're going to add a class to pipe.

108
00:06:54,650 --> 00:06:59,230
We can also update the inner HTML, the total height of it.

109
00:06:59,660 --> 00:07:01,320
So this is going to be calculated out.

110
00:07:01,350 --> 00:07:05,940
So it's not random anymore because this is all depending on how much space we have left.

111
00:07:06,170 --> 00:07:11,070
So let's calculate that height out and we're going to be using the value for pipe number one.

112
00:07:11,450 --> 00:07:15,980
So I'm just going to make sure that I'm updating these to be pipe to the total height that we have available.

113
00:07:15,990 --> 00:07:22,190
So that's the one that we set right in the beginning and subtracting the height of pipe one and then

114
00:07:22,190 --> 00:07:26,270
also subtracting the height of pipe space.

115
00:07:26,270 --> 00:07:27,730
So that's that random value.

116
00:07:28,010 --> 00:07:31,800
So taking this calculation and then we're going to add Picts to it.

117
00:07:32,000 --> 00:07:38,240
So this is essentially going to give us how much space is left after we take into account this one coming

118
00:07:38,240 --> 00:07:41,990
off at the top, this space for the bird to fly through.

119
00:07:42,290 --> 00:07:47,060
And then this is going to be what's left and we're going to fill that up with the pipe.

120
00:07:48,130 --> 00:07:53,890
Instead of top, we're going to set it out right at the bottom, because the pipe, too, is sitting

121
00:07:53,890 --> 00:07:54,610
right at the bottom.

122
00:07:55,270 --> 00:07:58,530
The left position is going to be the same as pipe one start.

123
00:07:58,840 --> 00:07:59,440
So that's fine.

124
00:07:59,440 --> 00:08:00,580
We can keep that the same.

125
00:08:02,050 --> 00:08:07,010
The exposition, as well as the pipeline and the ID can also be the pipeline start.

126
00:08:07,420 --> 00:08:11,590
And before we try it, let's make sure we update that pipe to stale.

127
00:08:12,760 --> 00:08:20,320
And this is pipe one style, and before that, before we try that, let's create a class for so going

128
00:08:20,320 --> 00:08:21,320
up to our style.

129
00:08:21,790 --> 00:08:25,120
Let's do a quick class for pipe and we need to set a default.

130
00:08:25,480 --> 00:08:27,880
Also, position is absolute.

131
00:08:28,330 --> 00:08:33,270
So removing those we can text align center and let's try that.

132
00:08:33,280 --> 00:08:34,480
So refresh.

133
00:08:35,480 --> 00:08:40,730
And outputting it and I'm going to drag it over and you can see that we created all three of the pipes

134
00:08:40,730 --> 00:08:42,020
that we want to make use of.

135
00:08:42,470 --> 00:08:46,370
So coming up next, our next objective is to.

136
00:08:47,360 --> 00:08:51,160
Make them move, and that's what we're going to have to do within that play game area.

137
00:08:51,500 --> 00:08:57,860
And before we conclude, let's make a few adjustments to our score so that it overlaps on top of the

138
00:08:57,860 --> 00:08:58,250
pipes.

139
00:08:58,520 --> 00:09:07,040
So do a position of absolute setting with to 100 percent of the screen size and then also adding in

140
00:09:07,040 --> 00:09:08,960
a Z index of one hundred.

141
00:09:09,260 --> 00:09:13,220
So this way, it's going to be on top of the pipes and we're ready to move on to the next lesson.