1
00:00:00,270 --> 00:00:04,920
In this lesson, we're going to be setting up the variables and the values that we're going to be using

2
00:00:04,920 --> 00:00:07,190
in the upcoming lessons in order to run the game.

3
00:00:07,380 --> 00:00:10,110
So we do need to set some default variables.

4
00:00:10,470 --> 00:00:16,380
So setting up the values and these are the values of the particular options that are going to be hidden

5
00:00:16,380 --> 00:00:17,400
within the cases.

6
00:00:17,640 --> 00:00:19,600
So you can make up your own array.

7
00:00:19,710 --> 00:00:26,160
And I'm just going to create a random one, add in around 16 different values.

8
00:00:26,490 --> 00:00:29,730
And we're also going to make this game very dynamic and flexible.

9
00:00:29,740 --> 00:00:35,530
So even if we want to remove or want to add in additional values, that's going to be as well possible.

10
00:00:35,820 --> 00:00:39,470
So that's all of the different values that we have available to us.

11
00:00:39,720 --> 00:00:44,540
And then also setting up a few objects as well to contain some of the page objects.

12
00:00:44,730 --> 00:00:46,590
And I usually find that this is useful.

13
00:00:46,600 --> 00:00:51,700
So I set things up as global objects that I can access and use throughout the game.

14
00:00:51,930 --> 00:00:54,820
So this is going to contain all of the page content.

15
00:00:54,840 --> 00:00:56,610
The main page object content.

16
00:00:56,700 --> 00:00:57,300
Another one.

17
00:00:57,300 --> 00:00:59,870
Another global object that's going to be called game.

18
00:01:00,120 --> 00:01:04,010
So this is where we can add in all of the main game content that we're going to go through.

19
00:01:04,010 --> 00:01:06,730
This is our main game object that we're going to utilize.

20
00:01:06,750 --> 00:01:10,020
So page object is going to be related to the elements on the page.

21
00:01:10,260 --> 00:01:12,990
The game object is going to be related to the game objects.

22
00:01:13,050 --> 00:01:18,960
There is one function that I did want to introduce, and because we do need to have the values sorted

23
00:01:18,960 --> 00:01:19,830
numerically.

24
00:01:20,040 --> 00:01:27,960
And if you take this values and log out instead of console, log ready will log out the values and then

25
00:01:27,960 --> 00:01:29,710
we'll do a values sort.

26
00:01:29,760 --> 00:01:36,310
This is basic JavaScript array function and then also do the console log valves and we'll output that.

27
00:01:36,630 --> 00:01:42,000
So what do you think is going to happen here when we do sort and if you said that it's going to do the

28
00:01:42,110 --> 00:01:43,950
one 100, you're correct.

29
00:01:43,980 --> 00:01:48,870
So even though these are numbers within the array, it treats them as strings.

30
00:01:49,050 --> 00:01:52,490
So a lot of these array functions are string based.

31
00:01:52,500 --> 00:01:57,630
So it converts the items within the array to a string and then it does the sort.

32
00:01:57,630 --> 00:02:02,990
And that's why you're getting the ones, the twos, the threes, the force, the five sixes and so on.

33
00:02:03,000 --> 00:02:04,510
So that's why you're getting that type of support.

34
00:02:04,770 --> 00:02:06,810
So this is actually not what we want.

35
00:02:06,930 --> 00:02:13,080
And I want to have a default sort of those values happening initially when we load the values so that

36
00:02:13,080 --> 00:02:17,550
in case we do have some of the numbers that they're off as we're going to be building the game, we're

37
00:02:17,550 --> 00:02:19,110
going to be iterating through those numbers.

38
00:02:19,110 --> 00:02:24,870
And we do need to have them sorted numerically with the first one being the first one in the array and

39
00:02:24,870 --> 00:02:29,420
then the largest number being the last one having the largest index in the array.

40
00:02:29,820 --> 00:02:35,790
We can take the Vals array and then do a sort of use the sort function.

41
00:02:35,970 --> 00:02:39,710
But we're going to pass in some parameters into the search function.

42
00:02:39,720 --> 00:02:45,900
And this is a really neat trick with this function where when we're sorting through that, we're setting

43
00:02:45,900 --> 00:02:47,990
the parameters on how we want to return it.

44
00:02:48,300 --> 00:02:52,170
So we're returning the values of A and B that are being passed in.

45
00:02:52,200 --> 00:02:57,060
We're subtracting A from B, so going into the Mozilla developer network.

