This lesson we're going to be adding in a road for our car to drive on, so I'm updating the default
positioning and I'm going to take margin auto so that it automatically centers on screen because that's
where I want to position the road as well.
And the road is actually going to be the entire game area that we're using that we constructed earlier,
setting up a background color for it and we'll set up a background color of black.
And this is the width of the road.
How about we do 200 picks width and the height of it is going to be one hundred percent.
So going right from top and bottom will hide any of the overflow of that element.
And we want to position it, we're positioning it relative and also center it so margin auto will center
that road.
So let's refresh and see what we got.
So we've got a car on the road and our car can actually move off of the road.
So we need to take care of that and handle that, that the car is moving off of the road.
So now we can detect that using our JavaScript, we can detect a bounding box.
So or we could just call this road and equal that to the game area.
So let's remember the road that we set up earlier, this is the game area or the road, in other words,
and taking that road value.
So we're setting it up and taking game area.
We use a method called get bounding client rectangle value.
And what get bounding client rectangle does is it essentially gets the size of an element and its relative
position to the viewpoint get bounding rectangle value and that's going to return back the top right
bottom x y height and width of that particular element going into our code.
When I console log out the value of a road, you're going to see that this isn't within an object format
and also going to get rid of the inplay.
So it refresh, click it and you can see now we're getting the bounding of the road so we know where
the X and Y position is.
We also know the width of it, the height and the top.
So I know quite a bit of information.
We also know where the right position, top left position, bottom position and all of this information
we can then use in order to determine where our boundaries are.
So we don't actually need it to restrict the left movement because the left movement is going to be
located at wherever the position of player exits, and we see that by default, if we list out the value
of player X, it's going to be zero.
So we just need to make sure that Player X is greater than zero before we try to subtract off of it.
So try that out and we see that it is zero.
So now we can't move off of the left side of the road.
We also want to make sure that we can't move off of the right side of the road.
So again, that player X value and adding it in.
So whenever we're moving along the horizontal line, you see that the player X value is once it hits
roughly around 145, then that's where we need to stop that from moving over.
And when we use that bounding box, I've got a position there of left position and right position and
I also have a width.
So we want to make sure that the position of X doesn't exceed the width position of the particular road.
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.
But we see that we're still moving off to the right and we're going all the way to 215.
So we need to make one quick adjustment and that's calculating out the width of that particular element.
And we know that we did set a default width so we can just use that 50 pic's.
So minus thing off of that value road minus.
So that was one quick adjustment, adjusting for the width of that particular element.
And now we see that we can't move off of the side of the road and it actually is a little bit bigger.
So let's do 60 picks.
We'll try that out and just make sure that we're not able to move off of the site where instead of Road
X, we could do road with minus 50, and that will give us the exact position to the right hand side.
So we also need to make that for what, the up arrow and what the downhole arrow is.
And in this case, we want to try to box in the player's movements to a particular area here so we don't
want them moving all the way up to the top.
We don't want them moving all the way to the bottom either.
So we want to restrict some of that.
So let's take a look at that code and add in some additional values.
So over here, we're incrementing the value of player Y, so taking the value of player Y, we want
to make sure that the value of player Y going into our rectangle are bound rectangle.
We want to make sure that it's less than the container bottom and we're not going to go underneath the
bottom and we can do the something else for the top as well.
So making sure that player Y is greater than and we've got a value for top, so let's do that.
So adding road top value and now we can move to roughly around somewhere close to the top and we don't
we can't move to the bottom.
And if I make this bigger.
So if we refresh, we're still restricted to whatever the current size of that particular bounding area
is.
And also it allows us to have some flexibility with our app.
As long as we're not moving off of the side of the road.
You can see that I'm still bound to those restrictive conditions that we had earlier.
So go ahead and add this into your application.
So we've added in a road and next we need to make it look like a road.
So it's coming up in the next lesson where we're going to build this out and we're going to put lines
that are going down.
So that's going to indicate that this is an actual road that's still to come in the upcoming lesson.