1
00:00:00,210 --> 00:00:05,760
This is the final lesson of this section, and this is the point where we usually try to play through

2
00:00:05,760 --> 00:00:09,920
the game just to make sure that everything is working as expected.

3
00:00:10,230 --> 00:00:14,850
So we've got our high, low game and we see that the game is over.

4
00:00:14,850 --> 00:00:19,650
Once we get something wrong, try it again, started again and try it out for yourself.

5
00:00:19,980 --> 00:00:25,290
And it usually takes a few players just to make sure that everything is working as expected.

6
00:00:25,470 --> 00:00:28,980
And in this case, it does seem like everything is working as intended.

7
00:00:29,160 --> 00:00:32,610
So I'm going to do a quick final run through of the code that we're using.

8
00:00:32,850 --> 00:00:35,940
We did apply some styling and these are up to you as well.

9
00:00:35,940 --> 00:00:40,650
You can customize the styling of the card output and really make it.

10
00:00:41,800 --> 00:00:46,510
Styled the way that you need it and you want to present these cards, or you could use a styling that

11
00:00:46,510 --> 00:00:48,710
I used within this course as well.

12
00:00:49,120 --> 00:00:52,750
So going into the index page, we're linking to our style sheets.

13
00:00:52,750 --> 00:00:54,620
So this is just some plain HTML.

14
00:00:54,790 --> 00:00:56,890
We've got a spot for our score.

15
00:00:57,040 --> 00:01:03,070
And the way that the game is scored is the longer of a streak you play, the better of a score.

16
00:01:03,070 --> 00:01:05,530
You get also a message area.

17
00:01:05,570 --> 00:01:10,780
Usually I like to have these message areas so I can output some communication to the player.

18
00:01:11,080 --> 00:01:16,380
Our gameplay area is essentially our game board wherever the all of the gameplay takes place.

19
00:01:16,390 --> 00:01:19,150
This is where the visuals take place of the game.

20
00:01:20,130 --> 00:01:26,300
We have our buttons, so these are our interactions for the players, we've got to start a higher and

21
00:01:26,300 --> 00:01:27,090
a lower button.

22
00:01:28,080 --> 00:01:35,310
Next, we came into our JavaScript, we created JavaScript objects to contain the elements so that we

23
00:01:35,310 --> 00:01:41,790
could really easily connect to the elements of the page of the DOM set up some default variables, some

24
00:01:41,790 --> 00:01:47,300
global values that we used later on within the lessons in order to hold the current cards.

25
00:01:47,300 --> 00:01:53,520
So that's the card that's visually being seen by the player and also the current score that the player

26
00:01:53,520 --> 00:02:00,100
has so that we can increment that and then this one so that we could compare it within our game logic.

27
00:02:00,330 --> 00:02:01,470
We also have a deck.

28
00:02:01,650 --> 00:02:07,680
So this is another global variable where we've got a deck of cards that we produce within our JavaScript.

29
00:02:08,010 --> 00:02:11,420
And in order to produce the deck of cards, we needed some data.

30
00:02:11,460 --> 00:02:14,310
So we needed to get what the cards are going to look like.

31
00:02:14,310 --> 00:02:17,400
How many suits are we going to have, how many ranks we're going to have.

32
00:02:17,400 --> 00:02:18,660
And it's really dynamic.

33
00:02:18,810 --> 00:02:23,700
So if we were to adjust these, the deck of cards that we're building out would adjust as well.

34
00:02:24,210 --> 00:02:28,790
We added event listeners to all of the buttons, so made those buttons interactive.

35
00:02:29,070 --> 00:02:34,230
We also set up a default function here that we could toggle the buttons because we have two different

36
00:02:34,230 --> 00:02:35,160
views for the buttons.

37
00:02:35,370 --> 00:02:39,780
So we have a view where we've got just a start button and then we have a view where we have a higher,

38
00:02:39,780 --> 00:02:40,520
lower button.

39
00:02:40,740 --> 00:02:45,810
So by default, when we start our game, we're adding in the class of hide button.

40
00:02:45,930 --> 00:02:49,050
And what hide button does is it displays none.

41
00:02:49,200 --> 00:02:50,460
So it hides that button.

42
00:02:50,610 --> 00:02:53,130
So we don't see the higher or lower when we come in.

43
00:02:53,250 --> 00:02:59,040
And when we hit start, we run the toggle of the buttons so that toggles and adds in hide button to

44
00:02:59,040 --> 00:03:06,120
the start button, effectively hiding it and then adds remove out the class of hide button to the higher

45
00:03:06,120 --> 00:03:08,320
and lower buttons, effectively showing them.

46
00:03:08,880 --> 00:03:13,500
So this is where we're playing the game and this is where all of the button clicks go.

