Hello and welcome back.
How is your project coming along in this lesson we're going to make the pipes move.
So in the earlier lessons, we created a bird.
We have them moving around the screen and we also created a series of pipes that are going to act as
obstacles that the bird has to fly through.
So we need to have them moving across the screen.
So let's add that in and in this lesson, we're going to accomplish that movement.
So within the plea game method, this is where we can add in the movement of the pipes.
So adding in move pipes and we'll pass in our bird object.
And that means that we need to move the pipes after we select the element with the class of bird.
Now, let's create that function.
So this is the function where we want to move the obstacles across the screen so that the player can
interact with them, creating our function called move pipes, and we're passing in the bird object.
So it's our player character.
Let's select all of the lines.
So creating an object that we can use to store all of our lines and then using query selector all.
So we're going to select all of the elements that have a class of pipe and add them into a node list.
Also, we're going to need a counter for counting how many pipes we've gone through.
So looping through all of the items within the node list, we can output that as for each and then have
a function that returns back the item information.
So this is going to return back each and every pipe and each pipe is going to be indicated under item
will log that out for now so you can see what that looks like.
So see, we get a whole bunch of elements that are being loaded here and we're getting them output into
our console.
And these are indicate the different pipes that we have on our screen.
So we want to do is we want to adjust their style attributes and move them.
So taking our item X value and remember, we have a set of pipe X values.
So for each one of the pipes, we've got an X value and we're going to move it, subtracting out the
player speed from it, and then we can take that item and we can update it.
So playing a style left value to it.
And then using that item X value that we just created, apply that new position for that element.
So let's see what happens now.
So this time when I press start, you can see that we've got them moving.
So next to that, we need to do is we need to make sure that once they reach once the X is less than
zero, then we want to restart them and we want to remove them from our screen, increase the counter
value and then add them in.
So build some more pipe.
So now we can apply that check checking to see if item X value is less than less than zero and if it
is.
They were taking the item and selecting its parent element.
And then from the parent element, we're going to remove the child that matches the value of item,
so effectively what this will do is this will remove it from our visible area and we're going to increment
the counter by one.
So this way we know how many pipes we've removed, counts pipes to remove.
And because for each one of those, there's a top one and a bottom one, that means that we have to
divide that value of counter by two.
So taking count.
So this is how many we actually have to create, because when we create the pipe so going back to our
function where we're creating it, we're doing the build pipes.
We see that we're creating pipe one and pipe two.
So that's where we're dividing it by two to get the actual number that we have to create.
And then depending on how many have run off the screen, we're going to loop through and there's probably
only one at a time each time, but just in case, we're going to make it dynamic and loop through the
number of values within counter.
And then here we can build pipes and we're going to set our start position to zero.
So going into here, our start position is going to be zero, so once it runs off of the screen to the
left hand side, then it's going to regenerate and show up back on the right hand side.
So I'm going to make the small and then I'm going to increase the size of the screen so that you can
see what's happening.
So once we make it big again, you can see that these are moving along.
And then, of course, next we have to introduce that obstacle collision.
So you see that once it reaches the end, it automatically shows up.
After on the right hand side and also take a close look at the number of values so they have the incrementing
no values of which pipe it is.
So we've got three that have already gone and now we've created three more.
So we've created four or five, six.
So we're also adding in the numbers.
So now seven, eight and nine are going to show up.
So go ahead and add this into your project.
Add in the ability to animate and to move our obstacles.
The next we're going to have to detect obstacle collision so colliding between the bird and any one
of the pipes.
So that's coming up next.