We have the movement that we created in the last lesson, but we also noticed that we are able to go
out of balance.
So that's not ideal.
And we want to limit the ability to go out of the balance of the main container and for some of the
values, that's going to be fairly simple.
So what we need to do is check to see if it's the left arrow.
And we're also going to check to make sure that bound basket X is greater than zero.
So we can refresh that.
And now we're not able to move off of that boundary.
So we've got that boundary being restricted.
We can do the same thing for Y when we're subtracting to make sure that Y is greater than zero.
So this is going to work the same way.
That's going to allow us to constrain that element, to not move out of the boundaries.
And the other side is going to be a little bit more trickier.
So let's set up an object and the same thing that we did with Bound Basket, we're going to set up a
value for bound container and using the container object.
And first, of course, we do need to set that.
So let's set up a container as an object and then now we can use the container object and we can get
get bounding client rectangle.
So that's going to turn bounding client rectangle is going to give us all of those parameters that we
saw in the other object.
And now we can utilize that to determine where the sides of the container are located.
So going right, we want to make sure that bound basket X and I'll make this bigger because this is
going to be a long statement.
We're making sure that bound basket X is less.
And this is where we're going to have to do some calculating where we're going to take that bound container
object and take its width, subtracting the bound basket object width.
And that will give us that position on the right hand side.
And we also need to do the same thing for down.
So adding in another condition or we take the bound basket y value and make sure that it's less then
and then the values here that we're looking for is the bound container height minus the bound basket
height.
So let's try that it so going and do a quick refresh start.
So now we've got our object is contained within the parameters of that mean container element.
So ready to move on to the next step where we can introduce the bad guys and then have them animated
and moving.
And then next we need to do also collision detection to check to see if the player is over the bad guys
and if it's picking them up.
So that is all still yet to come in the upcoming lessons.