OK, we kind of have a game, but it's not very interesting because there's no obstacle, there's no
challenge to it.
We've got a little bird, he flies around, he moves around the page, and there's nothing for him to
really avoid, nothing for him to hit.
So he just is kind of there.
So to make a little bit more interesting and challenging and I'm also going to set the default position
to be coming off of the top 100 pics.
So that will default the bird fairly high up instead of coming off the bottom.
So a little minor adjustment there.
So going into where we start the game, we need to add in our obstacles and the way that we can do that.
And again, trying to be as dynamic as possible.
Let's try that.
I and we'll start out with player pipe.
So this is the starting pipe that we're going to have and how much spacing we want to have between them.
So this can be a value and picks and well, I'll show you how we're going to use these variable values.
So the spacing is be between each pipe, let's say four hundred picks between each one.
And now we need to determine how many we need.
So let's create a variable call it how many, of course.
And we're going to do a little bit of math here.
So taking the JavaScript math for one around, this one down.
And we're going to calculate out how much game area offset with value divided by let's make this bigger.
So we're going to divide this value by our spacing.
And what this is going to return is it's going to return us back a value that will calculate how many
we want to create.
So let's see how that works.
How many?
So what are the width of it?
How many 400 pick slots are going to fit in?
There is what we're going to put into the console.
And we see that once we hit the start and it's going to be right up at the top.
So so far, we can only put one in there.
Let's make it wider.
Start this time we got two.
So maybe we don't want 400 spacing.
We'll do 300 spacing and that will give us a few more pipes within that spacing.
I'm also going to shrink down the screen size as well, will shrink down the screen size as well so
we can fit even more in there.
So try that one more time.
I'm also going to get rid of these console messages as we don't really need them anymore.
So now we hit start and we see we can do three pipes there can fit on the screen.
So let's set those up.
And as we calculate out how many we need, we can do this with a simple for loop.
So starting out at X equals zero and within here will have a function that will build pipes and will
pass in the player pipe value.
I probably don't actually need that, but we'll calculate it out with the space.
So this is the argument that we're going to posehn to that function.
I'll clean this up a bit and now let's create that build pipes function and we're passing in our start
position of the pipe.
So this is where the first pipe is going to start.
And let's grab some variables.
So our total height value that we have to work with is coming from game area and we're using offset
height for that.
We've got our total of our game area.
So again, calculating out our screen size is going to help us with positioning and we're trying to
just make it as dynamic as possible.
Will increment player pipe.
So increase that.
And so now it looks like we're ready to create those pipes.
So using and we need to have one for the top and one for the bottom.
So we'll create pipe one.
I'll make this big using the document hitting a div and we'll apply the styling afterwards.
So pipe and these have to move as well.
So we need to have dynamic start position.
So we're taking our start position that we're passing it in plus the total width.
So that will move it all the way over to the right side off screen.
The classless will do it a little bit different, will reduce class list and then add and we'll add
a class of pipe and we'll style those afterwards.
Next with pipe, let's add some inner HTML to it.
So adding an inner HTML.
However, the player pipe value is so can see which one they are and they're going to constantly be
incrementing and count.
So again, taking that pipe one object, let's, let's set some height for it.
And this can be random height, math, random.
So it could be anywhere to let's say 350 and to make it dynamic, we should as well use that off of
the height.
But for now, let's set a value there and then we can adjust this later, later if we need to.
So positioning the height of that element so that we've calculated out and set value to that.
So that's setting the height of it.
We also taking the pipe object and using style.
So again, setting our style.
So where it's going to be positioned, the left position and we're going to use this value in order
to move it, just like we're moving the bird and the pipe one is going to be right up to the top.
So that's not going to be changing.
So this is always right at the top.
So zero picks there.
And let's let's take that position of pipe so we use the same the same format that we use for the bird.
So we'll have an X and Y.
We could also assign an I.D. to it because they're all going to be different.
So if we do need to return back the ID value, we're going to have the player pipe value as the ID.
And for now, let's take our pipe and we'll set a background color.
And we can always adjust this later on to make it a little bit more interesting.
So once we've created it, we need to append it to our game area or pending the pipe one object, just
as we've done with the other elements.
So next we need to create the bottom pipe.
So the starting position is going to be the same, but there's going to be spacing in between where
this one ends at the top.
And we need to create some spacing to create this as a random space value and using math floor and then
math random and JavaScript will make makerspace space up to 250.
And with the minimum, we're up to four.
But with a minimum of 150, so it's the formula for that, so it's going to give us a variable value
anywhere from 150 to three ninety nine.
So now we can create our second pipe and a lot of this is going to be very similar.
So let's add that in.
And we're going to simply create pipe, too.
And this is going to be a div as well.
We need to have it start position and the start position is going to be whatever the start position
of pipe one is, we're going to add a class to pipe.
We can also update the inner HTML, the total height of it.
So this is going to be calculated out.
So it's not random anymore because this is all depending on how much space we have left.
So let's calculate that height out and we're going to be using the value for pipe number one.
So I'm just going to make sure that I'm updating these to be pipe to the total height that we have available.
So that's the one that we set right in the beginning and subtracting the height of pipe one and then
also subtracting the height of pipe space.
So that's that random value.
So taking this calculation and then we're going to add Picts to it.
So this is essentially going to give us how much space is left after we take into account this one coming
off at the top, this space for the bird to fly through.
And then this is going to be what's left and we're going to fill that up with the pipe.
Instead of top, we're going to set it out right at the bottom, because the pipe, too, is sitting
right at the bottom.
The left position is going to be the same as pipe one start.
So that's fine.
We can keep that the same.
The exposition, as well as the pipeline and the ID can also be the pipeline start.
And before we try it, let's make sure we update that pipe to stale.
And this is pipe one style, and before that, before we try that, let's create a class for so going
up to our style.
Let's do a quick class for pipe and we need to set a default.
Also, position is absolute.
So removing those we can text align center and let's try that.
So refresh.
And outputting it and I'm going to drag it over and you can see that we created all three of the pipes
that we want to make use of.
So coming up next, our next objective is to.
Make them move, and that's what we're going to have to do within that play game area.
And before we conclude, let's make a few adjustments to our score so that it overlaps on top of the
pipes.
So do a position of absolute setting with to 100 percent of the screen size and then also adding in
a Z index of one hundred.
So this way, it's going to be on top of the pipes and we're ready to move on to the next lesson.