Hey, we need a game board and this lesson, I'll show you how to set that up.
So last time we created the start game and we've got a placeholder for set up bricks, so let's create
a function that will set up the bricks and we'll pass in a value.
So this can be completely dynamic and we can adjust how many bricks we set up.
So right now we want to set up 30 bricks and we're going to run through and create the function in order
to handle that.
So that was called to set up bricks and it's taking in a parameter.
So that's a number.
This is the number of bricks that we want to set up.
So first of all, we need to do is determine where our starting position is.
So setting up a role and we can use this to get our dimensions.
So within the role position, we need an X and we also need a Y in order to determine our position.
We can use that container Dems.
So the one that we've got the dimensions of the container.
So no, we had the height, the width, so we had all that within that object.
When we used the method get bound client rectangle, it returned the container dimensions and an object.
And now we can use that within our code so we can make some calculations, making it more dynamic and
flexible.
So let's first we'll create a and we'll set up our container dim width.
So this one has a width property and we're going to get the remainder.
So we want to set up the width.
Maybe we want the bricks to be 100 picks each.
So we want to determine how many we can put across and what the remainder of that is.
And if we take that value and divide it by two, that will give us the ability to pick how much space
we need on the left hand side and the right hand side, how much is going to be left over.
And when we divide it by two, that means left and right, we can cover off both those sites.
And for why this is going to be relatively easy, because it's going to be just starting position for
Y.
So this gives us an object that we can work with and now we can update and we can adjust that object.
So setting up the role and I'm going to commentate request animation frame because we don't quite need
that yet.
So I hit start game.
What we're getting here is we're getting the X and the Y, so it's saying that the bricks should start
at position number twenty four Y five and that sounds about right.
So that means that we're starting out and we're going to be able to make so many bricks that are going
to be with the cross and then we're going to run out of space.
So we've got 48 about 48 picks left and that's been divided by two so that we can center that.
And this will make a lot more sense once you see it being displayed on the page.
So let's create a for loop.
So taking X and looping while X is less than the value of no incrementing X Y one.
So accrete our basic loop and within this loop we're going to take the value of RO X and we're checking
to see if it's wider than the condom width.
So if it's past the width that we need to subtract hundred in order to account for one last brick.
So to make sure that if it's passed the mark where minus 100, so that would be we can't put a full
brick in that's over subtracting the 100 there.
So if it's past the edge that we want to increment and we want to change the role y increment the Y
value, and we're not going to have to do that obviously on the first iteration, but we might have
to do it on the following iterations.
I'm going to place this within the row here so we can see all of the different positions where we're
positioning them.
And then next we're going to build the bricks and I'll show you how to do that.
So this is just determining where we're positioning these bricks as we want to build out a grid of these.
So we're taking Y and we're adding 52 Y, so that will move it roll down.
And then we're also taking our roll X position and we're resetting it to the default starting position,
which we already had up here.
So we can actually take that position and copy that code.
And this will set our X position and then we just need to make the brick position and roll.
X is going to be nice and easy because this is always going to increment by one hundred.
So let's see how this works out.
So hit start game and we build out all of the bricks.
So the first one is going to be in position.
Twenty four fifty then one twenty four fifty then to twenty four, three twenty four for twenty four
and then we're off space for another one.
It starts back up one twenty four.
But notice that Y has increased to one hundred so it's moved to the next row of Y so ready to actually
create the bricks.
And I'll show you to do that in the upcoming lessons or call and we'll create a function in order to
do that.
So create brick or should we create bricks.
So it's only going to create the one brick and it's going to take the role position so that X and Y,
so it's going to know where to set the top and left style properties for that particular element.
So that's coming up in the next lesson.
We're going to create the bricks.
So for now, just make sure that you do set up a function that can set the default coordinates of where
you want to position these elements.
And you're going to also notice as well that.
This is going to adjust, so depending on what our width is and we did want to make it dynamic, so
see here we're able to get to break to starting at 28 and it looks like we're able to get about 12 bricks
across and then we run out of space and we move on to the next slide.
So fully dynamic, depending on what the size of the pages and what the size of our container is.