1 00:00:00,150 --> 00:00:03,930 Hey, we need a game board and this lesson, I'll show you how to set that up. 2 00:00:04,110 --> 00:00:09,060 So last time we created the start game and we've got a placeholder for set up bricks, so let's create 3 00:00:09,060 --> 00:00:12,810 a function that will set up the bricks and we'll pass in a value. 4 00:00:12,830 --> 00:00:16,780 So this can be completely dynamic and we can adjust how many bricks we set up. 5 00:00:17,040 --> 00:00:22,170 So right now we want to set up 30 bricks and we're going to run through and create the function in order 6 00:00:22,170 --> 00:00:22,820 to handle that. 7 00:00:23,100 --> 00:00:27,270 So that was called to set up bricks and it's taking in a parameter. 8 00:00:27,270 --> 00:00:28,110 So that's a number. 9 00:00:28,350 --> 00:00:30,120 This is the number of bricks that we want to set up. 10 00:00:30,390 --> 00:00:34,110 So first of all, we need to do is determine where our starting position is. 11 00:00:34,350 --> 00:00:38,520 So setting up a role and we can use this to get our dimensions. 12 00:00:38,760 --> 00:00:47,660 So within the role position, we need an X and we also need a Y in order to determine our position. 13 00:00:47,940 --> 00:00:50,250 We can use that container Dems. 14 00:00:50,250 --> 00:00:53,510 So the one that we've got the dimensions of the container. 15 00:00:53,760 --> 00:00:57,720 So no, we had the height, the width, so we had all that within that object. 16 00:00:57,780 --> 00:01:04,650 When we used the method get bound client rectangle, it returned the container dimensions and an object. 17 00:01:04,770 --> 00:01:09,900 And now we can use that within our code so we can make some calculations, making it more dynamic and 18 00:01:09,900 --> 00:01:10,520 flexible. 19 00:01:11,040 --> 00:01:15,980 So let's first we'll create a and we'll set up our container dim width. 20 00:01:16,050 --> 00:01:19,930 So this one has a width property and we're going to get the remainder. 21 00:01:20,130 --> 00:01:22,020 So we want to set up the width. 22 00:01:22,020 --> 00:01:24,720 Maybe we want the bricks to be 100 picks each. 23 00:01:25,020 --> 00:01:30,390 So we want to determine how many we can put across and what the remainder of that is. 24 00:01:30,540 --> 00:01:36,420 And if we take that value and divide it by two, that will give us the ability to pick how much space 25 00:01:36,420 --> 00:01:40,530 we need on the left hand side and the right hand side, how much is going to be left over. 26 00:01:40,770 --> 00:01:45,930 And when we divide it by two, that means left and right, we can cover off both those sites. 27 00:01:46,290 --> 00:01:51,450 And for why this is going to be relatively easy, because it's going to be just starting position for 28 00:01:51,450 --> 00:01:51,860 Y. 29 00:01:52,140 --> 00:01:57,690 So this gives us an object that we can work with and now we can update and we can adjust that object. 30 00:01:58,050 --> 00:02:03,600 So setting up the role and I'm going to commentate request animation frame because we don't quite need 31 00:02:03,600 --> 00:02:04,260 that yet. 32 00:02:04,470 --> 00:02:05,850 So I hit start game. 33 00:02:06,000 --> 00:02:11,070 What we're getting here is we're getting the X and the Y, so it's saying that the bricks should start 34 00:02:11,070 --> 00:02:15,380 at position number twenty four Y five and that sounds about right. 35 00:02:15,660 --> 00:02:20,700 So that means that we're starting out and we're going to be able to make so many bricks that are going 36 00:02:20,700 --> 00:02:23,610 to be with the cross and then we're going to run out of space. 37 00:02:23,610 --> 00:02:28,860 So we've got 48 about 48 picks left and that's been divided by two so that we can center that. 38 00:02:28,860 --> 00:02:32,910 And this will make a lot more sense once you see it being displayed on the page. 39 00:02:33,360 --> 00:02:34,890 So let's create a for loop. 40 00:02:35,070 --> 00:02:42,180 So taking X and looping while X is less than the value of no incrementing X Y one. 41 00:02:42,600 --> 00:02:50,130 So accrete our basic loop and within this loop we're going to take the value of RO X and we're checking 42 00:02:50,130 --> 00:02:54,570 to see if it's wider than the condom width. 43 00:02:54,750 --> 00:03:01,470 So if it's past the width that we need to subtract hundred in order to account for one last brick. 44 00:03:01,800 --> 00:03:08,490 So to make sure that if it's passed the mark where minus 100, so that would be we can't put a full 45 00:03:08,490 --> 00:03:11,070 brick in that's over subtracting the 100 there. 46 00:03:11,220 --> 00:03:17,250 So if it's past the edge that we want to increment and we want to change the role y increment the Y 47 00:03:17,250 --> 00:03:21,270 value, and we're not going to have to do that obviously on the first iteration, but we might have 48 00:03:21,270 --> 00:03:23,160 to do it on the following iterations. 49 00:03:23,370 --> 00:03:28,020 I'm going to place this within the row here so we can see all of the different positions where we're 50 00:03:28,020 --> 00:03:28,770 positioning them. 51 00:03:28,920 --> 00:03:31,820 And then next we're going to build the bricks and I'll show you how to do that. 52 00:03:32,160 --> 00:03:37,170 So this is just determining where we're positioning these bricks as we want to build out a grid of these. 53 00:03:37,350 --> 00:03:43,380 So we're taking Y and we're adding 52 Y, so that will move it roll down. 54 00:03:43,890 --> 00:03:50,610 And then we're also taking our roll X position and we're resetting it to the default starting position, 55 00:03:50,760 --> 00:03:52,440 which we already had up here. 56 00:03:52,590 --> 00:03:56,160 So we can actually take that position and copy that code. 57 00:03:56,160 --> 00:04:01,680 And this will set our X position and then we just need to make the brick position and roll. 58 00:04:01,690 --> 00:04:05,880 X is going to be nice and easy because this is always going to increment by one hundred. 59 00:04:06,240 --> 00:04:07,460 So let's see how this works out. 60 00:04:07,470 --> 00:04:10,620 So hit start game and we build out all of the bricks. 61 00:04:10,890 --> 00:04:12,900 So the first one is going to be in position. 62 00:04:12,900 --> 00:04:18,600 Twenty four fifty then one twenty four fifty then to twenty four, three twenty four for twenty four 63 00:04:18,690 --> 00:04:20,430 and then we're off space for another one. 64 00:04:20,430 --> 00:04:22,140 It starts back up one twenty four. 65 00:04:22,230 --> 00:04:28,020 But notice that Y has increased to one hundred so it's moved to the next row of Y so ready to actually 66 00:04:28,020 --> 00:04:28,770 create the bricks. 67 00:04:28,950 --> 00:04:33,600 And I'll show you to do that in the upcoming lessons or call and we'll create a function in order to 68 00:04:33,600 --> 00:04:33,990 do that. 69 00:04:33,990 --> 00:04:36,270 So create brick or should we create bricks. 70 00:04:36,270 --> 00:04:40,920 So it's only going to create the one brick and it's going to take the role position so that X and Y, 71 00:04:41,070 --> 00:04:46,950 so it's going to know where to set the top and left style properties for that particular element. 72 00:04:47,220 --> 00:04:48,780 So that's coming up in the next lesson. 73 00:04:48,810 --> 00:04:49,710 We're going to create the bricks. 74 00:04:49,890 --> 00:04:55,830 So for now, just make sure that you do set up a function that can set the default coordinates of where 75 00:04:55,830 --> 00:04:57,330 you want to position these elements. 76 00:04:57,510 --> 00:04:59,400 And you're going to also notice as well that. 77 00:04:59,660 --> 00:05:05,370 This is going to adjust, so depending on what our width is and we did want to make it dynamic, so 78 00:05:05,420 --> 00:05:13,190 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 79 00:05:13,190 --> 00:05:16,610 across and then we run out of space and we move on to the next slide. 80 00:05:16,790 --> 00:05:21,080 So fully dynamic, depending on what the size of the pages and what the size of our container is.