In this lesson, we're going to add in some road lines, first of all, going into our success, let's
create that line.
We're going to position the line absolute, just as we did with the car, because it's going to sit
on top of the road and background color of the line is going to be white.
So now we need to add the lines into our page and move them along as the road is moving along.
So we've got our car, I'm going to get rid of these console messages so now we can focus and track
on the lines themselves and I want to have the lines moving down the center of the page.
So as we start the game, this is where we can generate the lines and then add them dynamically onto
the page, so just before we build out the car so the car can go on top of the lines, we're going to
build out the different lines on the page.
So creating a loop setting X to zero, looping while X is less than five.
How about we create five lines so we can break out of our loop?
And then here is where we're going to create those diffs using what we did before with document create
element.
The element that we're creating is if we're going to add a class to the diff.
So using that div object, we can this time we can do a class list to have something different class
list add and we're adding the value of line and then we need to set a position of it.
So this is the default position of where we're positioning the line.
So setting that up to be and just as we added in positions here for style top position, we can do the
same thing for the line.
So style top.
So let's set the top position to X times.
So we're generating out all of the different lines there and then setting them as picks, and then lastly,
we need to append them to our game area.
So just as we did with the car, we're going to attend the line to those.
So try that out.
So welcome message and we get a bunch of lines there so they're not exactly being positioned center.
So we need to make sure that they are being positioned center.
So going back to where we set the positioning, so instead of margin auto, we'll do margin left.
And we know the road width is 200 picks, our width is 10 picks, so we're going to divide that in half.
So that's going to give us a left margin of 95.
So now we've got our lines for the road.
Got five of them there.
You need to create more.
You can create more as well.
And we need to get them moving.
So the next lesson, we're going to continue to build out the lines and we're going to have them moving
as the game is looping and as you guessed it, we're going to place it within the animation frame where
we've got to play a game.
And this way we can select all of those elements with the class of line and update their positions.
So that's still to come in the next lesson.
So go ahead and update, add in the costs for the line, generate them once we hit the start button
and I'll show you how to get them moving in the next lesson.