In this lesson, we're going to actually start seeing something happen on the page, some some visual
stuff, and that's the objective of this lesson for first of all, we want to trigger our build of the
grid and we want to make sure that our page has loaded.
So adding in the event listener, we're going to listen for an event and then launch our function.
The event that we're listening for is dorm content loaded.
And this is the same thing as if you're familiar with Chickory, where we've got the document ready
object.
So once that builds and once the dorm is ready, then we can launch our function and we're going to
just call that build.
So what build will do is this is where we're going to build out the visual part of our game, essentially
our game grid.
We're also going to add in our box, which is our player on top of the screen.
So we're going to set up a variable that we can contain it and added it in globally so that we can reference
it.
And that's why it's sitting there globally with nothing in it yet.
And now we need to populate some values into it.
So selecting not seen.
Variable called box, and we're going to add something in it, and this is going to be the document
create element, and this gives us the ability to create elements on the fly.
So now within the box, we're going to have an element there.
So if I console log out and whatever the value of boxes, you're going to see that when I refresh it,
I've got a div in there.
So right now it's an empty div.
Not a whole lot happening in there.
So let's add some content in there.
So first of all, let's set a class doing a class list add and we already set up some nice classes for
this in the first lesson.
So this is where we can add the class of box.
So now you see that box is represented in that div that we're building.
We also can add in variables.
So values that because this is an object, we can have values that aren't actually going to appear within
the element, but they're going to be contained within that element object so we can utilize these.
So taking our game area and whatever the value of top is, remember, these were those dynamic values
or those values that we got from the bounding client rectangle.
So this is just setting our default value and making sure that our default value of our box X and box
Y and these are the variables that we're going to be updating.
They correspond with the same position of top and left.
So basically what I'm saying is we're going to start our player off in the top left hand corner.
Next, we need to apply some style to that element, because as of right now, even if I refresh it,
you're not going to see a whole lot happening in there because we're just simply console logging out
that element and these variables, even though that we can access them, they're not visible within
the element.
They're not attributes or anything like that.
So they're kind of hidden in the background.
And they're also going to be very useful as we build this application.
So applying our style and this is where we start adding in our visuals because we're taking our top
position and getting that value of box y, which is the value that we're going to be changing.
So setting the style is always going to be the same thing.
And remember, with Box, we set the position to absolute.
So that means that we can position it anywhere on the screen.
So now we've got a style value of top seven point nine.
So that's exactly what we want.
We also want to set a left position.
So just as we did style top, let's set a left position and we're also going to be moving these numbers
as the player moves their character around or their box around.
So now that we've created the element, one last thing, and that is to add it to our game area element.
So that's that main game area that we created earlier.
And these are very useful as objects because now we don't have to do document, query selector game
area.
We can just do game area element and use the appropriate function, the appropriate method append child,
which allows us to add elements to the page.
So now when I add the box boom, there we go, we see a red box and this is that element with a class
of box.
And if we go to inspect it, you see that there's a game area and there's the box that the div that
we created with the style, the left, the top position and the class of box.
So that's why that's showing up there after we add it to the page.
So now we need to take care of one other thing and we need to build out our grid.
So that's what we're going to be doing now.
So once we've created the element and the idea is the same where we're going to loop through and we
already set those variables earlier, I'm setting one up called counter so that we can count the elements
and show something within the squares.
So setting up a counter, letting it start at one.
And this is where we've got our loops.
So we're doing that and let's use X and Y again.
So we're losing X and Y, so Y and looping through iterating through this block of code while Y is less
than and we do have the value in game box that we set earlier as well.
Remember, these values were telling us how many x how many horizontal squares we needed and how many
vertical squares we needed.
And we're now we're using those square values.
So this is game blocks should be game blocks wide and then we just need to increment Y so we don't get
stuck in our loop and then the X or the horizontal is going to be the same thing.
Except of course we need different variables.
So instead of y we're going to loop through and we're going to update X.
So essentially this will give us our grid.
Let me in this move that in and clean this up.
So now we've got our central grid builder looping through and of course we don't see anything quite
yet.
Even though it is running the code because we don't do anything within that code and this is where we're
going to utilize that last part, where we have the squares.
So what the objective is that we're going to add all of these elements into a giant array of squares,
and that's how we're going to know what square the player is on and we're going to do it correspondingly
and accordingly.
So without doing any type of collision detection, we're going to mathematically work out what square
the player is on and then take the appropriate action on the square, because we're going to have that
in a giant array that we're going to be using in in order to build it within the giant array.
So same way that we used box.
And this one is a little bit more complex.
But the same idea where we're using that squares array, we've got our counter variable.
So we're going to leave the first square, the square with the first one in the index.
With an index of zero, we're going to just leave that blank because remember, we're starting counter
at 1:00 and I want that to correspond to the values that are being output on the page.
So now we do document and the same way that we created the element earlier, we just create an element.
And the element that we're going to create is a div.
And then next we need to add in.
So now that we've got it contained within that squares object, and if you want it to see what's contained
within squares, we can output that.
So we can see, just as we did what the div was, we're building it out.
So we've got our div here and we've just got the one squares.
So we're not increasing the counter and that's one thing that we do need to do.
So make sure that you increment the counter and that's going to give us the 25 squares.
And of course the first one is empty because we're doing a grid that's going to work by eight, by three,
and that's why the first one is empty.
And that's what we've got actually twenty five.
But in actuality we only have 24 active cells.
Now you could fix that by doing setting this to zero.
And the math is a little bit different, but it'll work the same.
But for simplicity's sake, I started out one and we'll work through the application within this type
of format.
So the next thing that we want to do is so now that we've got all of these divs as objects that are
sitting here ready to go, we need to do something with those divs.
So updating the div and we can set in our HTML as we're building the devout.
And this is where we can add in the value of counter so that they're all different.
They all have a different value.
Also taking that squares counter object that we're holding, our element that we created, we can add
a class using class list add and the class that we want to add is a square.
So there's the same weight, same idea as we did with the box.
And then lastly, just as we did with the game area element, we want to append a child and this child
that we want to spend is going to be that squares counter values.
So that object.
So see what that looks like.
So while there we go, we've got our grid.
So and all of them are sitting within this active array called squares.
So that makes it really easy to select these and apply different classes and manipulate the elements
because we are still tied to the elements on the screen so we can utilize this within our code.
So that is coming up.
So for now, go ahead and build out your grid.
And if you set different dimensions, you're going to have a separate grid value and you can see that
this is fully dynamic.
So if we go over to here and if I want to change my height to six hundred, you see that it's dynamic
and build out all of the elements still the same way, except it's a little bit bigger, our array.
So I got to keep it at three.
But you can play around with this and experiment with it as well.
So go ahead and add in the grid builder into your project and you can be ready to move on to the next
step.
We're going to create some interaction with the keyboard and the player.