1
00:00:00,060 --> 00:00:06,390
Congratulations on making it to the end of this section, and I know we were fairly fast paced, so

2
00:00:06,390 --> 00:00:12,600
that's why I always like to do a quick code review and go over some of the finer details of what we've

3
00:00:12,600 --> 00:00:16,640
done in the earlier lessons in order to wrap up this section.

4
00:00:16,950 --> 00:00:22,440
So, first of all, we started out by setting up our success and styling, tried to keep it to a minimum

5
00:00:22,440 --> 00:00:26,310
with a little bit of adding of the styling to make it look interesting.

6
00:00:26,310 --> 00:00:29,370
But we did keep it to a minimum as well as the HTML.

7
00:00:29,430 --> 00:00:32,720
And of course, these ones can be created with JavaScript as well.

8
00:00:32,730 --> 00:00:39,030
But usually I do like to have some HTML in order to kind of get the project started once we start the

9
00:00:39,030 --> 00:00:39,480
project.

10
00:00:39,480 --> 00:00:45,150
And you are welcome to update this so that it's all just JavaScript as well and you can easily create

11
00:00:45,150 --> 00:00:50,790
these elements on the fly as we build out the rest of the game board instead of having them already

12
00:00:50,790 --> 00:00:53,290
hard coded into the HTML.

13
00:00:53,310 --> 00:00:58,500
So next it came to the JavaScript and this is what you came for and this is what the course is all about.

14
00:00:58,590 --> 00:01:01,130
It's all about working and interacting with JavaScript.

15
00:01:01,170 --> 00:01:08,040
We had to set some default variables in the beginning in order to have some values, in order to utilize

16
00:01:08,040 --> 00:01:09,750
those in the upcoming lessons.

17
00:01:09,750 --> 00:01:12,420
And we set a variable for blocks.

18
00:01:12,420 --> 00:01:17,820
So this was essentially that element that is the player and this is the one that we're going to be manipulating

19
00:01:17,820 --> 00:01:20,940
and moving as the player moves around the board.

20
00:01:20,970 --> 00:01:22,640
We also have our score.

21
00:01:22,800 --> 00:01:27,890
This gave us really easy access to the element with the class A score and then our game area.

22
00:01:27,900 --> 00:01:32,590
And we also utilize the game area, the get bounding client rectangles.

23
00:01:32,640 --> 00:01:39,210
This was really important because it gave us the barriers and the parameters that we needed to contain

24
00:01:39,210 --> 00:01:41,010
in order to work within the game area.

25
00:01:41,040 --> 00:01:44,970
It also helped to calculate what our game grid looked like.

26
00:01:44,980 --> 00:01:49,950
So we've got our game box and we calculated how many X and how many Y.

27
00:01:50,100 --> 00:01:55,680
So basically the horizontal and vertical squares that we needed in order to build our grid, we set

28
00:01:55,680 --> 00:01:58,380
up a default variable called squares.

29
00:01:58,560 --> 00:02:05,310
So this was to hold all of our elements, arrays in all of the elements that are the squares within

30
00:02:05,310 --> 00:02:11,640
the game grid so that we could easily access them, manipulate them and update them within our JavaScript

31
00:02:11,640 --> 00:02:11,930
code.

32
00:02:11,970 --> 00:02:14,130
Then we set up some values for the players.

33
00:02:14,150 --> 00:02:16,620
So these are some just generic values.

34
00:02:16,770 --> 00:02:24,240
We've got the speed at 100 and we could also take this and utilize that within the box, offset height

35
00:02:24,240 --> 00:02:25,900
and offset with if we wanted to.

36
00:02:26,190 --> 00:02:31,490
So if you do have different heights and widths, you might want to have a speed for X and speed for

37
00:02:31,490 --> 00:02:33,480
a Y if you want to extend on it.

38
00:02:33,930 --> 00:02:38,250
Easiest way, of course, is to keep them both the same and then hardcoded at one hundred.

39
00:02:38,430 --> 00:02:42,900
But if you do want to have some more flexibility in the game, you're welcome to update those values

40
00:02:43,020 --> 00:02:45,180
and update them correspondingly and accordingly.

41
00:02:45,180 --> 00:02:48,920
We set the document content loaded at that listener.

42
00:02:48,930 --> 00:02:53,670
So this listens for whatever our document content has loaded like the name implies.

43
00:02:53,940 --> 00:02:58,980
And once it does load, then that's where we fire off, build and build.

44
00:02:58,980 --> 00:03:02,730
What that does is it's a function that creates our whole gameplay.

45
00:03:03,190 --> 00:03:10,170
It creates the player character, the box adds the classic box, sets the starting X and Y positions,

46
00:03:10,380 --> 00:03:14,700
updates the box styling, and then appends it to our game area.

