1
00:00:00,090 --> 00:00:05,760
This lesson, we're going to be doing our final code review, and this is where we take the opportunity

2
00:00:05,760 --> 00:00:10,020
to play through a game just to make sure that it's functioning as intended.

3
00:00:10,050 --> 00:00:13,260
We have a start button, come into the game, press start.

4
00:00:13,530 --> 00:00:18,720
We're represented with a bunch of letters and then we've got our possible solution.

5
00:00:18,930 --> 00:00:22,770
So we know the word that we're looking for has eight characters.

6
00:00:22,770 --> 00:00:27,840
So we select any one of the letters to start with and we see that we get a message back, not found.

7
00:00:27,840 --> 00:00:28,990
Eight letters left.

8
00:00:29,010 --> 00:00:30,900
So next, let's try something else.

9
00:00:30,930 --> 00:00:34,680
Got an L you found L letter one time, seven letters.

10
00:00:34,890 --> 00:00:37,230
And I think I know what the answer here is.

11
00:00:37,230 --> 00:00:42,210
And of course I do, because I set up the wording and it is also my name.

12
00:00:42,210 --> 00:00:45,750
So we found C letter one time, zero letters left.

13
00:00:45,750 --> 00:00:47,160
We get our start button again.

14
00:00:47,400 --> 00:00:49,560
So we get a next option here.

15
00:00:49,560 --> 00:00:52,540
And I have a feeling I know what this one is as well.

16
00:00:52,560 --> 00:00:58,350
So usually it's good idea to play through the game just to make sure that everything is working as intended

17
00:00:58,560 --> 00:01:01,390
and that there are no problems with the gameplay.

18
00:01:01,410 --> 00:01:07,920
So once you've played through the game and this last one is, of course, the game should end and no

19
00:01:07,920 --> 00:01:09,980
more words, the game is completed.

20
00:01:10,020 --> 00:01:13,500
So that's a really basic hangmen game that we created.

21
00:01:13,560 --> 00:01:16,560
Now let's do a quick run through of the code going in.

22
00:01:16,560 --> 00:01:21,750
We set up some styling to make it look better, of course, set up our HTML.

23
00:01:21,750 --> 00:01:27,510
So try to keep that as a minimal as possible because we did want to focus a lot of the course lessons

24
00:01:27,660 --> 00:01:29,460
on JavaScript, of course.

25
00:01:29,880 --> 00:01:36,720
So set up a little bit of HTML there and then we need it to create our variable array with our string

26
00:01:36,720 --> 00:01:40,560
values that we wanted to use to output those values for the player.

27
00:01:40,860 --> 00:01:45,260
We create a player object to contain information that the player can utilize.

28
00:01:45,300 --> 00:01:52,950
Also selecting out all of the elements as objects in JavaScript so we can so it can be used within the

29
00:01:52,950 --> 00:01:55,860
code that we added an event listener to the button.

30
00:01:55,860 --> 00:01:57,390
We only have one button on the page.

31
00:01:57,630 --> 00:02:03,960
So that's our start button clearing out any inner HTML that might already be sitting within those elements.

32
00:02:03,960 --> 00:02:11,550
One and two, we loop through all of our words that are available within the my words are reset the

33
00:02:11,550 --> 00:02:13,980
button display to be non sorted.

34
00:02:14,160 --> 00:02:21,960
The my words array randomly sorted, selected out the first item in the array set up to a variable the

35
00:02:21,960 --> 00:02:22,320
word.

36
00:02:22,440 --> 00:02:29,310
Then we took the word and we split the string into an array so that we had an array with all of the

37
00:02:29,310 --> 00:02:31,050
letters that are contained within the word.

38
00:02:31,050 --> 00:02:36,840
Next, we built out the board for the player to be able to interact with, and if not, if there were

39
00:02:36,840 --> 00:02:38,820
no words left that we ended the game.

40
00:02:38,880 --> 00:02:45,300
The main core function was the building of the board where we loop through the values within the solution

41
00:02:45,300 --> 00:02:45,480
here.

42
00:02:45,490 --> 00:02:48,930
So this is that array that we created from the selected word.

43
00:02:48,930 --> 00:02:56,040
We created elements, bunch of diffs, added a class of letter to set some default in our text to that

44
00:02:56,040 --> 00:03:03,510
also hyd letter object in the background so we could utilize that and then appended it to our output

45
00:03:03,720 --> 00:03:05,850
element with the class of output two.

46
00:03:05,850 --> 00:03:13,800
And then once we added it into our document object, we could use the document query selector all to

47
00:03:13,800 --> 00:03:20,760
select all of those into a node list that we can then utilize and loop through to check our solution

48
00:03:20,760 --> 00:03:28,460
for the player we built out the all of the available letters using from character code created diffs.

49
00:03:28,770 --> 00:03:34,260
Add in a class of letter, created hidden value in my letter, object within the element.

50
00:03:34,260 --> 00:03:40,980
And then we created our handler, which was the same function that we would remove out to make it only

51
00:03:40,980 --> 00:03:42,270
clickable once.

52
00:03:42,480 --> 00:03:50,910
So we added that as an event listener updated our inner HTML to be representative of the letter within

53
00:03:50,910 --> 00:03:54,660
the tenth value and then output it into our output.

54
00:03:54,690 --> 00:04:01,140
One object that is indicated by the class of output one and in the elements.

55
00:04:01,140 --> 00:04:07,350
And we attach the handler as our click function, which made it easy to remove.

56
00:04:07,530 --> 00:04:12,870
So once it's click, we could remove the event listener just as easily as we added in the event listener.

57
00:04:12,870 --> 00:04:17,010
We added in a class because we want to feed it away a little bit.

58
00:04:17,020 --> 00:04:23,280
So this letter is no longer clickable and we want to have something different visually for the player.

59
00:04:23,430 --> 00:04:29,910
Set up some default variables that we could utilize in order to output messaging, as well as calculate

60
00:04:29,910 --> 00:04:35,280
the win for the player loop through all of the available letters in the word.

61
00:04:35,280 --> 00:04:42,480
And then if we did find it, we updated it to the right character so that we were slowly representing

62
00:04:42,480 --> 00:04:43,980
the solution to the player.

63
00:04:43,980 --> 00:04:47,490
We calculated how many how many letters the player got right in there.

64
00:04:47,490 --> 00:04:50,970
Guess as well as how many letters they currently have right.

65
00:04:50,970 --> 00:04:57,210
To use that value of how many they got currently right within the guests to output a message to the

66
00:04:57,210 --> 00:04:57,600
player.

67
00:04:57,690 --> 00:04:59,610
And then also we calculated how.

68
00:04:59,720 --> 00:05:04,730
The letters we have left and if we don't have any letters left, that means that the players solve our

69
00:05:04,730 --> 00:05:07,420
puzzle and we can show them the start button again.

70
00:05:07,430 --> 00:05:11,390
And as well, we've put out some messaging to the players so they know what's going on in the game.

71
00:05:11,460 --> 00:05:12,680
This is a quick run through.

72
00:05:12,680 --> 00:05:18,170
And I do suggest that you take the source code that has been provided within the lessons, try it out

73
00:05:18,170 --> 00:05:23,210
for yourself, experiment a little bit, extend on the functionality that we've gone through in the

74
00:05:23,210 --> 00:05:26,000
earlier lessons and build out your own version of this game.

75
00:05:26,060 --> 00:05:28,970
Thanks again for taking the section and the lessons of this course.