This is a second part to getting the lines moving, so as we see, we've got lines on our road, but
they're not moving, so we need to get them moving.
And the way that we're going to get them moving is within the plate game.
We've got a number of options that we can move them along so we can set up a loop here or it can create
a function to move the lines.
So I prefer to create a function that's going to move the lines so we can invoke that and have that
completely separate of the movement of our car.
So setting up that function, that's going to move lines, we need to use Querrey, select for all and
select those elements as an object, and we created those elements with a class of line, an object
called lines using document.
In this case, we're using query selector all because once, like all of the elements with the class
of line, and then we can loop through all of those elements, let's loop through the lines object.
So this is a node list and we can use the for each to loop through each one of those items, creating
a function and we can grab those by using item and we're going to need to have a variable for its Y
position.
So just as we set it for the car, we can also set it for our line as well.
So as we're generating out those lines, we can take that element and we can give it a Y position and
that Y position will be whatever the value of X times one is.
So that's a starting position of why and then we can use that value of why, so as we're looping through,
we can see console log item and we can see a value of Y for each one of those items.
So just make sure that it is working.
So you see that we've got all of those value of Y's and we can do a condition to check if item Y is
greater than 750.
And if it is, then we're going to reset the value of item Y to be zero or we're going to actually set
the value of Y to minus 750.
And then what we need to do is we need to set the value of item style top to be equal to item.
Why plus pics, so just as we did before.
And then we take item.
Item Y and we're going to increment it by the value of player speed.
So let's see how that looks, so start that up and actually this is reversed because we're adding to
it, so we're not setting equal.
Plus, if we do it that way, then it's always going to be five.
And the same with this one here.
We need to minus minus the 750 off of it.
So let's refresh.
And so now we see that we've got these lines that are running and they're running all the way down.
So we actually need to do a little bit something a little bit different as well for this.
So maybe let's subtract even more off of it so we can do a thousand off of it.
Let's try that one more time.
So let's create some additional lines, so create 10 lines and so it's going to be a max width of 1500.
And so now they're checking for 750.
Let's check for max of 1500.
So now we've got all of the lines showing up.
And we also have our car moving, so we've got it moving across the line, so notice that it's on top
of the lines because we added that element afterwards.
So go ahead and add in the lines for your road.
And coming up next, we need to create some cars that are going to be obstacles within the game that's
still to come in the upcoming lessons.