1
00:00:00,120 --> 00:00:00,840
Welcome back.

2
00:00:00,870 --> 00:00:05,910
This is the lesson you've been waiting for, where we bring the JavaScript in and make our project come

3
00:00:05,910 --> 00:00:06,570
to life.

4
00:00:06,930 --> 00:00:12,420
So first of that, we want to do is set up our objects that we're going to utilize in the upcoming lessons.

5
00:00:12,600 --> 00:00:16,170
So setting up some variables, containers that we can use throughout the game.

6
00:00:16,300 --> 00:00:22,710
Usually what I do is I select the elements that are on the page and bring them into usable JavaScript

7
00:00:22,710 --> 00:00:27,420
objects so that we can make use of them and easily select them throughout our game.

8
00:00:27,630 --> 00:00:31,050
So right now what we're doing is selecting the elements.

9
00:00:31,060 --> 00:00:34,410
So we've set up a variable called box.

10
00:00:34,680 --> 00:00:42,210
This can contain the content for the user or the players box, as well as setting up, selecting the

11
00:00:42,210 --> 00:00:44,880
elements that we need to update and manipulate.

12
00:00:45,150 --> 00:00:48,890
And that's the score as we're going to update the score as we play through the game.

13
00:00:49,170 --> 00:00:56,610
Also selecting the game area element and using the same format where we're using query selector, selecting

14
00:00:56,610 --> 00:00:59,860
the element with the class of game area.

15
00:00:59,880 --> 00:01:03,460
I'll make this a little bit wider because we've got a little bit more real estate to play with.

16
00:01:03,570 --> 00:01:09,930
Also, I wanted to use another variable here and I want to get the bounding client rectangle of the

17
00:01:09,930 --> 00:01:11,160
game area element.

18
00:01:11,370 --> 00:01:16,770
Now that we've selected that game area element, we want to get the dimensions of that element.

19
00:01:16,890 --> 00:01:20,340
And JavaScript has a really nice, neat function in order to do that.

20
00:01:20,460 --> 00:01:25,890
And that's called the bounding client rectangle, which turns the text rectangle object that it closes

21
00:01:25,890 --> 00:01:28,020
a group of text rectangles.

22
00:01:28,260 --> 00:01:31,560
So basically what it means is you get the dimensions of your element.

23
00:01:31,830 --> 00:01:38,040
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

24
00:01:38,040 --> 00:01:39,170
being output here.

25
00:01:39,540 --> 00:01:43,570
So usually I usually do like to check to make sure that I'm getting the elements correctly.

26
00:01:43,570 --> 00:01:46,380
So I do have score under the score variable.

27
00:01:46,510 --> 00:01:51,420
I'm selecting the right element, also the game area element.

28
00:01:51,630 --> 00:01:55,160
And you can see that we are selecting the right element for that as well.

29
00:01:55,230 --> 00:01:57,930
And then lastly, this is the important one.

30
00:01:57,960 --> 00:01:59,300
This is the game area.

31
00:01:59,640 --> 00:02:04,280
And as you can see, I make this a little bit bigger so we can take a closer look at it.

32
00:02:04,530 --> 00:02:09,570
So under the game area object, we can see we've got a bunch of values here.

33
00:02:09,570 --> 00:02:14,490
So we've got our top left and top right position.

34
00:02:15,090 --> 00:02:19,290
We've got the top position or I should say left, right, top, bottom positions.

35
00:02:19,440 --> 00:02:25,530
We've also at the height and the width and the x y coordinates where it appears on the page so we can

36
00:02:25,530 --> 00:02:29,070
utilize that in our calculations within our code.

37
00:02:29,220 --> 00:02:34,440
So that's why I've brought that into a variable and I'm using const because these variables are not

38
00:02:34,440 --> 00:02:34,890
changing.

39
00:02:34,890 --> 00:02:40,440
They're not updating them, we're setting them, and then we're utilizing the values within the upcoming

40
00:02:40,440 --> 00:02:41,100
lessons.

41
00:02:41,100 --> 00:02:47,130
As we build this out, we also need to create an array that we're going to add all of the squares to

42
00:02:47,130 --> 00:02:50,840
so we can just call that which call it squares, because it's going to be plural.

43
00:02:50,850 --> 00:02:55,230
And I also want to calculate out the starting position of the game box.

