1
00:00:00,060 --> 00:00:06,360
This is a second part to getting the lines moving, so as we see, we've got lines on our road, but

2
00:00:06,360 --> 00:00:08,190
they're not moving, so we need to get them moving.

3
00:00:08,190 --> 00:00:11,250
And the way that we're going to get them moving is within the plate game.

4
00:00:11,490 --> 00:00:18,360
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

5
00:00:18,360 --> 00:00:19,980
a function to move the lines.

6
00:00:20,340 --> 00:00:26,010
So I prefer to create a function that's going to move the lines so we can invoke that and have that

7
00:00:26,010 --> 00:00:29,600
completely separate of the movement of our car.

8
00:00:31,190 --> 00:00:37,370
So setting up that function, that's going to move lines, we need to use Querrey, select for all and

9
00:00:37,370 --> 00:00:43,160
select those elements as an object, and we created those elements with a class of line, an object

10
00:00:43,160 --> 00:00:45,560
called lines using document.

11
00:00:46,280 --> 00:00:51,890
In this case, we're using query selector all because once, like all of the elements with the class

12
00:00:51,890 --> 00:00:58,470
of line, and then we can loop through all of those elements, let's loop through the lines object.

13
00:00:58,490 --> 00:01:04,520
So this is a node list and we can use the for each to loop through each one of those items, creating

14
00:01:04,520 --> 00:01:11,300
a function and we can grab those by using item and we're going to need to have a variable for its Y

15
00:01:11,300 --> 00:01:11,830
position.

16
00:01:12,110 --> 00:01:18,490
So just as we set it for the car, we can also set it for our line as well.

17
00:01:18,740 --> 00:01:25,790
So as we're generating out those lines, we can take that element and we can give it a Y position and

18
00:01:25,790 --> 00:01:30,530
that Y position will be whatever the value of X times one is.

19
00:01:32,670 --> 00:01:40,140
So that's a starting position of why and then we can use that value of why, so as we're looping through,

20
00:01:40,350 --> 00:01:45,920
we can see console log item and we can see a value of Y for each one of those items.

21
00:01:46,320 --> 00:01:48,060
So just make sure that it is working.

22
00:01:48,900 --> 00:01:56,190
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

23
00:01:56,190 --> 00:01:58,190
greater than 750.

24
00:01:58,770 --> 00:02:07,350
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

25
00:02:07,350 --> 00:02:12,290
the value of Y to minus 750.

26
00:02:12,600 --> 00:02:21,990
And then what we need to do is we need to set the value of item style top to be equal to item.

27
00:02:23,500 --> 00:02:26,830
Why plus pics, so just as we did before.

28
00:02:28,990 --> 00:02:30,160
And then we take item.

29
00:02:32,100 --> 00:02:39,360
Item Y and we're going to increment it by the value of player speed.

30
00:02:41,970 --> 00:02:48,090
So let's see how that looks, so start that up and actually this is reversed because we're adding to

31
00:02:48,090 --> 00:02:49,340
it, so we're not setting equal.

32
00:02:49,350 --> 00:02:52,410
Plus, if we do it that way, then it's always going to be five.

33
00:02:52,590 --> 00:02:53,750
And the same with this one here.

34
00:02:53,760 --> 00:02:57,480
We need to minus minus the 750 off of it.

35
00:02:57,960 --> 00:02:58,910
So let's refresh.

36
00:02:59,430 --> 00:03:04,710
And so now we see that we've got these lines that are running and they're running all the way down.

37
00:03:05,070 --> 00:03:08,730
So we actually need to do a little bit something a little bit different as well for this.

38
00:03:09,330 --> 00:03:14,460
So maybe let's subtract even more off of it so we can do a thousand off of it.

39
00:03:15,560 --> 00:03:16,840
Let's try that one more time.

40
00:03:20,360 --> 00:03:26,160
So let's create some additional lines, so create 10 lines and so it's going to be a max width of 1500.

41
00:03:26,480 --> 00:03:28,800
And so now they're checking for 750.

42
00:03:29,030 --> 00:03:32,300
Let's check for max of 1500.

43
00:03:33,760 --> 00:03:35,920
So now we've got all of the lines showing up.

44
00:03:40,220 --> 00:03:46,280
And we also have our car moving, so we've got it moving across the line, so notice that it's on top

45
00:03:46,280 --> 00:03:48,890
of the lines because we added that element afterwards.

46
00:03:49,520 --> 00:03:52,690
So go ahead and add in the lines for your road.

47
00:03:53,240 --> 00:03:58,520
And coming up next, we need to create some cars that are going to be obstacles within the game that's

48
00:03:58,520 --> 00:04:00,020
still to come in the upcoming lessons.