Hello and welcome in this lesson, we are going to be setting up the box chaser game and it's going
to be a unique game using JavaScript in order to create a grid and then using the keyboard actions of
the user in order to maneuver through the grid to select the box that's green and moving through the
grid.
We're going to make it all dynamic with JavaScript.
First thing we need to do is set up our basic HTML.
So we're going to try to keep this at a minimal as possible because of course we are focused on JavaScript.
We need a main container area.
We're going to call it game area, creating a div.
Also just below that, let's create another one and we can call this one.
This is where our score will go so we can keep score of what's happening within the gameplay and assign
this one a class of score so that we can select it within our JavaScript.
And for now we can put a zero in there.
We're also going to need to apply a little bit of styling as well.
So coming into our success, let's set some dimensions for the green area and we want to try to make
this dynamic.
So whether we adjust the width and the height, we want the game to adjust as well.
So we'll start out with a width of 800 and we're going to make all of the grid boxes one hundred by
100.
So we try to keep it within a 100 dimensions.
So if we do 800 by 200, that will give us 16 squares within our grid.
And then if we adjust that, that will adjust accordingly.
We also need to set some styling for the score.
And I'm trying to go through this really quickly, as you probably want to set your own styling and
you can adjust the styling as needed, of course.
And the objective of the game is going to be to move your box.
So we're going to create an element and give it a class of box.
So this is the main player object position, not as absolute, so that we have the ability to move it
around, setting that as a width of one hundred height of one hundred picks as well.
And we can also set a background color of red for that element.
And we're going to set the left and top position dynamically with JavaScript so we can skip that part.
Next is going to be all of the squares.
So we're creating a grid with JavaScript, so we want to create a bunch of squares.
So setting their position as relative to each other, we can also add in a border so that we can actually
see our grid and we can give it a small border, give it a width.
And because we want to stick to the 100 by 100, we've already set a border of one pic.
So we need to keep it within those same dimensions.
So that's why I'm setting it as Ninety-eight.
And of course, if you don't have a border, you can set them one by one.
We're also going to set the display and we can set that to inline block so that they stack next to each
other and then a little bit of styling for the text to align it as a center.
Also on a vertical, align the text to align it in the middle in in order to do that and set that,
we need to set our line height so our line height can be one hundred pics and our font size.
How about we make the font size two or twenty or we could do it.
Twenty four pics we keep with pics and a color for the font.
Make it a kind of a great out color there.
So now we set our box, our score, our game area.
And there's one last class that I wanted to add in and this is the octave class with JavaScript.
We're going to be selecting one of the squares at random and applying an octave class to it.
And this is the class.
This is going to be objective for the player to maneuver to the square and get over that square, and
then it will will remove the octave class.
And this is all going to be done with Java.
So now that we've done quite a bit of styling and of course, there's not a whole lot to see because
we are focused on JavaScript and we're going to do most of the visuals and the display content using
JavaScript.
So go ahead and set up your basic game area.
And coming up next, we're going to be using JavaScript in order to build out our game board and then
also add all of that wonderful functionality that we can with JavaScript.
So that's all coming up next.