1
00:00:00,150 --> 00:00:04,470
Call this one at the box chaser game, because it just makes sense, we've got a bunch of boxes.

2
00:00:04,620 --> 00:00:05,490
You're the red box.

3
00:00:05,520 --> 00:00:08,850
You've got to move it over the green box until you hit the green box.

4
00:00:08,860 --> 00:00:11,040
Then that's the real objective of the game.

5
00:00:11,190 --> 00:00:16,830
And really the objective here, the learning objective is to learn how to use JavaScript in order to

6
00:00:16,830 --> 00:00:22,620
create elements and build this type of grid system and then also track where the element is on the grid

7
00:00:22,620 --> 00:00:25,950
system using your keyboard collision detection?

8
00:00:25,960 --> 00:00:27,390
Well, not really collision detection.

9
00:00:27,390 --> 00:00:32,280
We're just going to detect to see if the red box is on the same square as the green box.

10
00:00:32,580 --> 00:00:38,370
So this is a different way to approach that collision, to check, to see if one element is overlapping

11
00:00:38,370 --> 00:00:43,620
the other as these are all going to be subsequent within the grid and they're all going to have their

12
00:00:43,620 --> 00:00:48,120
own separate spots within the grid, which is going to be dynamically created with JavaScript, which

13
00:00:48,120 --> 00:00:52,740
means that you can expand it and make it bigger and smaller as needed and make those adjustments.

14
00:00:52,950 --> 00:00:53,610
So let me show you.

15
00:00:53,840 --> 00:00:58,680
So when we come into the game with Build So Grid, so this is all dynamically created with JavaScript

16
00:00:58,830 --> 00:01:00,570
and it listens for key presses.

17
00:01:00,720 --> 00:01:04,170
And whenever you press the keyboard keys, we can move through the grid.

18
00:01:04,320 --> 00:01:07,740
You can also see that we're restricted to only stay on the grid.

19
00:01:07,750 --> 00:01:09,210
So this is done with conditions.

20
00:01:09,420 --> 00:01:16,530
And then when we hit the Green Square, then it just moves, it picks another random spot and it also

21
00:01:16,530 --> 00:01:20,010
doesn't pick the same random spot that we're actually on.

22
00:01:20,190 --> 00:01:22,650
So that's another thing to consider when you're building this.

23
00:01:22,860 --> 00:01:27,810
And all of this is covered, of course, within this section to build out your own version of this fun,

24
00:01:27,810 --> 00:01:29,820
interesting interactive game.