1 00:00:00,120 --> 00:00:05,200 Hello and welcome in this lesson, we are going to be setting up the box chaser game and it's going 2 00:00:05,200 --> 00:00:11,280 to be a unique game using JavaScript in order to create a grid and then using the keyboard actions of 3 00:00:11,280 --> 00:00:17,040 the user in order to maneuver through the grid to select the box that's green and moving through the 4 00:00:17,040 --> 00:00:17,410 grid. 5 00:00:17,460 --> 00:00:20,070 We're going to make it all dynamic with JavaScript. 6 00:00:20,310 --> 00:00:24,480 First thing we need to do is set up our basic HTML. 7 00:00:24,480 --> 00:00:29,710 So we're going to try to keep this at a minimal as possible because of course we are focused on JavaScript. 8 00:00:29,730 --> 00:00:31,310 We need a main container area. 9 00:00:31,320 --> 00:00:33,870 We're going to call it game area, creating a div. 10 00:00:34,170 --> 00:00:38,040 Also just below that, let's create another one and we can call this one. 11 00:00:38,190 --> 00:00:43,470 This is where our score will go so we can keep score of what's happening within the gameplay and assign 12 00:00:43,470 --> 00:00:48,000 this one a class of score so that we can select it within our JavaScript. 13 00:00:48,270 --> 00:00:50,520 And for now we can put a zero in there. 14 00:00:50,850 --> 00:00:53,970 We're also going to need to apply a little bit of styling as well. 15 00:00:54,090 --> 00:01:01,020 So coming into our success, let's set some dimensions for the green area and we want to try to make 16 00:01:01,020 --> 00:01:01,980 this dynamic. 17 00:01:01,980 --> 00:01:07,580 So whether we adjust the width and the height, we want the game to adjust as well. 18 00:01:07,600 --> 00:01:13,770 So we'll start out with a width of 800 and we're going to make all of the grid boxes one hundred by 19 00:01:13,770 --> 00:01:14,430 100. 20 00:01:14,670 --> 00:01:17,910 So we try to keep it within a 100 dimensions. 21 00:01:18,120 --> 00:01:23,760 So if we do 800 by 200, that will give us 16 squares within our grid. 22 00:01:23,910 --> 00:01:27,350 And then if we adjust that, that will adjust accordingly. 23 00:01:27,630 --> 00:01:30,450 We also need to set some styling for the score. 24 00:01:30,720 --> 00:01:37,380 And I'm trying to go through this really quickly, as you probably want to set your own styling and 25 00:01:37,380 --> 00:01:40,080 you can adjust the styling as needed, of course. 26 00:01:40,170 --> 00:01:43,730 And the objective of the game is going to be to move your box. 27 00:01:43,740 --> 00:01:46,950 So we're going to create an element and give it a class of box. 28 00:01:47,160 --> 00:01:52,560 So this is the main player object position, not as absolute, so that we have the ability to move it 29 00:01:52,560 --> 00:01:58,170 around, setting that as a width of one hundred height of one hundred picks as well. 30 00:01:58,290 --> 00:02:03,030 And we can also set a background color of red for that element. 31 00:02:03,030 --> 00:02:08,550 And we're going to set the left and top position dynamically with JavaScript so we can skip that part. 32 00:02:08,550 --> 00:02:10,590 Next is going to be all of the squares. 33 00:02:10,860 --> 00:02:15,210 So we're creating a grid with JavaScript, so we want to create a bunch of squares. 34 00:02:15,570 --> 00:02:21,450 So setting their position as relative to each other, we can also add in a border so that we can actually 35 00:02:21,450 --> 00:02:26,490 see our grid and we can give it a small border, give it a width. 36 00:02:26,490 --> 00:02:32,190 And because we want to stick to the 100 by 100, we've already set a border of one pic. 37 00:02:32,490 --> 00:02:34,560 So we need to keep it within those same dimensions. 38 00:02:34,560 --> 00:02:36,600 So that's why I'm setting it as Ninety-eight. 39 00:02:36,900 --> 00:02:40,860 And of course, if you don't have a border, you can set them one by one. 40 00:02:41,250 --> 00:02:47,910 We're also going to set the display and we can set that to inline block so that they stack next to each 41 00:02:47,910 --> 00:02:52,410 other and then a little bit of styling for the text to align it as a center. 42 00:02:52,710 --> 00:02:58,920 Also on a vertical, align the text to align it in the middle in in order to do that and set that, 43 00:02:59,130 --> 00:03:04,320 we need to set our line height so our line height can be one hundred pics and our font size. 44 00:03:04,560 --> 00:03:09,000 How about we make the font size two or twenty or we could do it. 45 00:03:09,000 --> 00:03:13,260 Twenty four pics we keep with pics and a color for the font. 46 00:03:13,440 --> 00:03:16,380 Make it a kind of a great out color there. 47 00:03:16,530 --> 00:03:19,260 So now we set our box, our score, our game area. 48 00:03:19,380 --> 00:03:24,660 And there's one last class that I wanted to add in and this is the octave class with JavaScript. 49 00:03:24,690 --> 00:03:30,180 We're going to be selecting one of the squares at random and applying an octave class to it. 50 00:03:30,450 --> 00:03:31,500 And this is the class. 51 00:03:31,500 --> 00:03:37,920 This is going to be objective for the player to maneuver to the square and get over that square, and 52 00:03:37,920 --> 00:03:40,380 then it will will remove the octave class. 53 00:03:40,380 --> 00:03:42,030 And this is all going to be done with Java. 54 00:03:42,240 --> 00:03:47,310 So now that we've done quite a bit of styling and of course, there's not a whole lot to see because 55 00:03:47,310 --> 00:03:53,460 we are focused on JavaScript and we're going to do most of the visuals and the display content using 56 00:03:53,460 --> 00:03:54,210 JavaScript. 57 00:03:54,210 --> 00:03:57,060 So go ahead and set up your basic game area. 58 00:03:57,360 --> 00:04:04,470 And coming up next, we're going to be using JavaScript in order to build out our game board and then 59 00:04:04,470 --> 00:04:08,430 also add all of that wonderful functionality that we can with JavaScript. 60 00:04:08,430 --> 00:04:10,320 So that's all coming up next.