1 00:00:00,600 --> 00:00:06,570 In this lesson, we're going to add in some road lines, first of all, going into our success, let's 2 00:00:06,570 --> 00:00:07,500 create that line. 3 00:00:08,490 --> 00:00:13,380 We're going to position the line absolute, just as we did with the car, because it's going to sit 4 00:00:13,380 --> 00:00:17,430 on top of the road and background color of the line is going to be white. 5 00:00:18,030 --> 00:00:24,170 So now we need to add the lines into our page and move them along as the road is moving along. 6 00:00:25,240 --> 00:00:31,630 So we've got our car, I'm going to get rid of these console messages so now we can focus and track 7 00:00:31,630 --> 00:00:36,580 on the lines themselves and I want to have the lines moving down the center of the page. 8 00:00:37,900 --> 00:00:44,500 So as we start the game, this is where we can generate the lines and then add them dynamically onto 9 00:00:44,500 --> 00:00:50,530 the page, so just before we build out the car so the car can go on top of the lines, we're going to 10 00:00:50,530 --> 00:00:53,640 build out the different lines on the page. 11 00:00:54,550 --> 00:00:59,340 So creating a loop setting X to zero, looping while X is less than five. 12 00:00:59,350 --> 00:01:01,990 How about we create five lines so we can break out of our loop? 13 00:01:02,170 --> 00:01:08,380 And then here is where we're going to create those diffs using what we did before with document create 14 00:01:08,770 --> 00:01:09,250 element. 15 00:01:09,310 --> 00:01:13,210 The element that we're creating is if we're going to add a class to the diff. 16 00:01:13,450 --> 00:01:18,490 So using that div object, we can this time we can do a class list to have something different class 17 00:01:18,490 --> 00:01:24,040 list add and we're adding the value of line and then we need to set a position of it. 18 00:01:24,070 --> 00:01:27,600 So this is the default position of where we're positioning the line. 19 00:01:28,000 --> 00:01:35,890 So setting that up to be and just as we added in positions here for style top position, we can do the 20 00:01:35,890 --> 00:01:37,390 same thing for the line. 21 00:01:37,690 --> 00:01:38,960 So style top. 22 00:01:39,190 --> 00:01:42,940 So let's set the top position to X times. 23 00:01:44,230 --> 00:01:50,680 So we're generating out all of the different lines there and then setting them as picks, and then lastly, 24 00:01:50,860 --> 00:01:55,020 we need to append them to our game area. 25 00:01:55,270 --> 00:01:59,590 So just as we did with the car, we're going to attend the line to those. 26 00:02:00,370 --> 00:02:01,180 So try that out. 27 00:02:01,330 --> 00:02:07,840 So welcome message and we get a bunch of lines there so they're not exactly being positioned center. 28 00:02:08,320 --> 00:02:11,240 So we need to make sure that they are being positioned center. 29 00:02:11,620 --> 00:02:19,960 So going back to where we set the positioning, so instead of margin auto, we'll do margin left. 30 00:02:20,850 --> 00:02:27,640 And we know the road width is 200 picks, our width is 10 picks, so we're going to divide that in half. 31 00:02:27,870 --> 00:02:31,620 So that's going to give us a left margin of 95. 32 00:02:32,820 --> 00:02:35,330 So now we've got our lines for the road. 33 00:02:36,030 --> 00:02:37,020 Got five of them there. 34 00:02:37,140 --> 00:02:37,920 You need to create more. 35 00:02:37,920 --> 00:02:39,030 You can create more as well. 36 00:02:39,330 --> 00:02:40,560 And we need to get them moving. 37 00:02:41,700 --> 00:02:47,250 So the next lesson, we're going to continue to build out the lines and we're going to have them moving 38 00:02:47,250 --> 00:02:53,010 as the game is looping and as you guessed it, we're going to place it within the animation frame where 39 00:02:53,010 --> 00:02:54,240 we've got to play a game. 40 00:02:54,460 --> 00:03:02,540 And this way we can select all of those elements with the class of line and update their positions. 41 00:03:02,580 --> 00:03:04,260 So that's still to come in the next lesson. 42 00:03:05,210 --> 00:03:12,080 So go ahead and update, add in the costs for the line, generate them once we hit the start button 43 00:03:12,950 --> 00:03:14,900 and I'll show you how to get them moving in the next lesson.