47
00:03:13,890 --> 00:03:16,830
And we're checking to see what the value of the button click is.

48
00:03:17,100 --> 00:03:21,690
We pick up the entire text of the button and this is what we're going to use within our conditions.

49
00:03:21,930 --> 00:03:23,580
We also draw a card.

50
00:03:23,820 --> 00:03:29,280
So whenever we're playing the game, the gameplay is drawing a card, drawing the next card, drawing

51
00:03:29,280 --> 00:03:29,970
the next card.

52
00:03:30,240 --> 00:03:33,470
We've got a value here that we can utilize if we want to.

53
00:03:33,690 --> 00:03:36,890
Currently, we're just setting a value of win equals draw.

54
00:03:37,080 --> 00:03:43,350
You can remove this or you can set boolean values and utilize this within your script as well.

55
00:03:43,530 --> 00:03:48,900
So for now, what I'm going to do is since I'm tweaking this, I'm going to remove that because we're

56
00:03:48,900 --> 00:03:50,040
not making use of it.

57
00:03:50,310 --> 00:03:52,080
So I'm not going to have that in the code.

58
00:03:52,590 --> 00:03:53,820
So we draw a card.

59
00:03:53,970 --> 00:03:59,940
So we have a card that's visually seen by the player and then we have one that's only currently sitting

60
00:03:59,940 --> 00:04:03,630
within the plate game where we can apply all of our logic.

61
00:04:03,900 --> 00:04:08,520
And if it's the start button that's clicked, we run through some different logic here.

62
00:04:08,520 --> 00:04:10,350
I can get rid of the console messages.

63
00:04:10,740 --> 00:04:12,290
We basically clear out.

64
00:04:12,300 --> 00:04:14,850
So this is the first run-Through of the game.

65
00:04:15,090 --> 00:04:19,230
So we know we need to clear out our gameplay area so we don't have any existing cards.

66
00:04:19,470 --> 00:04:23,580
We need to make a card and we need to toggle the buttons.

67
00:04:23,580 --> 00:04:28,200
So that's running this function, hiding the start button, showing the other buttons.

68
00:04:28,500 --> 00:04:35,070
And when we make a card, we run through this function where we generate what the card is going to look

69
00:04:35,070 --> 00:04:36,630
like that we're outputting.

70
00:04:36,810 --> 00:04:42,540
And this is just essentially drawing the next card that we're going to make use of the including that

71
00:04:42,540 --> 00:04:49,620
in start, because if we were to pull make card out here before our formula for current card wouldn't

72
00:04:49,620 --> 00:04:55,170
work because within a make a card, we're setting whatever the value of the current card is.

73
00:04:55,320 --> 00:04:58,800
So we're setting the value of the current card there in make a card.

74
00:04:58,980 --> 00:05:05,340
So we need to make sure that we run, make a card in this case after we've applied our game logic.

75
00:05:05,580 --> 00:05:07,680
So over here, we're applying some game logic.

76
00:05:07,680 --> 00:05:09,570
We're checking to see if the cards match.

77
00:05:09,810 --> 00:05:17,940
If they do and we're onto this part of the code because here is that we know that they've clicked something

78
00:05:17,940 --> 00:05:19,110
other than the start button.

79
00:05:19,410 --> 00:05:24,660
So we don't have to check what they clicked because whether they clicked higher or lower, it doesn't

80
00:05:24,660 --> 00:05:24,960
matter.

81
00:05:24,960 --> 00:05:29,280
We know that this is the next step and the player is actually actively playing the game.

82
00:05:30,180 --> 00:05:35,880
So we checked to make sure that the cards don't have matching values, otherwise it's a draw and all

83
00:05:35,880 --> 00:05:41,970
we do is make the next card and we automatically assign we automatically move to the next card.

84
00:05:41,970 --> 00:05:43,570
So there's no points assigned to that.

85
00:05:44,010 --> 00:05:51,660
Next, we check to see if the conditions for the player winning are matched and if they are if they

86
00:05:51,660 --> 00:05:56,850
guessed higher for the card and if it is higher or lower for the card and is lower, that means that

87
00:05:56,850 --> 00:05:57,930
they won that round.

88
00:05:58,140 --> 00:05:59,910
They their score increases.

89
00:06:00,270 --> 00:06:05,310
We output the new value of the score and then we output a message to them that it's next.

90
00:06:05,580 --> 00:06:09,480
And if they got it wrong, then we output that it's wrong.

91
00:06:09,600 --> 00:06:15,750
We toggle the start buttons and we still make the card always so the player can actually see what card

92
00:06:15,750 --> 00:06:16,830
was output there.

93
00:06:16,890 --> 00:06:20,970
But they're not going to have a higher, lower choices anymore after the toggle buttons.

