1 00:00:00,360 --> 00:00:05,160 In this lesson, we're going to actually start seeing something happen on the page, some some visual 2 00:00:05,160 --> 00:00:11,160 stuff, and that's the objective of this lesson for first of all, we want to trigger our build of the 3 00:00:11,160 --> 00:00:14,280 grid and we want to make sure that our page has loaded. 4 00:00:14,460 --> 00:00:20,310 So adding in the event listener, we're going to listen for an event and then launch our function. 5 00:00:20,670 --> 00:00:24,780 The event that we're listening for is dorm content loaded. 6 00:00:25,050 --> 00:00:30,210 And this is the same thing as if you're familiar with Chickory, where we've got the document ready 7 00:00:30,210 --> 00:00:30,740 object. 8 00:00:31,080 --> 00:00:36,450 So once that builds and once the dorm is ready, then we can launch our function and we're going to 9 00:00:36,450 --> 00:00:37,590 just call that build. 10 00:00:37,890 --> 00:00:43,380 So what build will do is this is where we're going to build out the visual part of our game, essentially 11 00:00:43,380 --> 00:00:44,520 our game grid. 12 00:00:44,700 --> 00:00:49,710 We're also going to add in our box, which is our player on top of the screen. 13 00:00:49,950 --> 00:00:55,650 So we're going to set up a variable that we can contain it and added it in globally so that we can reference 14 00:00:55,650 --> 00:00:55,830 it. 15 00:00:56,010 --> 00:00:58,680 And that's why it's sitting there globally with nothing in it yet. 16 00:00:58,800 --> 00:01:01,380 And now we need to populate some values into it. 17 00:01:01,620 --> 00:01:03,060 So selecting not seen. 18 00:01:04,500 --> 00:01:10,650 Variable called box, and we're going to add something in it, and this is going to be the document 19 00:01:10,650 --> 00:01:15,510 create element, and this gives us the ability to create elements on the fly. 20 00:01:15,870 --> 00:01:18,930 So now within the box, we're going to have an element there. 21 00:01:18,960 --> 00:01:25,890 So if I console log out and whatever the value of boxes, you're going to see that when I refresh it, 22 00:01:25,890 --> 00:01:27,060 I've got a div in there. 23 00:01:27,300 --> 00:01:28,620 So right now it's an empty div. 24 00:01:28,620 --> 00:01:30,110 Not a whole lot happening in there. 25 00:01:30,360 --> 00:01:32,130 So let's add some content in there. 26 00:01:32,370 --> 00:01:39,180 So first of all, let's set a class doing a class list add and we already set up some nice classes for 27 00:01:39,180 --> 00:01:40,680 this in the first lesson. 28 00:01:40,890 --> 00:01:43,020 So this is where we can add the class of box. 29 00:01:43,240 --> 00:01:47,120 So now you see that box is represented in that div that we're building. 30 00:01:47,790 --> 00:01:49,920 We also can add in variables. 31 00:01:49,920 --> 00:01:56,100 So values that because this is an object, we can have values that aren't actually going to appear within 32 00:01:56,100 --> 00:02:00,780 the element, but they're going to be contained within that element object so we can utilize these. 33 00:02:00,990 --> 00:02:08,370 So taking our game area and whatever the value of top is, remember, these were those dynamic values 34 00:02:08,370 --> 00:02:11,190 or those values that we got from the bounding client rectangle. 35 00:02:11,910 --> 00:02:19,860 So this is just setting our default value and making sure that our default value of our box X and box 36 00:02:19,860 --> 00:02:22,170 Y and these are the variables that we're going to be updating. 37 00:02:22,470 --> 00:02:27,330 They correspond with the same position of top and left. 38 00:02:27,570 --> 00:02:33,340 So basically what I'm saying is we're going to start our player off in the top left hand corner. 39 00:02:33,780 --> 00:02:40,140 Next, we need to apply some style to that element, because as of right now, even if I refresh it, 40 00:02:40,290 --> 00:02:44,430 you're not going to see a whole lot happening in there because we're just simply console logging out 41 00:02:44,820 --> 00:02:50,730 that element and these variables, even though that we can access them, they're not visible within 42 00:02:50,730 --> 00:02:51,200 the element. 43 00:02:51,210 --> 00:02:53,010 They're not attributes or anything like that. 44 00:02:53,010 --> 00:02:54,510 So they're kind of hidden in the background. 45 00:02:54,870 --> 00:02:58,260 And they're also going to be very useful as we build this application. 46 00:02:58,650 --> 00:03:05,070 So applying our style and this is where we start adding in our visuals because we're taking our top 47 00:03:05,070 --> 00:03:10,850 position and getting that value of box y, which is the value that we're going to be changing. 48 00:03:11,070 --> 00:03:13,910 So setting the style is always going to be the same thing. 49 00:03:14,100 --> 00:03:18,210 And remember, with Box, we set the position to absolute. 50 00:03:18,360 --> 00:03:20,920 So that means that we can position it anywhere on the screen. 51 00:03:21,240 --> 00:03:25,640 So now we've got a style value of top seven point nine. 52 00:03:25,680 --> 00:03:27,200 So that's exactly what we want. 53 00:03:27,600 --> 00:03:30,200 We also want to set a left position. 54 00:03:30,450 --> 00:03:37,200 So just as we did style top, let's set a left position and we're also going to be moving these numbers 55 00:03:37,350 --> 00:03:41,000 as the player moves their character around or their box around. 56 00:03:41,820 --> 00:03:50,420 So now that we've created the element, one last thing, and that is to add it to our game area element. 57 00:03:50,430 --> 00:03:53,550 So that's that main game area that we created earlier. 58 00:03:53,760 --> 00:03:59,580 And these are very useful as objects because now we don't have to do document, query selector game 59 00:03:59,580 --> 00:03:59,970 area. 60 00:04:00,150 --> 00:04:07,500 We can just do game area element and use the appropriate function, the appropriate method append child, 61 00:04:07,650 --> 00:04:10,840 which allows us to add elements to the page. 62 00:04:11,250 --> 00:04:18,930 So now when I add the box boom, there we go, we see a red box and this is that element with a class 63 00:04:18,930 --> 00:04:19,830 of box. 64 00:04:19,830 --> 00:04:25,770 And if we go to inspect it, you see that there's a game area and there's the box that the div that 65 00:04:25,770 --> 00:04:30,360 we created with the style, the left, the top position and the class of box. 66 00:04:30,630 --> 00:04:33,710 So that's why that's showing up there after we add it to the page. 67 00:04:34,320 --> 00:04:39,030 So now we need to take care of one other thing and we need to build out our grid. 68 00:04:39,450 --> 00:04:41,290 So that's what we're going to be doing now. 69 00:04:41,580 --> 00:04:46,230 So once we've created the element and the idea is the same where we're going to loop through and we 70 00:04:46,230 --> 00:04:52,350 already set those variables earlier, I'm setting one up called counter so that we can count the elements 71 00:04:52,350 --> 00:04:55,500 and show something within the squares. 72 00:04:55,920 --> 00:04:58,800 So setting up a counter, letting it start at one. 73 00:04:59,460 --> 00:05:01,380 And this is where we've got our loops. 74 00:05:01,710 --> 00:05:05,100 So we're doing that and let's use X and Y again. 75 00:05:05,400 --> 00:05:14,310 So we're losing X and Y, so Y and looping through iterating through this block of code while Y is less 76 00:05:14,310 --> 00:05:18,870 than and we do have the value in game box that we set earlier as well. 77 00:05:19,230 --> 00:05:25,710 Remember, these values were telling us how many x how many horizontal squares we needed and how many 78 00:05:25,710 --> 00:05:27,000 vertical squares we needed. 79 00:05:27,300 --> 00:05:30,690 And we're now we're using those square values. 80 00:05:30,690 --> 00:05:37,290 So this is game blocks should be game blocks wide and then we just need to increment Y so we don't get 81 00:05:37,290 --> 00:05:42,180 stuck in our loop and then the X or the horizontal is going to be the same thing. 82 00:05:42,540 --> 00:05:45,270 Except of course we need different variables. 83 00:05:45,510 --> 00:05:49,730 So instead of y we're going to loop through and we're going to update X. 84 00:05:49,920 --> 00:05:52,250 So essentially this will give us our grid. 85 00:05:52,260 --> 00:05:55,430 Let me in this move that in and clean this up. 86 00:05:55,680 --> 00:06:02,280 So now we've got our central grid builder looping through and of course we don't see anything quite 87 00:06:02,280 --> 00:06:02,580 yet. 88 00:06:03,260 --> 00:06:08,090 Even though it is running the code because we don't do anything within that code and this is where we're 89 00:06:08,090 --> 00:06:10,690 going to utilize that last part, where we have the squares. 90 00:06:11,000 --> 00:06:18,170 So what the objective is that we're going to add all of these elements into a giant array of squares, 91 00:06:18,290 --> 00:06:22,730 and that's how we're going to know what square the player is on and we're going to do it correspondingly 92 00:06:22,730 --> 00:06:23,290 and accordingly. 93 00:06:23,450 --> 00:06:28,760 So without doing any type of collision detection, we're going to mathematically work out what square 94 00:06:28,910 --> 00:06:34,310 the player is on and then take the appropriate action on the square, because we're going to have that 95 00:06:34,310 --> 00:06:39,720 in a giant array that we're going to be using in in order to build it within the giant array. 96 00:06:39,920 --> 00:06:41,690 So same way that we used box. 97 00:06:41,690 --> 00:06:44,000 And this one is a little bit more complex. 98 00:06:44,210 --> 00:06:50,570 But the same idea where we're using that squares array, we've got our counter variable. 99 00:06:50,840 --> 00:06:55,100 So we're going to leave the first square, the square with the first one in the index. 100 00:06:56,060 --> 00:06:59,930 With an index of zero, we're going to just leave that blank because remember, we're starting counter 101 00:06:59,930 --> 00:07:04,860 at 1:00 and I want that to correspond to the values that are being output on the page. 102 00:07:04,880 --> 00:07:10,010 So now we do document and the same way that we created the element earlier, we just create an element. 103 00:07:10,010 --> 00:07:11,900 And the element that we're going to create is a div. 104 00:07:11,900 --> 00:07:13,580 And then next we need to add in. 105 00:07:13,640 --> 00:07:19,520 So now that we've got it contained within that squares object, and if you want it to see what's contained 106 00:07:19,520 --> 00:07:21,290 within squares, we can output that. 107 00:07:21,680 --> 00:07:24,820 So we can see, just as we did what the div was, we're building it out. 108 00:07:25,220 --> 00:07:29,990 So we've got our div here and we've just got the one squares. 109 00:07:29,990 --> 00:07:33,580 So we're not increasing the counter and that's one thing that we do need to do. 110 00:07:33,590 --> 00:07:38,570 So make sure that you increment the counter and that's going to give us the 25 squares. 111 00:07:38,720 --> 00:07:45,110 And of course the first one is empty because we're doing a grid that's going to work by eight, by three, 112 00:07:45,260 --> 00:07:47,460 and that's why the first one is empty. 113 00:07:47,460 --> 00:07:49,250 And that's what we've got actually twenty five. 114 00:07:49,460 --> 00:07:53,970 But in actuality we only have 24 active cells. 115 00:07:54,170 --> 00:07:57,590 Now you could fix that by doing setting this to zero. 116 00:07:57,950 --> 00:08:01,280 And the math is a little bit different, but it'll work the same. 117 00:08:01,580 --> 00:08:07,040 But for simplicity's sake, I started out one and we'll work through the application within this type 118 00:08:07,040 --> 00:08:07,500 of format. 119 00:08:07,910 --> 00:08:13,220 So the next thing that we want to do is so now that we've got all of these divs as objects that are 120 00:08:13,220 --> 00:08:16,760 sitting here ready to go, we need to do something with those divs. 121 00:08:17,060 --> 00:08:21,680 So updating the div and we can set in our HTML as we're building the devout. 122 00:08:21,890 --> 00:08:25,280 And this is where we can add in the value of counter so that they're all different. 123 00:08:25,280 --> 00:08:26,350 They all have a different value. 124 00:08:26,990 --> 00:08:33,620 Also taking that squares counter object that we're holding, our element that we created, we can add 125 00:08:33,620 --> 00:08:39,270 a class using class list add and the class that we want to add is a square. 126 00:08:39,320 --> 00:08:42,010 So there's the same weight, same idea as we did with the box. 127 00:08:42,290 --> 00:08:50,990 And then lastly, just as we did with the game area element, we want to append a child and this child 128 00:08:50,990 --> 00:08:54,770 that we want to spend is going to be that squares counter values. 129 00:08:54,770 --> 00:08:55,690 So that object. 130 00:08:56,030 --> 00:08:57,020 So see what that looks like. 131 00:08:57,170 --> 00:09:00,290 So while there we go, we've got our grid. 132 00:09:00,650 --> 00:09:06,770 So and all of them are sitting within this active array called squares. 133 00:09:07,100 --> 00:09:13,910 So that makes it really easy to select these and apply different classes and manipulate the elements 134 00:09:13,910 --> 00:09:19,520 because we are still tied to the elements on the screen so we can utilize this within our code. 135 00:09:19,940 --> 00:09:21,410 So that is coming up. 136 00:09:21,650 --> 00:09:25,370 So for now, go ahead and build out your grid. 137 00:09:26,080 --> 00:09:31,550 And if you set different dimensions, you're going to have a separate grid value and you can see that 138 00:09:31,550 --> 00:09:32,810 this is fully dynamic. 139 00:09:32,820 --> 00:09:40,430 So if we go over to here and if I want to change my height to six hundred, you see that it's dynamic 140 00:09:40,430 --> 00:09:45,760 and build out all of the elements still the same way, except it's a little bit bigger, our array. 141 00:09:45,980 --> 00:09:47,330 So I got to keep it at three. 142 00:09:47,480 --> 00:09:50,050 But you can play around with this and experiment with it as well. 143 00:09:50,090 --> 00:09:55,370 So go ahead and add in the grid builder into your project and you can be ready to move on to the next 144 00:09:55,370 --> 00:09:55,730 step. 145 00:09:55,970 --> 00:09:58,550 We're going to create some interaction with the keyboard and the player.