1
00:00:00,330 --> 00:00:06,650
Hey, welcome back, glad you made it to the last lesson of the S. We're going to do a quick code review.

2
00:00:06,840 --> 00:00:12,720
We applied some styling to make it look better, created a little bit of HTML so that we've got some

3
00:00:12,750 --> 00:00:17,010
basic structure that we can begin interacting with using JavaScript.

4
00:00:17,250 --> 00:00:18,960
And then we came to JavaScript.

5
00:00:19,110 --> 00:00:24,510
We tried to focus the bulk of the course, obviously on JavaScript, because this is a JavaScript project

6
00:00:24,520 --> 00:00:31,380
course, setting up a main global variable that we use to contain all of the dynamic values that we're

7
00:00:31,380 --> 00:00:32,880
going to need within our gameplay.

8
00:00:33,150 --> 00:00:36,960
So we're starting it off by setting up a couple different values.

9
00:00:36,960 --> 00:00:40,170
So a minimum and maximum for our random number.

10
00:00:40,320 --> 00:00:46,910
So these can be also updated and changed as needed to make the dynamic functionality of the game.

11
00:00:46,920 --> 00:00:53,520
All of the main gameplay started whenever the dorm was loaded, and once that loaded, we loaded the

12
00:00:53,520 --> 00:00:55,860
elements into the game object.

13
00:00:55,980 --> 00:01:00,570
So we've got that still that global variable that's going to contain all of the values that are going

14
00:01:00,570 --> 00:01:02,840
to be changing throughout the gameplay.

15
00:01:03,030 --> 00:01:07,200
So we've got all of the elements selected here so we can easily access them.

16
00:01:07,410 --> 00:01:11,880
We've got the number of guesses being tracked in here and this is a global value.

17
00:01:11,880 --> 00:01:15,450
So it's always changing, always updating as the players playing the game.

18
00:01:15,660 --> 00:01:19,770
We can also dynamically change the minimum and maximum values if needed.

19
00:01:19,770 --> 00:01:25,060
And then we've got the number that was randomly generated and that the user has to guess.

20
00:01:25,320 --> 00:01:31,980
So the objective is that the user inputs their guesses and we compare it with the value that's being

21
00:01:31,980 --> 00:01:36,120
discussed and we determine if the player got the value correct.

22
00:01:36,270 --> 00:01:41,460
And if not, then we send them back to continue guessing and we give them a little bit of a hint whether

23
00:01:41,460 --> 00:01:42,800
it's higher or lower.

24
00:01:43,110 --> 00:01:46,260
So once we selected the elements, we needed some interaction.

25
00:01:46,260 --> 00:01:50,700
And that was the best listener on the click button, because, of course, the objective of the game

26
00:01:50,700 --> 00:01:54,000
is to click, to enter and a guess and to click that button.

27
00:01:54,330 --> 00:01:59,730
And then we also had an insight function that set up some of the game structure.

28
00:01:59,940 --> 00:02:01,770
So we set up a number of guesses.

29
00:02:01,770 --> 00:02:08,520
And the object we also generated our random number that the user needs to guess that we sent in a message

30
00:02:08,520 --> 00:02:15,390
to the player to guess a number and outputting the game minimum and maximum values so that the user

31
00:02:15,390 --> 00:02:22,020
can see and get the parameters that they need to work with for the gameplay, creating a function to

32
00:02:22,020 --> 00:02:27,000
send messages, because we've got quite a few messages that were communicating back to the player.

33
00:02:27,010 --> 00:02:28,500
So we've got a function for that.

34
00:02:28,740 --> 00:02:33,450
And what this function does is it updates that inner HTML of the message area.

35
00:02:33,450 --> 00:02:35,280
So that's this little area up here.

36
00:02:35,550 --> 00:02:42,720
Also updating the color text in that message area and then updating the border color of the input.

37
00:02:42,720 --> 00:02:49,170
So that's updating that, turning it blue as well as we've got the background color of the button that's

38
00:02:49,170 --> 00:02:49,770
updating.

39
00:02:49,770 --> 00:02:56,730
And we also have if s.L are comes in as false, if there's no value there, then we've got some default

40
00:02:56,730 --> 00:02:57,870
values that we're setting.

41
00:02:58,020 --> 00:03:00,960
And we also update in the color of the button as well.

42
00:03:01,170 --> 00:03:03,510
So that's what we set up for the message.

43
00:03:03,510 --> 00:03:07,410
And we continue to use message multiple times within the code.

44
00:03:07,650 --> 00:03:14,490
So once the game starts, it waits for the user to take action, to enter in a value into the input

45
00:03:14,490 --> 00:03:14,880
area.

46
00:03:15,120 --> 00:03:19,750
And once that value is entered in, they click the button to create their guess.

47
00:03:19,770 --> 00:03:22,730
So the guess is where all of the game logic sits.

48
00:03:22,980 --> 00:03:27,180
So we've got whenever that user clicks, that guess.

49
00:03:27,180 --> 00:03:30,660
But it's invoking a function called guess value.

50
00:03:30,990 --> 00:03:32,670
And within that, yes, value.

