1 00:00:00,360 --> 00:00:06,660 This lesson we're going to be adding in a road for our car to drive on, so I'm updating the default 2 00:00:06,660 --> 00:00:14,070 positioning and I'm going to take margin auto so that it automatically centers on screen because that's 3 00:00:14,070 --> 00:00:16,170 where I want to position the road as well. 4 00:00:16,320 --> 00:00:21,810 And the road is actually going to be the entire game area that we're using that we constructed earlier, 5 00:00:22,080 --> 00:00:27,670 setting up a background color for it and we'll set up a background color of black. 6 00:00:28,530 --> 00:00:30,390 And this is the width of the road. 7 00:00:30,920 --> 00:00:36,420 How about we do 200 picks width and the height of it is going to be one hundred percent. 8 00:00:36,420 --> 00:00:41,970 So going right from top and bottom will hide any of the overflow of that element. 9 00:00:43,060 --> 00:00:51,460 And we want to position it, we're positioning it relative and also center it so margin auto will center 10 00:00:51,460 --> 00:00:52,030 that road. 11 00:00:52,450 --> 00:00:54,410 So let's refresh and see what we got. 12 00:00:54,730 --> 00:00:59,230 So we've got a car on the road and our car can actually move off of the road. 13 00:00:59,530 --> 00:01:04,200 So we need to take care of that and handle that, that the car is moving off of the road. 14 00:01:04,480 --> 00:01:11,290 So now we can detect that using our JavaScript, we can detect a bounding box. 15 00:01:12,670 --> 00:01:19,380 So or we could just call this road and equal that to the game area. 16 00:01:21,230 --> 00:01:27,140 So let's remember the road that we set up earlier, this is the game area or the road, in other words, 17 00:01:27,980 --> 00:01:30,400 and taking that road value. 18 00:01:30,410 --> 00:01:33,410 So we're setting it up and taking game area. 19 00:01:33,420 --> 00:01:37,580 We use a method called get bounding client rectangle value. 20 00:01:37,910 --> 00:01:45,290 And what get bounding client rectangle does is it essentially gets the size of an element and its relative 21 00:01:45,290 --> 00:01:51,680 position to the viewpoint get bounding rectangle value and that's going to return back the top right 22 00:01:51,890 --> 00:01:57,070 bottom x y height and width of that particular element going into our code. 23 00:01:57,080 --> 00:02:03,350 When I console log out the value of a road, you're going to see that this isn't within an object format 24 00:02:03,680 --> 00:02:05,720 and also going to get rid of the inplay. 25 00:02:05,810 --> 00:02:12,500 So it refresh, click it and you can see now we're getting the bounding of the road so we know where 26 00:02:12,500 --> 00:02:14,740 the X and Y position is. 27 00:02:15,020 --> 00:02:18,200 We also know the width of it, the height and the top. 28 00:02:18,410 --> 00:02:20,050 So I know quite a bit of information. 29 00:02:20,060 --> 00:02:27,050 We also know where the right position, top left position, bottom position and all of this information 30 00:02:27,050 --> 00:02:32,150 we can then use in order to determine where our boundaries are. 31 00:02:34,590 --> 00:02:39,990 So we don't actually need it to restrict the left movement because the left movement is going to be 32 00:02:39,990 --> 00:02:46,800 located at wherever the position of player exits, and we see that by default, if we list out the value 33 00:02:46,800 --> 00:02:49,280 of player X, it's going to be zero. 34 00:02:49,530 --> 00:02:55,520 So we just need to make sure that Player X is greater than zero before we try to subtract off of it. 35 00:02:55,740 --> 00:02:57,850 So try that out and we see that it is zero. 36 00:02:58,320 --> 00:03:01,210 So now we can't move off of the left side of the road. 37 00:03:01,560 --> 00:03:05,020 We also want to make sure that we can't move off of the right side of the road. 38 00:03:05,370 --> 00:03:08,560 So again, that player X value and adding it in. 39 00:03:08,580 --> 00:03:14,850 So whenever we're moving along the horizontal line, you see that the player X value is once it hits 40 00:03:14,850 --> 00:03:20,940 roughly around 145, then that's where we need to stop that from moving over. 41 00:03:21,120 --> 00:03:29,070 And when we use that bounding box, I've got a position there of left position and right position and 42 00:03:29,070 --> 00:03:30,270 I also have a width. 43 00:03:30,490 --> 00:03:38,400 So we want to make sure that the position of X doesn't exceed the width position of the particular road. 44 00:03:38,790 --> 00:03:47,220 So taking X and making sure that X is less, then let's try that out and now we can move it to the right. 45 00:03:47,430 --> 00:03:51,410 But we see that we're still moving off to the right and we're going all the way to 215. 46 00:03:51,660 --> 00:03:58,200 So we need to make one quick adjustment and that's calculating out the width of that particular element. 47 00:03:58,200 --> 00:04:02,250 And we know that we did set a default width so we can just use that 50 pic's. 48 00:04:02,460 --> 00:04:06,570 So minus thing off of that value road minus. 49 00:04:07,380 --> 00:04:12,000 So that was one quick adjustment, adjusting for the width of that particular element. 50 00:04:12,180 --> 00:04:17,600 And now we see that we can't move off of the side of the road and it actually is a little bit bigger. 51 00:04:17,610 --> 00:04:19,190 So let's do 60 picks. 52 00:04:19,200 --> 00:04:24,780 We'll try that out and just make sure that we're not able to move off of the site where instead of Road 53 00:04:25,080 --> 00:04:32,300 X, we could do road with minus 50, and that will give us the exact position to the right hand side. 54 00:04:32,790 --> 00:04:38,520 So we also need to make that for what, the up arrow and what the downhole arrow is. 55 00:04:38,820 --> 00:04:44,460 And in this case, we want to try to box in the player's movements to a particular area here so we don't 56 00:04:44,460 --> 00:04:46,710 want them moving all the way up to the top. 57 00:04:46,890 --> 00:04:49,200 We don't want them moving all the way to the bottom either. 58 00:04:49,770 --> 00:04:51,390 So we want to restrict some of that. 59 00:04:51,600 --> 00:04:55,640 So let's take a look at that code and add in some additional values. 60 00:04:55,920 --> 00:05:03,360 So over here, we're incrementing the value of player Y, so taking the value of player Y, we want 61 00:05:03,360 --> 00:05:09,030 to make sure that the value of player Y going into our rectangle are bound rectangle. 62 00:05:09,330 --> 00:05:14,520 We want to make sure that it's less than the container bottom and we're not going to go underneath the 63 00:05:14,520 --> 00:05:18,000 bottom and we can do the something else for the top as well. 64 00:05:18,000 --> 00:05:25,220 So making sure that player Y is greater than and we've got a value for top, so let's do that. 65 00:05:25,890 --> 00:05:33,960 So adding road top value and now we can move to roughly around somewhere close to the top and we don't 66 00:05:34,170 --> 00:05:35,280 we can't move to the bottom. 67 00:05:35,520 --> 00:05:36,910 And if I make this bigger. 68 00:05:37,650 --> 00:05:43,860 So if we refresh, we're still restricted to whatever the current size of that particular bounding area 69 00:05:43,860 --> 00:05:44,160 is. 70 00:05:44,640 --> 00:05:49,230 And also it allows us to have some flexibility with our app. 71 00:05:49,230 --> 00:05:51,900 As long as we're not moving off of the side of the road. 72 00:05:52,050 --> 00:05:57,000 You can see that I'm still bound to those restrictive conditions that we had earlier. 73 00:05:57,660 --> 00:05:59,940 So go ahead and add this into your application. 74 00:05:59,940 --> 00:06:03,420 So we've added in a road and next we need to make it look like a road. 75 00:06:03,570 --> 00:06:08,160 So it's coming up in the next lesson where we're going to build this out and we're going to put lines 76 00:06:08,160 --> 00:06:08,970 that are going down. 77 00:06:08,970 --> 00:06:13,020 So that's going to indicate that this is an actual road that's still to come in the upcoming lesson.