Welcome back.
This is the lesson you've been waiting for, where we bring the JavaScript in and make our project come
to life.
So first of that, we want to do is set up our objects that we're going to utilize in the upcoming lessons.
So setting up some variables, containers that we can use throughout the game.
Usually what I do is I select the elements that are on the page and bring them into usable JavaScript
objects so that we can make use of them and easily select them throughout our game.
So right now what we're doing is selecting the elements.
So we've set up a variable called box.
This can contain the content for the user or the players box, as well as setting up, selecting the
elements that we need to update and manipulate.
And that's the score as we're going to update the score as we play through the game.
Also selecting the game area element and using the same format where we're using query selector, selecting
the element with the class of game area.
I'll make this a little bit wider because we've got a little bit more real estate to play with.
Also, I wanted to use another variable here and I want to get the bounding client rectangle of the
game area element.
Now that we've selected that game area element, we want to get the dimensions of that element.
And JavaScript has a really nice, neat function in order to do that.
And that's called the bounding client rectangle, which turns the text rectangle object that it closes
a group of text rectangles.
So basically what it means is you get the dimensions of your element.
So when I refresh this and I go to inspect and I'm just going into the console so that we can see what's
being output here.
So usually I usually do like to check to make sure that I'm getting the elements correctly.
So I do have score under the score variable.
I'm selecting the right element, also the game area element.
And you can see that we are selecting the right element for that as well.
And then lastly, this is the important one.
This is the game area.
And as you can see, I make this a little bit bigger so we can take a closer look at it.
So under the game area object, we can see we've got a bunch of values here.
So we've got our top left and top right position.
We've got the top position or I should say left, right, top, bottom positions.
We've also at the height and the width and the x y coordinates where it appears on the page so we can
utilize that in our calculations within our code.
So that's why I've brought that into a variable and I'm using const because these variables are not
changing.
They're not updating them, we're setting them, and then we're utilizing the values within the upcoming
lessons.
As we build this out, we also need to create an array that we're going to add all of the squares to
so we can just call that which call it squares, because it's going to be plural.
And I also want to calculate out the starting position of the game box.
So within the game box area, let's select out our starting position.
And now that we've got our game area, we can calculate this dynamic.
So using a variable of X, let's use math flaw.
This is the math object in JavaScript rounds it down to the nearest bottom.
So if it's point five point nine, it will go back to whatever the nearest value is.
So if it's zero point five, it's going to be zero zero point nine is going to be zero as well with
Baffler.
So selecting our game area.
So now that we've got this object with a bunch of values, we can select the game area.
Right.
And we're going to divide it by one hundred.
And the reason we're doing this and the reason we're using 100, because remember, again, each one
of these boxes is going to be one hundred picks by one hundred picks.
So if we take the whole game area right.
Position and we can see that that has a value of eight or eight, we can divide it by one hundred and
that will give us our total width of the object.
We could also use the width value, which would probably be a little bit more accurate, and we wouldn't
even actually need floor because we'd just be dividing it by one hundred.
But keep the floor in there just in case we adjust this and we do eight or eight or something like that,
then we won't have the right dimensions, the right values.
So keeping that floor in and you want to have this as a whole number.
So the same thing for Y and instead of width, of course we're going to use height because this is the
or this is the horizontal.
This is the vertical and the X is the the horizontal position.
So now that we've got a bunch of variables here, always a good idea to make sure that you do have those
variables in those values.
So we see that we're creating a grid essentially eight by two, and that's going to correspond with
our height and width of our game area.
So if we were to change this to three, we would do a grid by eight by three.
So that would be the difference there.
So now we've got a grid of eight by three that we're working with really at that.
Have is to try to make your game as dynamic as possible, and if you ever do want to change some of
the dimensions, it's always a good idea to have the ability to make it dynamic.
So take a look at these variables, add them into your project, select your game area and get that
bounding client rectangle method and then take a look at what values are being returned in there.
And then you could use these in a calculation for how we're going to build out the grid, how many squares
we need across and down in order to build our grid.
So that's coming up next, where we're going to actually be building out the grid.
So go ahead and take a look at get down in a rectangle for this lesson.
And coming up next, we're going to build out something visual for the player to see as right now there's
not a whole lot to see on the screen.
So that's coming up next.