46
00:02:57,060 --> 00:03:02,160
So we have the sort sorts, the array in place and it returns back the sorted values.

47
00:03:02,310 --> 00:03:09,390
So we already saw this, that it's able to sort it and it sorts it within and numeric a string format.

48
00:03:09,400 --> 00:03:13,230
So we saw that we've got the one hundred thousand twenty one thirty.

49
00:03:13,650 --> 00:03:20,070
So you can also pass in and do a compare function within the area so you can pass in the first element

50
00:03:20,070 --> 00:03:21,030
and the second element.

51
00:03:21,250 --> 00:03:22,020
So that's what we do.

52
00:03:22,020 --> 00:03:26,670
And what the prototype does is when we pass in the parameters, it does the comparison.

53
00:03:26,880 --> 00:03:29,490
There's more information about how that comparison works.

54
00:03:29,700 --> 00:03:35,790
And so when we compare numbers and instead of strings, they compare the function, it can simply subtract

55
00:03:35,790 --> 00:03:41,240
a B from A, and this means that the following will sort the array in ascending order.

56
00:03:41,520 --> 00:03:47,880
And if we want to do it in descending order, we just do a B from A and that's going to do the descending

57
00:03:47,880 --> 00:03:48,180
order.

58
00:03:48,180 --> 00:03:54,180
So we're able to update the orders by simply updating which one we're subtracting from where.

59
00:03:54,210 --> 00:03:56,190
And there's more information available.

60
00:03:56,190 --> 00:04:00,970
And there's also the shorter format with the arrow expressions as well that can be done.

61
00:04:01,380 --> 00:04:08,250
So this is a way around that and a way to get it back to looking at the numbers instead of looking at

62
00:04:08,250 --> 00:04:09,210
the string values.

63
00:04:09,360 --> 00:04:15,000
And as you can see, that now error rate is sorted properly and as expected, also, let's load some

64
00:04:15,000 --> 00:04:16,080
additional parameters.

65
00:04:16,090 --> 00:04:21,620
So now that we've got our game object, we can use that and set up the offers.

66
00:04:21,840 --> 00:04:24,000
So this is at what point in the game?

67
00:04:24,000 --> 00:04:29,280
We want to have offers showing up and these are again going to be added in.

68
00:04:29,300 --> 00:04:35,910
So when there's 14 left, when there's four left and we're trying to make this game as dynamic as possible,

69
00:04:35,910 --> 00:04:39,380
add another method in at the end here, which is going to be a filter.

70
00:04:39,540 --> 00:04:42,210
So it's going to create a new array of all the elements.

71
00:04:42,210 --> 00:04:43,740
And that passed the test.

72
00:04:43,920 --> 00:04:50,250
And the test is that we want to make sure that we're opening up the cases and when we have cases left.

73
00:04:50,250 --> 00:04:53,880
So we've got this many cases, as we've got within the vows.

74
00:04:54,090 --> 00:04:58,860
And we know that if we've got less than the vows length, then we're going to run out of cases.

75
00:04:58,870 --> 00:04:59,790
So there's no point to.

76
00:04:59,800 --> 00:05:05,980
I have an offer at case 100, if we don't even have one hundred cases, so we want to make sure that

77
00:05:05,980 --> 00:05:08,440
we filter out that and we don't throw any errors.

78
00:05:08,590 --> 00:05:10,180
So I'll leave that hundred in there.

79
00:05:10,190 --> 00:05:11,650
So just so you can see what I mean.

80
00:05:11,890 --> 00:05:18,850
And the whole objective here, again, is to be as dynamic as possible with the game parameters so we

81
00:05:18,850 --> 00:05:24,190
can update the number of values, we can update the order of the values are being presented with the

82
00:05:24,190 --> 00:05:25,000
sort function.

83
00:05:25,180 --> 00:05:32,110
And this one is creating the game offers array, but it's basing it on how many values we've got left

84
00:05:32,410 --> 00:05:34,350
and how many values we have available.

85
00:05:34,450 --> 00:05:40,150
So similar to what we just did with the sort, we're going to do a return and we're returning back the

86
00:05:40,150 --> 00:05:43,570
value of X only if it matches the parameter.

87
00:05:43,690 --> 00:05:48,660
And that's looking at and making sure that it's less than the value of vowels length.

88
00:05:48,670 --> 00:05:52,960
And then one last one where what's similar to what we just did.

89
00:05:53,020 --> 00:06:00,460
So taking those game offers and I want to sort them and because these are numbers we have to pass in

