1
00:00:00,760 --> 00:00:02,660
Hello and welcome back.

2
00:00:02,680 --> 00:00:07,050
How is your project coming along in this lesson we're going to make the pipes move.

3
00:00:07,090 --> 00:00:09,220
So in the earlier lessons, we created a bird.

4
00:00:09,430 --> 00:00:16,240
We have them moving around the screen and we also created a series of pipes that are going to act as

5
00:00:16,240 --> 00:00:18,490
obstacles that the bird has to fly through.

6
00:00:18,820 --> 00:00:21,750
So we need to have them moving across the screen.

7
00:00:22,420 --> 00:00:26,340
So let's add that in and in this lesson, we're going to accomplish that movement.

8
00:00:26,950 --> 00:00:32,890
So within the plea game method, this is where we can add in the movement of the pipes.

9
00:00:33,550 --> 00:00:39,430
So adding in move pipes and we'll pass in our bird object.

10
00:00:40,480 --> 00:00:46,960
And that means that we need to move the pipes after we select the element with the class of bird.

11
00:00:47,860 --> 00:00:49,640
Now, let's create that function.

12
00:00:50,470 --> 00:00:56,950
So this is the function where we want to move the obstacles across the screen so that the player can

13
00:00:56,950 --> 00:01:04,050
interact with them, creating our function called move pipes, and we're passing in the bird object.

14
00:01:04,690 --> 00:01:06,190
So it's our player character.

15
00:01:06,400 --> 00:01:08,550
Let's select all of the lines.

16
00:01:08,590 --> 00:01:16,680
So creating an object that we can use to store all of our lines and then using query selector all.

17
00:01:16,760 --> 00:01:24,160
So we're going to select all of the elements that have a class of pipe and add them into a node list.

18
00:01:24,350 --> 00:01:28,660
Also, we're going to need a counter for counting how many pipes we've gone through.

19
00:01:29,410 --> 00:01:37,600
So looping through all of the items within the node list, we can output that as for each and then have

20
00:01:37,600 --> 00:01:40,850
a function that returns back the item information.

21
00:01:41,620 --> 00:01:47,530
So this is going to return back each and every pipe and each pipe is going to be indicated under item

22
00:01:48,370 --> 00:01:51,020
will log that out for now so you can see what that looks like.

23
00:01:51,430 --> 00:01:57,490
So see, we get a whole bunch of elements that are being loaded here and we're getting them output into

24
00:01:57,490 --> 00:01:58,180
our console.

25
00:01:58,450 --> 00:02:02,640
And these are indicate the different pipes that we have on our screen.

26
00:02:03,280 --> 00:02:07,980
So we want to do is we want to adjust their style attributes and move them.

27
00:02:08,800 --> 00:02:14,260
So taking our item X value and remember, we have a set of pipe X values.

28
00:02:14,260 --> 00:02:20,230
So for each one of the pipes, we've got an X value and we're going to move it, subtracting out the

29
00:02:20,230 --> 00:02:26,130
player speed from it, and then we can take that item and we can update it.

30
00:02:26,190 --> 00:02:29,590
So playing a style left value to it.

31
00:02:30,920 --> 00:02:37,070
And then using that item X value that we just created, apply that new position for that element.

32
00:02:37,250 --> 00:02:38,400
So let's see what happens now.

33
00:02:38,900 --> 00:02:42,920
So this time when I press start, you can see that we've got them moving.

34
00:02:43,910 --> 00:02:51,800
So next to that, we need to do is we need to make sure that once they reach once the X is less than

35
00:02:51,800 --> 00:02:58,910
zero, then we want to restart them and we want to remove them from our screen, increase the counter

36
00:02:58,910 --> 00:03:01,940
value and then add them in.

37
00:03:01,940 --> 00:03:03,050
So build some more pipe.

38
00:03:03,080 --> 00:03:11,960
So now we can apply that check checking to see if item X value is less than less than zero and if it

39
00:03:11,960 --> 00:03:12,350
is.

40
00:03:13,470 --> 00:03:17,580
They were taking the item and selecting its parent element.

41
00:03:19,200 --> 00:03:25,290
And then from the parent element, we're going to remove the child that matches the value of item,

42
00:03:25,300 --> 00:03:31,950
so effectively what this will do is this will remove it from our visible area and we're going to increment

43
00:03:31,950 --> 00:03:33,240
the counter by one.

44
00:03:33,420 --> 00:03:40,050
So this way we know how many pipes we've removed, counts pipes to remove.

45
00:03:40,320 --> 00:03:45,510
And because for each one of those, there's a top one and a bottom one, that means that we have to

46
00:03:45,510 --> 00:03:47,660
divide that value of counter by two.

47
00:03:48,360 --> 00:03:49,530
So taking count.

48
00:03:49,560 --> 00:03:55,950
So this is how many we actually have to create, because when we create the pipe so going back to our

49
00:03:55,950 --> 00:03:58,830
function where we're creating it, we're doing the build pipes.

50
00:03:59,520 --> 00:04:02,970
We see that we're creating pipe one and pipe two.

51
00:04:03,480 --> 00:04:07,650
So that's where we're dividing it by two to get the actual number that we have to create.

52
00:04:08,740 --> 00:04:14,260
And then depending on how many have run off the screen, we're going to loop through and there's probably

53
00:04:14,260 --> 00:04:20,170
only one at a time each time, but just in case, we're going to make it dynamic and loop through the

54
00:04:20,170 --> 00:04:22,540
number of values within counter.

55
00:04:23,020 --> 00:04:28,900
And then here we can build pipes and we're going to set our start position to zero.

56
00:04:29,990 --> 00:04:35,810
So going into here, our start position is going to be zero, so once it runs off of the screen to the

57
00:04:35,810 --> 00:04:40,240
left hand side, then it's going to regenerate and show up back on the right hand side.

58
00:04:41,420 --> 00:04:45,980
So I'm going to make the small and then I'm going to increase the size of the screen so that you can

59
00:04:45,980 --> 00:04:46,800
see what's happening.

60
00:04:46,850 --> 00:04:51,370
So once we make it big again, you can see that these are moving along.

61
00:04:51,710 --> 00:04:55,130
And then, of course, next we have to introduce that obstacle collision.

62
00:04:55,580 --> 00:05:00,530
So you see that once it reaches the end, it automatically shows up.

63
00:05:02,960 --> 00:05:09,890
After on the right hand side and also take a close look at the number of values so they have the incrementing

64
00:05:09,890 --> 00:05:12,590
no values of which pipe it is.

65
00:05:12,890 --> 00:05:16,430
So we've got three that have already gone and now we've created three more.

66
00:05:16,430 --> 00:05:17,950
So we've created four or five, six.

67
00:05:18,320 --> 00:05:20,190
So we're also adding in the numbers.

68
00:05:20,390 --> 00:05:23,130
So now seven, eight and nine are going to show up.

69
00:05:23,750 --> 00:05:26,000
So go ahead and add this into your project.

70
00:05:26,330 --> 00:05:31,010
Add in the ability to animate and to move our obstacles.

71
00:05:31,200 --> 00:05:37,370
The next we're going to have to detect obstacle collision so colliding between the bird and any one

72
00:05:37,370 --> 00:05:37,960
of the pipes.

73
00:05:38,360 --> 00:05:39,350
So that's coming up next.