44
00:02:55,260 --> 00:03:00,300
So within the game box area, let's select out our starting position.

45
00:03:00,600 --> 00:03:04,970
And now that we've got our game area, we can calculate this dynamic.

46
00:03:04,980 --> 00:03:08,850
So using a variable of X, let's use math flaw.

47
00:03:09,180 --> 00:03:14,420
This is the math object in JavaScript rounds it down to the nearest bottom.

48
00:03:14,430 --> 00:03:20,330
So if it's point five point nine, it will go back to whatever the nearest value is.

49
00:03:20,340 --> 00:03:24,660
So if it's zero point five, it's going to be zero zero point nine is going to be zero as well with

50
00:03:24,660 --> 00:03:25,230
Baffler.

51
00:03:25,440 --> 00:03:27,200
So selecting our game area.

52
00:03:27,210 --> 00:03:32,070
So now that we've got this object with a bunch of values, we can select the game area.

53
00:03:32,070 --> 00:03:32,460
Right.

54
00:03:32,610 --> 00:03:34,740
And we're going to divide it by one hundred.

55
00:03:34,980 --> 00:03:40,230
And the reason we're doing this and the reason we're using 100, because remember, again, each one

56
00:03:40,230 --> 00:03:43,420
of these boxes is going to be one hundred picks by one hundred picks.

57
00:03:43,740 --> 00:03:46,530
So if we take the whole game area right.

58
00:03:46,530 --> 00:03:53,580
Position and we can see that that has a value of eight or eight, we can divide it by one hundred and

59
00:03:53,580 --> 00:03:56,930
that will give us our total width of the object.

60
00:03:57,150 --> 00:04:03,240
We could also use the width value, which would probably be a little bit more accurate, and we wouldn't

61
00:04:03,240 --> 00:04:06,600
even actually need floor because we'd just be dividing it by one hundred.

62
00:04:06,870 --> 00:04:13,170
But keep the floor in there just in case we adjust this and we do eight or eight or something like that,

63
00:04:13,380 --> 00:04:16,320
then we won't have the right dimensions, the right values.

64
00:04:16,650 --> 00:04:20,300
So keeping that floor in and you want to have this as a whole number.

65
00:04:20,670 --> 00:04:26,140
So the same thing for Y and instead of width, of course we're going to use height because this is the

66
00:04:26,220 --> 00:04:28,410
or this is the horizontal.

67
00:04:28,440 --> 00:04:32,060
This is the vertical and the X is the the horizontal position.

68
00:04:32,640 --> 00:04:38,190
So now that we've got a bunch of variables here, always a good idea to make sure that you do have those

69
00:04:38,190 --> 00:04:39,450
variables in those values.

70
00:04:39,720 --> 00:04:45,150
So we see that we're creating a grid essentially eight by two, and that's going to correspond with

71
00:04:45,150 --> 00:04:48,620
our height and width of our game area.

72
00:04:48,750 --> 00:04:53,870
So if we were to change this to three, we would do a grid by eight by three.

73
00:04:53,880 --> 00:04:55,170
So that would be the difference there.

74
00:04:55,180 --> 00:04:59,520
So now we've got a grid of eight by three that we're working with really at that.

75
00:04:59,800 --> 00:05:06,010
Have is to try to make your game as dynamic as possible, and if you ever do want to change some of

76
00:05:06,010 --> 00:05:11,020
the dimensions, it's always a good idea to have the ability to make it dynamic.

77
00:05:11,170 --> 00:05:16,720
So take a look at these variables, add them into your project, select your game area and get that

78
00:05:16,720 --> 00:05:22,540
bounding client rectangle method and then take a look at what values are being returned in there.

79
00:05:22,660 --> 00:05:29,080
And then you could use these in a calculation for how we're going to build out the grid, how many squares

80
00:05:29,080 --> 00:05:32,340
we need across and down in order to build our grid.

81
00:05:32,560 --> 00:05:35,590
So that's coming up next, where we're going to actually be building out the grid.

82
00:05:35,620 --> 00:05:39,070
So go ahead and take a look at get down in a rectangle for this lesson.

83
00:05:39,220 --> 00:05:45,340
And coming up next, we're going to build out something visual for the player to see as right now there's

84
00:05:45,340 --> 00:05:47,050
not a whole lot to see on the screen.

85
00:05:47,050 --> 00:05:48,310
So that's coming up next.