51
00:03:32,880 --> 00:03:38,760
We're doing a check to see if that button contains a class of a replay.

52
00:03:38,970 --> 00:03:45,210
And if it does, that means that the player is in a replay mode where they're playing a next round of

53
00:03:45,210 --> 00:03:45,660
the game.

54
00:03:45,870 --> 00:03:48,440
So that's where we need to rebuild to iron it.

55
00:03:48,720 --> 00:03:49,700
So rebuild?

56
00:03:50,280 --> 00:03:51,540
No, they're guessing it.

57
00:03:51,540 --> 00:03:57,330
And we also update some of the values and then we're updating the button contents to be guests, as

58
00:03:57,330 --> 00:04:01,700
well as some of the other values that we reset when the game was over.

59
00:04:01,740 --> 00:04:07,140
We need to reset them back to the players, to the play styles and values we increment.

60
00:04:07,140 --> 00:04:11,370
And if it's not replay in the button this way, we can use the same button.

61
00:04:11,370 --> 00:04:16,140
Or it could have had two buttons, one that does the replay and then then one that shows whenever we're

62
00:04:16,140 --> 00:04:16,980
doing guesses.

63
00:04:16,980 --> 00:04:18,540
So we increase the guesses.

64
00:04:18,540 --> 00:04:21,450
If the user is making a guess, we clear out.

65
00:04:21,450 --> 00:04:25,260
We get the guest value, we clear out the value of the guests.

66
00:04:25,260 --> 00:04:27,360
So there's always no value in there.

67
00:04:27,360 --> 00:04:33,630
After the guest has been sent through, we make sure that we're converting the guests value of the input

68
00:04:33,630 --> 00:04:34,980
into an integer.

69
00:04:35,010 --> 00:04:41,310
As with forms, typically the content comes in within a string format in JavaScript and JavaScript does

70
00:04:41,310 --> 00:04:47,970
have dynamic types so it can switch between numbers and strings, but it's always good to kind of force

71
00:04:47,970 --> 00:04:49,140
it to a number.

72
00:04:49,290 --> 00:04:54,060
And then this is also where we can check to see if the temp guess is a number.

73
00:04:54,060 --> 00:04:58,770
And if it's not, then we're sending back an error message to the player that they need to enter in

74
00:04:58,770 --> 00:04:59,130
digits.

75
00:04:59,130 --> 00:04:59,820
So we make every.

76
00:05:00,270 --> 00:05:02,160
That really stands out as an error.

77
00:05:02,190 --> 00:05:08,010
Next, we check to see if the player has won, if they've guessed the number correctly, and if they

78
00:05:08,010 --> 00:05:14,370
have, then we pass over a message to the player that they've won and how many guesses it took, what

79
00:05:14,370 --> 00:05:15,530
they essentially scored.

80
00:05:15,660 --> 00:05:17,940
And then we run our game over function.

81
00:05:17,940 --> 00:05:25,830
And the GAMEOVER function really just resets the gameplay to be the start value as well as it sets it

82
00:05:25,830 --> 00:05:28,160
up to rebuild the game.

83
00:05:28,170 --> 00:05:29,880
So we've got restart game.

84
00:05:30,120 --> 00:05:33,960
We hide the input because at this point we don't need an input.

85
00:05:33,960 --> 00:05:41,130
And we also add that class of replay to the button so that what next time the player clicks the button,

86
00:05:41,250 --> 00:05:43,110
we can check if this class exists.

87
00:05:43,110 --> 00:05:47,160
And if it does, then we know that that restart was the one that was clicked.

88
00:05:47,190 --> 00:05:49,260
We also update the game, Max.

89
00:05:49,260 --> 00:05:54,960
So making the game more difficult every round, every time they solve it, it's going to have a larger

90
00:05:54,960 --> 00:05:56,280
spread between the numbers.

91
00:05:56,350 --> 00:05:57,950
That's what happens when they get it correct.

92
00:05:57,960 --> 00:06:05,940
If they don't have it correct, then we check to see if the guests value is larger than the game number.

93
00:06:06,210 --> 00:06:10,650
And if it is, then we pass on a message that it should be lower their guess.

94
00:06:10,650 --> 00:06:13,830
And if it's not than we pass on a message that's higher.

95
00:06:14,070 --> 00:06:19,860
We also set some of the color defaults, passing it into message, all of those values that then of

96
00:06:19,860 --> 00:06:25,640
course, we utilize updating that style properties of several of the elements on the page and then the

97
00:06:25,870 --> 00:06:27,120
game continuously loops.

98
00:06:27,120 --> 00:06:33,720
So the design of the game is to constantly put it back to the player, to add their guesses and try

99
00:06:33,720 --> 00:06:38,270
to guess the hidden number in as few guesses as possible.

100
00:06:38,280 --> 00:06:44,310
Thanks again for taking this course and for taking the section building the no guessing game.

101
00:06:44,310 --> 00:06:49,170
I've included all of the source code so you could try it out for yourself, experiment with it, extend

102
00:06:49,170 --> 00:06:54,870
on it, have some fun with it, and practice using and manipulating DOM elements using JavaScript.