94
00:06:20,970 --> 00:06:22,820
So they're not able to continue the game.

95
00:06:22,980 --> 00:06:25,190
We've got the drawing of the card.

96
00:06:25,200 --> 00:06:27,420
So this is one of the functions that we run here.

97
00:06:27,600 --> 00:06:30,810
When we make a new card, we draw the card.

98
00:06:31,020 --> 00:06:34,560
We check to see first if there is a length in the deck.

99
00:06:34,770 --> 00:06:41,040
And if there is, then we're good to draw an index value at random from the deck of cards.

100
00:06:41,260 --> 00:06:47,940
And this is always going to be decreasing because we're using splice to pull a value, an index value

101
00:06:47,940 --> 00:06:50,040
out of that deck array.

102
00:06:50,250 --> 00:06:56,040
And then once we pull that out, the deck shrinks so it will continuously shrink down until it hits

103
00:06:56,040 --> 00:06:56,610
zero.

104
00:06:56,760 --> 00:07:03,180
And then that's where we make a brand new deck of cards and we simply go back and we do a recursion

105
00:07:03,270 --> 00:07:07,110
to draw a card, goes back into this function to draw a card.

106
00:07:07,290 --> 00:07:10,350
So after we make a deck, we know at this point we need to make a deck.

107
00:07:10,470 --> 00:07:12,930
So we make a deck and then we draw another card.

108
00:07:13,350 --> 00:07:15,850
And over here we're making a deck.

109
00:07:16,140 --> 00:07:22,350
So this was a couple of loops that first we ran through the suits, then we went through the ranks.

110
00:07:22,500 --> 00:07:23,760
We built out the cards.

111
00:07:23,910 --> 00:07:25,590
We created them as objects.

112
00:07:25,770 --> 00:07:32,610
So we attached multiple values into those objects so that we could utilize them from our array.

113
00:07:32,730 --> 00:07:38,190
And we're simply pushing it into the deck, which built out our deck of cards and allowed us the ability

114
00:07:38,280 --> 00:07:40,980
to grab that out of the deck at random.

115
00:07:41,460 --> 00:07:45,870
And then lastly, we had our visuals here where we're making a card.

116
00:07:46,050 --> 00:07:51,900
So whenever we call a function, make a card, we've already got it stacked with the right object information

117
00:07:52,080 --> 00:07:56,550
to determine what suit it is, what rank it is and what value it is.

118
00:07:56,670 --> 00:08:03,420
So all of that is contained within the card when we send it over to make card and then make card function

119
00:08:03,630 --> 00:08:11,910
generates a brand new card on the fly, creating the TEMEL container element div adding in classes,

120
00:08:12,090 --> 00:08:13,620
setting up the position of it.

121
00:08:13,620 --> 00:08:18,870
So it's position left determined how many cards are already existing, otherwise they're just going

122
00:08:18,870 --> 00:08:20,190
to stack on top of each other.

123
00:08:20,200 --> 00:08:23,340
You're not going to see the next card in the next card and so on.

124
00:08:23,460 --> 00:08:24,960
And you can see the previous card.

125
00:08:25,200 --> 00:08:30,180
And we're also checking to see the suit because we know that hearts and diamonds are red and if they

126
00:08:30,180 --> 00:08:32,310
are, then we add the class of red.

127
00:08:32,460 --> 00:08:37,770
You can also see this when you inspect the element that this element as we built it out.

128
00:08:37,890 --> 00:08:45,290
So it's got a class, the parent has a class of card, it's red and that makes everything inside red.

129
00:08:45,300 --> 00:08:50,190
Of course, we're creating out the two separate main container areas.

130
00:08:50,190 --> 00:08:54,960
So we've got one where we've got the tiny eight with the hearts and then we've got a big area with the

131
00:08:54,960 --> 00:08:55,740
eight with the hearts.

132
00:08:55,890 --> 00:08:57,780
So it's split up with a line break.

133
00:08:57,780 --> 00:09:02,850
So it's the real difference between the two and we're outputting them both into the card.

134
00:09:03,210 --> 00:09:10,140
And as we build out that div, we append it to that div and then finally we output the div for the player

135
00:09:10,140 --> 00:09:12,860
to be able to see within the gameplay area.

136
00:09:12,900 --> 00:09:14,020
So now it's up to you.

137
00:09:14,100 --> 00:09:19,220
Take what you've learned in the earlier lessons, apply it, extend on it, really make it your own,

138
00:09:19,260 --> 00:09:23,370
have some fun with that experiment and enjoy working with JavaScript.

139
00:09:23,610 --> 00:09:29,940
Thanks again for taking this section and learning how to build out a Halo game using JavaScript.