47
00:03:14,700 --> 00:03:16,260
So that's visible to the player.

48
00:03:16,260 --> 00:03:19,260
And we also build out our grid within this function as well.

49
00:03:19,290 --> 00:03:23,580
You could break this apart to separate it out, but for now, this is a really simple game and we've

50
00:03:23,580 --> 00:03:26,550
got all of this happening within the original build.

51
00:03:26,700 --> 00:03:28,800
So that's why we're just keeping it this way.

52
00:03:28,950 --> 00:03:33,270
But of course, you could separate out if you get more complex with the game built also than we are

53
00:03:33,270 --> 00:03:35,820
setting out and we're starting with the counter of one.

54
00:03:35,970 --> 00:03:37,020
This is our first square.

55
00:03:37,290 --> 00:03:43,320
We're looping through all of the game box X and Y, if that's the count, how many squares we need across,

56
00:03:43,470 --> 00:03:46,440
how many rows, how many columns we need and we're building out the grid.

57
00:03:46,530 --> 00:03:51,480
So creating the elements dynamically, using JavaScript, updating their inner HTML with the value of

58
00:03:51,480 --> 00:03:54,300
counters so that we know that they've all got different numbers.

59
00:03:54,540 --> 00:04:01,710
And then also taking that squares counter, adding our square class to that element and then finally

60
00:04:01,710 --> 00:04:03,660
appending it to our game area.

61
00:04:03,660 --> 00:04:08,100
So it's visible to the player and then update counter so that we always have a different value there

62
00:04:08,100 --> 00:04:09,290
for the inter HTML.

63
00:04:09,300 --> 00:04:13,710
So it makes them all unique and also helps the player better understand what's square there on.

64
00:04:13,710 --> 00:04:19,710
Of course, then we launched the function make active and what make active does is it selects from all

65
00:04:19,710 --> 00:04:24,780
of the squares that we just built randomly using that squares array, which is global, taking the length

66
00:04:24,780 --> 00:04:25,620
value of it.

67
00:04:25,620 --> 00:04:30,030
And we're checking to make sure that zero is not the selected random value.

68
00:04:30,030 --> 00:04:32,160
And if it is, then we need to select again.

69
00:04:32,250 --> 00:04:38,610
And also we're taking our player square and we're making sure that we're not selecting the same square

70
00:04:38,610 --> 00:04:42,750
that the player is currently sitting on, because then you're going to not have smooth gameplay and

71
00:04:42,750 --> 00:04:44,490
we can get rid of the console message.

72
00:04:44,490 --> 00:04:45,540
We don't need that anymore.

73
00:04:45,540 --> 00:04:49,230
And we're selecting and we're adding the class list of active also.

74
00:04:49,230 --> 00:04:51,210
Then we're ending the function.

75
00:04:51,210 --> 00:04:56,130
And if it's not, doesn't meet these parameters and we're crunching make active again.

76
00:04:56,130 --> 00:04:59,790
So basically it will run this function until we get our desired.

77
00:04:59,870 --> 00:05:06,200
Result, which is none of these are going to be true, so next we have our user interaction and that

78
00:05:06,200 --> 00:05:12,500
is done with adding that listner for key up some of the user presses a key and the key goes up.

79
00:05:12,680 --> 00:05:14,960
That's where we add our key function.

80
00:05:15,320 --> 00:05:20,480
So we limiting it to only certain keys that we're going to be use utilizing.

81
00:05:20,480 --> 00:05:22,750
And that's the left up, right down.

82
00:05:23,000 --> 00:05:24,560
Now, you don't have to do this.

83
00:05:24,560 --> 00:05:31,280
You can use it by the key presses and attaching values to those key presses, of course, and then checking

84
00:05:31,280 --> 00:05:32,360
for those key presses.

85
00:05:32,870 --> 00:05:37,460
But this is just another way to kind of make your code a little bit cleaner and restrict some of the

86
00:05:37,460 --> 00:05:38,180
key presses.

87
00:05:38,300 --> 00:05:43,370
And then you can, of course, add in different key presses and you can also have certain keys that

88
00:05:43,370 --> 00:05:44,250
do the same thing.

89
00:05:44,270 --> 00:05:49,910
So if we wanted to add in some character keys, that could move it left up, right down, we could do

90
00:05:49,910 --> 00:05:51,600
it in this way a lot easier.

91
00:05:51,860 --> 00:05:53,810
So that's another advantage to doing it.

92
00:05:53,810 --> 00:05:57,860
This format sort of checking to see if the key code exists in our object.

93
00:05:57,860 --> 00:06:01,510
And if it does, then we pass it into the handler function.

94
00:06:01,520 --> 00:06:04,010
And this is where we're just processing in that key value.

