1
00:00:00,670 --> 00:00:05,290
We have the movement that we created in the last lesson, but we also noticed that we are able to go

2
00:00:05,290 --> 00:00:06,010
out of balance.

3
00:00:06,250 --> 00:00:07,480
So that's not ideal.

4
00:00:07,510 --> 00:00:13,750
And we want to limit the ability to go out of the balance of the main container and for some of the

5
00:00:13,750 --> 00:00:15,550
values, that's going to be fairly simple.

6
00:00:15,700 --> 00:00:20,160
So what we need to do is check to see if it's the left arrow.

7
00:00:20,200 --> 00:00:26,610
And we're also going to check to make sure that bound basket X is greater than zero.

8
00:00:27,310 --> 00:00:28,900
So we can refresh that.

9
00:00:28,900 --> 00:00:32,460
And now we're not able to move off of that boundary.

10
00:00:32,500 --> 00:00:34,590
So we've got that boundary being restricted.

11
00:00:34,930 --> 00:00:42,650
We can do the same thing for Y when we're subtracting to make sure that Y is greater than zero.

12
00:00:43,530 --> 00:00:44,920
So this is going to work the same way.

13
00:00:44,920 --> 00:00:49,510
That's going to allow us to constrain that element, to not move out of the boundaries.

14
00:00:49,930 --> 00:00:52,400
And the other side is going to be a little bit more trickier.

15
00:00:52,630 --> 00:01:00,130
So let's set up an object and the same thing that we did with Bound Basket, we're going to set up a

16
00:01:00,130 --> 00:01:05,140
value for bound container and using the container object.

17
00:01:05,890 --> 00:01:08,470
And first, of course, we do need to set that.

18
00:01:08,500 --> 00:01:16,450
So let's set up a container as an object and then now we can use the container object and we can get

19
00:01:16,690 --> 00:01:18,790
get bounding client rectangle.

20
00:01:19,410 --> 00:01:24,340
So that's going to turn bounding client rectangle is going to give us all of those parameters that we

21
00:01:24,340 --> 00:01:26,440
saw in the other object.

22
00:01:26,620 --> 00:01:33,550
And now we can utilize that to determine where the sides of the container are located.

23
00:01:33,850 --> 00:01:41,770
So going right, we want to make sure that bound basket X and I'll make this bigger because this is

24
00:01:41,770 --> 00:01:43,150
going to be a long statement.

25
00:01:43,630 --> 00:01:47,940
We're making sure that bound basket X is less.

26
00:01:47,950 --> 00:01:53,440
And this is where we're going to have to do some calculating where we're going to take that bound container

27
00:01:53,920 --> 00:02:01,180
object and take its width, subtracting the bound basket object width.

28
00:02:01,390 --> 00:02:05,790
And that will give us that position on the right hand side.

29
00:02:06,250 --> 00:02:09,630
And we also need to do the same thing for down.

30
00:02:09,970 --> 00:02:18,730
So adding in another condition or we take the bound basket y value and make sure that it's less then

31
00:02:18,880 --> 00:02:27,820
and then the values here that we're looking for is the bound container height minus the bound basket

32
00:02:28,270 --> 00:02:28,840
height.

33
00:02:29,260 --> 00:02:33,420
So let's try that it so going and do a quick refresh start.

34
00:02:33,760 --> 00:02:40,450
So now we've got our object is contained within the parameters of that mean container element.

35
00:02:40,670 --> 00:02:47,260
So ready to move on to the next step where we can introduce the bad guys and then have them animated

36
00:02:47,260 --> 00:02:47,790
and moving.

37
00:02:48,070 --> 00:02:54,340
And then next we need to do also collision detection to check to see if the player is over the bad guys

38
00:02:54,340 --> 00:02:55,460
and if it's picking them up.

39
00:02:55,480 --> 00:02:58,600
So that is all still yet to come in the upcoming lessons.