90
00:06:00,460 --> 00:06:08,530
the parameters into sort function in order to be able to compare depending on the values.

91
00:06:08,540 --> 00:06:10,320
And I want to actually order it.

92
00:06:10,510 --> 00:06:16,300
So in this one, we started with the smallest number going to the largest, and I want to reverse sort

93
00:06:16,300 --> 00:06:16,540
that.

94
00:06:16,550 --> 00:06:20,250
So do you know how to do that instead of doing a return A plus B?

95
00:06:20,260 --> 00:06:22,480
So let me show you what's going to be output.

96
00:06:22,720 --> 00:06:28,990
If we do A, return A plus B and I'll copy the offers into the console so you can see the uptake take

97
00:06:28,990 --> 00:06:29,370
place.

98
00:06:29,680 --> 00:06:31,190
So this this is the offer.

99
00:06:31,220 --> 00:06:34,630
So starting at one, two, four, 12 and 14.

100
00:06:35,140 --> 00:06:37,390
But we are going to be starting that.

101
00:06:37,570 --> 00:06:44,770
We need to have 14 first because we're starting out as we remove cases, the numbers are going to go

102
00:06:44,770 --> 00:06:50,140
down and we want to be able to match at a particular point throughout the game that this is when we

103
00:06:50,140 --> 00:06:51,660
want to send an offer through.

104
00:06:51,970 --> 00:06:54,220
So that's where we need to reverse this.

105
00:06:54,400 --> 00:07:01,960
And instead of A minus B, the comparison is going to be B minus A, and when I do that, the order

106
00:07:01,960 --> 00:07:09,070
of the array changes and we've got the largest number first going down until it reaches the smallest

107
00:07:09,070 --> 00:07:09,490
number.

108
00:07:09,580 --> 00:07:16,720
And also notice as well that the one hundred got removed from that offers array because we don't have

109
00:07:16,720 --> 00:07:17,830
one hundred cases.

110
00:07:17,850 --> 00:07:21,460
Well, that if we have 16, what's going to get removed?

111
00:07:21,460 --> 00:07:28,180
But then if I add in another number here, then it's going to automatically add that offer in at number

112
00:07:28,180 --> 00:07:30,090
sixteen, the offers loaded.

113
00:07:30,100 --> 00:07:35,410
So these are when the offers are going to be presented to the player and this is going to be fully dynamic

114
00:07:35,410 --> 00:07:40,990
now because it's going to be dependent on how many values are within the values array and we've got

115
00:07:40,990 --> 00:07:43,460
all of the parameters ready to go.

116
00:07:43,480 --> 00:07:44,800
So this is all we need.

117
00:07:45,160 --> 00:07:50,260
So now that we've set up all of the initial game parameters that we need in order to run the game,

118
00:07:50,410 --> 00:07:53,320
and then, of course, these are dynamic now so they can be updated.

119
00:07:53,320 --> 00:07:58,120
And as they're updated, they're going to change how the game is played and how we load the content

120
00:07:58,120 --> 00:07:58,860
of the game.

121
00:07:58,900 --> 00:08:04,170
And you can use whatever values we want within the values array as well as the game offers array.

122
00:08:04,360 --> 00:08:05,710
Now, that's fully dynamic.

123
00:08:05,830 --> 00:08:09,250
It will update itself and fully function within the gameplay.

124
00:08:09,520 --> 00:08:17,440
And in this lesson, it was really about the sorting of the arrays that we can pass in parameters in

125
00:08:17,440 --> 00:08:19,750
order to do a compare function in the array.

126
00:08:20,020 --> 00:08:26,170
And there's more information about about it at the Mozilla Developer Network within the array prototype

127
00:08:26,170 --> 00:08:27,550
sort method.

128
00:08:27,790 --> 00:08:32,620
And it's going to give you more information as well as some really cool examples to find out more about

129
00:08:32,620 --> 00:08:33,700
how this works.

130
00:08:33,880 --> 00:08:39,670
So once you've set up your base game starting values, you're going to be ready to move on to the next

131
00:08:39,670 --> 00:08:40,180
lesson.

132
00:08:40,180 --> 00:08:45,790
We're going to apply some styling, so let's make this look nice, working on the different models,

133
00:08:45,820 --> 00:08:51,610
working on the game screen so that we can be ready to do the communication in JavaScript to the player.

134
00:08:51,730 --> 00:08:53,530
So that's to come in the next lesson.