95
00:06:04,280 --> 00:06:08,360
We're getting the key value and then we're checking to see what the key value is.

96
00:06:08,630 --> 00:06:14,090
And if it's left, then we're also checking to see it, make sure that the player hasn't gone out of

97
00:06:14,090 --> 00:06:14,600
bounds.

98
00:06:14,600 --> 00:06:20,380
And if they're good to move left, then we decrease the box value of X.

99
00:06:20,390 --> 00:06:26,810
So this allows us to reset that value where we're moving the exposition and then we're also decreasing

100
00:06:26,810 --> 00:06:31,890
the value of the square so that we're calculating out which square the player is actually on.

101
00:06:32,180 --> 00:06:38,180
So this helps us avoid having to have collision detection, because once these two match wherever the

102
00:06:38,180 --> 00:06:44,330
boxes and the player square is, then we can really easily select from our squares array and figure

103
00:06:44,330 --> 00:06:46,280
out what square the player is on.

104
00:06:46,400 --> 00:06:51,040
And then we need that, of course, to check to see if the player has hit the active square.

105
00:06:51,470 --> 00:06:53,090
So those two do need to match.

106
00:06:53,360 --> 00:06:55,910
We have our right and with right.

107
00:06:55,940 --> 00:06:57,440
We need to also account.

108
00:06:57,450 --> 00:06:59,510
So we've got our game area right position.

109
00:06:59,690 --> 00:07:04,040
So this is the furthest pixel point on the game area, which is right.

110
00:07:04,250 --> 00:07:11,180
But we also need to subtract our offset width of the box because otherwise we know that this box isn't

111
00:07:11,180 --> 00:07:12,380
zero wide.

112
00:07:12,500 --> 00:07:17,600
So we need to make sure that we're accounting for that and the same thing for the bottom so the bottom.

113
00:07:17,600 --> 00:07:20,390
And we need to subtract the offset height in this case.

114
00:07:20,690 --> 00:07:26,450
So that gives us the ability to keep the player in balance and then up as straightforward, just like

115
00:07:26,450 --> 00:07:26,840
left.

116
00:07:27,020 --> 00:07:30,770
We're just making sure to see that it's greater than the area top.

117
00:07:30,950 --> 00:07:34,450
Next, we're setting updating the style properties of the element.

118
00:07:34,700 --> 00:07:37,010
So this is what actually creates the visual movement.

119
00:07:37,010 --> 00:07:44,090
We're updating that style value within the element of the class of box, and then we're using that box

120
00:07:44,090 --> 00:07:47,140
X and Y variables that we set within the object.

121
00:07:47,150 --> 00:07:52,730
And then lastly here, we're checking to see if the squares player squares so the player squares the

122
00:07:52,730 --> 00:07:57,890
square that the player is on and the squares is the array that contains all the square elements.

123
00:07:58,190 --> 00:08:03,170
So we checked to see if this element has a class of active.

124
00:08:03,170 --> 00:08:10,010
And if it does, then we've found our target and then we remove that class of octaves so that we only

125
00:08:10,010 --> 00:08:17,330
have one on screen at a time and we make another one and then we increment the score plus plus and also

126
00:08:17,510 --> 00:08:20,560
we update the inner HTML of the score.

127
00:08:20,600 --> 00:08:26,840
So essentially that's our entire application, fully functional and gives you the ability to move through

128
00:08:26,840 --> 00:08:30,950
the board and select and find those green squares.

129
00:08:31,160 --> 00:08:36,500
And I always do suggest that you play through it a few times just to make sure that you've got the functionality

130
00:08:36,500 --> 00:08:37,520
that you were looking for.

131
00:08:37,730 --> 00:08:41,690
And in this case, it does seem like everything is working as expected.

132
00:08:41,870 --> 00:08:47,870
We even have the ability to dynamically adjust the height and the width of our game board and have our

133
00:08:48,050 --> 00:08:50,210
functionality still there and working.

134
00:08:50,240 --> 00:08:52,130
So go ahead and try this out for yourself.

135
00:08:52,640 --> 00:08:57,260
Make sure that your own project is working the same way that this one is.

136
00:08:57,260 --> 00:09:02,210
And if you do need any if you do have any questions or need any additional clarification, I'm always

137
00:09:02,210 --> 00:09:06,500
happy to help clarify content as well as if I've got a lot of questions.

138
00:09:06,500 --> 00:09:12,920
I'll actually add additional content into this course to help clarify any of the objectives that we're

139
00:09:12,920 --> 00:09:13,500
covering.

140
00:09:13,700 --> 00:09:16,400
Thanks again for taking the course and this section.

141
00:09:16,490 --> 00:09:17,660
I'll see you in the next one.