1
00:00:00,440 --> 00:00:05,060
This lesson we're going to do a quick run through in an overview of all of the source code that we've

2
00:00:05,060 --> 00:00:11,960
built up in the earlier lessons, so we added in a little bit of styling also, we went through great

3
00:00:11,960 --> 00:00:18,620
lengths not to have to write any HTML, and we generated the whole game interaction using JavaScript.

4
00:00:18,770 --> 00:00:19,870
So there's no HTML.

5
00:00:19,970 --> 00:00:23,180
It's all within the script tags and all generated with JavaScript.

6
00:00:23,570 --> 00:00:24,610
And I know what you're thinking.

7
00:00:24,620 --> 00:00:29,570
It was probably easier to generate and just write it out in HTML and it probably was.

8
00:00:29,750 --> 00:00:34,010
But this is in order to practice creating elements on the fly with JavaScript.

9
00:00:34,310 --> 00:00:39,080
So we have to make sure that the Windows object loaded and once the Windows object loaded, that we

10
00:00:39,080 --> 00:00:43,850
can initiate the game content building function and that's the it.

11
00:00:44,000 --> 00:00:48,960
And this is where we build out all of those elements that we needed in order to create that game interaction.

12
00:00:49,190 --> 00:00:51,650
So simply adding in and building our gameboard.

13
00:00:52,040 --> 00:00:57,680
We also had before we did that, we also set up some variables that we're going to use within the course

14
00:00:57,680 --> 00:00:58,840
of the gameplay.

15
00:00:59,180 --> 00:01:02,210
So we had our array full of all the words that we're using.

16
00:01:02,360 --> 00:01:08,440
And then we've got a couple of global variables that we use and we reference later on within the functions.

17
00:01:09,050 --> 00:01:15,770
So once we've built out our game, we added in an event listener to the button in order to start and

18
00:01:15,770 --> 00:01:16,890
to kick off the game.

19
00:01:17,240 --> 00:01:22,970
So what that does is that launches the start function and all of the stuff happens within the start

20
00:01:22,970 --> 00:01:23,380
function.

21
00:01:23,570 --> 00:01:28,280
I get get rid of these console messages because of course, we don't need them for a game functionality.

22
00:01:28,490 --> 00:01:31,760
We set a variable for the current to be zero.

23
00:01:31,850 --> 00:01:33,200
So that initiates it.

24
00:01:33,200 --> 00:01:37,820
And even if we're starting the game again, there's always going to reset it back to zero.

25
00:01:38,060 --> 00:01:39,680
We select our start time.

26
00:01:39,800 --> 00:01:41,960
So this is when the game kicks off.

27
00:01:41,960 --> 00:01:45,460
I'd that start button so that the player doesn't see that anymore.

28
00:01:45,470 --> 00:01:48,410
Create a temporary array using the my word.

29
00:01:48,410 --> 00:01:48,800
Sorry.

30
00:01:48,890 --> 00:01:55,860
So we slice all of those values and that creates a temporary, we sort that temporary.

31
00:01:55,880 --> 00:02:02,390
So remember the function that we're using sort and this was a quick way to reorganize an array randomly.

32
00:02:02,750 --> 00:02:05,580
And then we also do that for the my words as well.

33
00:02:06,110 --> 00:02:09,770
So now we've got both of them sorted and they're going to be in different orders.

34
00:02:09,950 --> 00:02:14,720
And this helped us when we're presenting the content and as we're outputting that content.

35
00:02:14,810 --> 00:02:18,080
So it's not the same, we take our game object.

36
00:02:18,080 --> 00:02:24,020
So that game element that we created earlier with the class of game, adding it into an object called

37
00:02:24,020 --> 00:02:28,070
game that we can reuse and we can add elements to content, too.

38
00:02:28,640 --> 00:02:33,980
And then we loop through that array that we built out that we just duplicated from the Mairie.

39
00:02:34,130 --> 00:02:37,130
So contains all of the words that we need to output.

40
00:02:37,130 --> 00:02:43,850
We use a variable called temp and we split the value of the string value of the word.

41
00:02:43,850 --> 00:02:51,980
So the word is item and we split that using the JavaScript method, turning the string into an array

42
00:02:52,100 --> 00:02:57,260
with all of the different letters as array items, and then we resort that array.

43
00:02:57,290 --> 00:03:03,800
So the same function that we did up here where we resort that value and then we join it back together.

44
00:03:03,920 --> 00:03:11,030
So recreating temp and recreating it back into a string and then we have a scrambled, essentially scrambled

45
00:03:11,030 --> 00:03:14,790
word and then we can utilize that in our output.

46
00:03:15,230 --> 00:03:17,600
Next, we create an element.

47
00:03:17,630 --> 00:03:22,490
So generate an element using document, create element adding in some inner text.

48
00:03:22,490 --> 00:03:28,910
So this is just so all of the text is the same until we hover over it, adding in class of box so we

49
00:03:28,910 --> 00:03:33,380
get some styling to create them into more of a box style, setting some defaults.

50
00:03:33,620 --> 00:03:42,830
So we're setting default to red in color as well as we add hidden value of the element of the elements

51
00:03:43,010 --> 00:03:50,000
of a value of word there and setting that word to be equal to the word that we're outputting from the

52
00:03:50,000 --> 00:03:56,270
array so that we can compare that later on to check to see if the player got the word correct.

53
00:03:56,510 --> 00:03:58,020
We added in some event listeners.

54
00:03:58,020 --> 00:04:04,880
So Mouse, enter where we update the color and then we update the text that's going to be contained

55
00:04:04,880 --> 00:04:06,410
within that box.

56
00:04:06,860 --> 00:04:11,090
And then once the most leaves, we reset it back to what originally was.

57
00:04:11,270 --> 00:04:14,390
And we had the word select and we also have the word select there as well.

58
00:04:14,900 --> 00:04:18,530
Next, we add an event listener and this is the click event.

59
00:04:18,740 --> 00:04:20,630
So this is that player interaction.

60
00:04:20,780 --> 00:04:24,770
So the player interacts with that content, they click it.

61
00:04:25,040 --> 00:04:31,250
We do a comparison of the word we've picked up over here, as well as whatever the current word is that

62
00:04:31,250 --> 00:04:32,390
the player is searching for.

63
00:04:32,750 --> 00:04:39,650
If it's a match, then we add the class of hidden, effectively hiding that box element, and then we

64
00:04:39,650 --> 00:04:46,220
increment the current value of the item, the index value that we're on in the array, and then we run

65
00:04:46,220 --> 00:04:51,150
the function next word, which generates out the next word visibly for the player.

66
00:04:51,500 --> 00:04:54,320
We also have an else wrong going into the console.

67
00:04:54,590 --> 00:04:59,420
So this one we're not really utilizing, but we could potentially penalize the.

68
00:05:00,380 --> 00:05:05,780
Player for getting something wrong, so we could add to that, so that's an addition that we could add

69
00:05:05,780 --> 00:05:06,670
into the gameplay.

70
00:05:07,040 --> 00:05:13,880
And then once we've generated all of the elements, object information, we simply append it to game.

71
00:05:14,030 --> 00:05:19,700
And then once we've wrapped up all of those elements that we've added all that functionality and generated,

72
00:05:19,850 --> 00:05:21,770
we want to generate out the next word.

73
00:05:21,890 --> 00:05:26,120
And that's going to be for the player to be able to see the next word that is available.

74
00:05:26,270 --> 00:05:32,600
And because the current is set to zero, it's going to show that first word within that array.

75
00:05:33,080 --> 00:05:38,830
And then we go through checking to see if the value of current is larger or equal to the my words length.

76
00:05:39,110 --> 00:05:41,070
And that means that the game is over.

77
00:05:41,180 --> 00:05:43,790
And if the game is over, we get the end time.

78
00:05:43,970 --> 00:05:48,860
We calculate subtracting the start time from the end time, dividing it by a thousand.

79
00:05:48,980 --> 00:05:51,380
So that gives us how many seconds the game was played.

80
00:05:51,590 --> 00:05:57,860
We update the game content, erasing all of those elements with the words because we're resetting it

81
00:05:57,860 --> 00:06:01,910
back to the beginning set so that we can launch start again.

82
00:06:02,060 --> 00:06:08,030
We saw that start button and then we output to the player the game over and how many seconds it took.

83
00:06:08,360 --> 00:06:14,810
And otherwise, if the game isn't over, then we output the next word for the user to select from the

84
00:06:14,810 --> 00:06:16,580
elements that are available on the page.

85
00:06:16,760 --> 00:06:23,960
We create a function to easily output messages into our game area for the player to be able to read.

86
00:06:24,810 --> 00:06:30,180
And it's actually that was a wrap up of all of the functionality that we had within our gameplay, and

87
00:06:30,180 --> 00:06:35,730
I do suggest that you try this out for yourself and get familiar with all this JavaScript functionality.

88
00:06:35,910 --> 00:06:38,840
And also we built this out to be dynamic.

89
00:06:39,000 --> 00:06:45,480
So even if we were to add in additional words, our application would wouldn't break it still be functional

90
00:06:45,480 --> 00:06:49,790
and we could add new words and we could have multiple arrays of words and so on.

91
00:06:49,800 --> 00:06:50,850
So have some fun with it.

92
00:06:51,060 --> 00:06:52,110
Try it out for yourself.

93
00:06:52,110 --> 00:06:57,090
And remember, all of the source code is included so you can easily copy and paste the code in order

94
00:06:57,090 --> 00:06:59,730
to get the same application working within your editor.

95
00:06:59,790 --> 00:07:04,580
Thanks again for taking this section and learning how to build this application from scratch.