1
00:00:00,450 --> 00:00:01,380
Welcome back.

2
00:00:01,410 --> 00:00:06,240
This lesson is going to be the one where we're going to build out that random sequence that's going

3
00:00:06,240 --> 00:00:11,670
to play and that the user needs to watch and then mimic that same sequence.

4
00:00:11,970 --> 00:00:16,530
So let's open up our Ed and go into the run sequence function.

5
00:00:16,800 --> 00:00:22,170
And the first thing that we want to do within the run sequence is I want to select all of the current

6
00:00:22,170 --> 00:00:24,230
squares within our dorm.

7
00:00:24,660 --> 00:00:33,330
So I'm going to create a new object, call it squares using document query selector, and we're going

8
00:00:33,330 --> 00:00:38,910
to use query selector all because we want to grab all of the elements on the page that have a class

9
00:00:38,910 --> 00:00:39,700
of box.

10
00:00:40,020 --> 00:00:44,940
So essentially there's going to be four of them because we did build four of them out and we're going

11
00:00:44,940 --> 00:00:51,590
to use this random value in order to determine what random color.

12
00:00:51,600 --> 00:00:56,910
So out of the four colors that we have available, which one we want to light up, and we're going to

13
00:00:56,910 --> 00:00:59,820
build out that sequence within that type of format.

14
00:01:00,750 --> 00:01:09,390
We're also because this is creating a brand new sequence each time we need to pass in a number and we're

15
00:01:09,390 --> 00:01:10,860
going to loop through that number.

16
00:01:10,890 --> 00:01:15,570
So this number will be dynamically counting down from the value of Planum.

17
00:01:15,810 --> 00:01:19,760
So the first time we run through it will run this through one time.

18
00:01:20,010 --> 00:01:26,130
And the way that we're going to do that is that we're going to create a condition here that's going

19
00:01:26,130 --> 00:01:31,200
to check to see if the value of NUM is less than zero.

20
00:01:31,440 --> 00:01:34,380
And if it is, then we've run through the sequence.

21
00:01:34,590 --> 00:01:41,250
So every time we do a pass through of a run sequence, we're going to decrease the value of NUM by one

22
00:01:42,060 --> 00:01:46,670
and we're going to continuously pass through that value within a loop within this function.

23
00:01:47,010 --> 00:01:50,560
We're going to also be setting the value of play to true.

24
00:01:50,850 --> 00:01:56,460
So this means that we're only going to allow the user to build their sequence after our sequence has

25
00:01:56,460 --> 00:01:57,360
finished running.

26
00:01:57,540 --> 00:02:01,610
And this is going to allow us to prevent cheating within the game.

27
00:02:01,620 --> 00:02:07,080
Otherwise the user could just watch as the colors appeared and click those same colors building out

28
00:02:07,080 --> 00:02:08,290
their own sequence.

29
00:02:08,550 --> 00:02:11,490
So we want to make sure that that is not available.

30
00:02:11,730 --> 00:02:15,220
And then here we just simply want to return back that function.

31
00:02:15,390 --> 00:02:17,510
So it's going to return it back to the player area.

32
00:02:18,120 --> 00:02:20,280
So selecting out a random number.

33
00:02:20,820 --> 00:02:27,420
So we need a random number and we can take a look at what's available at MDN, the Musila Developer

34
00:02:27,420 --> 00:02:27,810
Network.

35
00:02:28,050 --> 00:02:29,790
There's quite a bit for math.

36
00:02:29,970 --> 00:02:32,780
We need to use some of the math methods that are available.

37
00:02:33,060 --> 00:02:38,940
First of all, math random, which is going to return our random floating point number from zero to

38
00:02:38,940 --> 00:02:41,700
one, not but not including one.

39
00:02:41,940 --> 00:02:45,900
And you can take a look at the example here to get a better idea of what's being returned back.

40
00:02:46,410 --> 00:02:51,420
And when we run it, we see that it returns back this long number.

41
00:02:51,420 --> 00:02:55,370
So zero decimal and bunch of digits after that.

42
00:02:55,710 --> 00:03:02,340
And so what we want to do is we want to multiply this by the number that we want to use and we want

43
00:03:02,340 --> 00:03:09,880
to use math flaw, which is going to bring that value down to the nearest largest integer less than

44
00:03:09,900 --> 00:03:12,060
or equivalent to the given number.

45
00:03:12,300 --> 00:03:14,340
And you can see an example of that as well.

46
00:03:14,490 --> 00:03:19,080
So if we have five point nine five, if we floor it, we get five.

47
00:03:19,170 --> 00:03:21,150
If we seeling it, we're going to get six.

48
00:03:21,340 --> 00:03:23,730
And again over here, five point zero five.

49
00:03:23,850 --> 00:03:26,160
If we floor it, we get five.

50
00:03:26,160 --> 00:03:28,260
If we cieling it, we get six.

51
00:03:28,530 --> 00:03:31,480
And there's another example of what, math four.

52
00:03:31,530 --> 00:03:33,910
So if it's five, it's going to remain five.

53
00:03:34,080 --> 00:03:36,120
So basically, think of it this way.

54
00:03:36,240 --> 00:03:39,480
That's getting rid of the decimal places there when we're doing math floor.

55
00:03:39,660 --> 00:03:46,200
And that's going to fix having all of those extra digits and give us the ability to pick up a math random

56
00:03:46,200 --> 00:03:46,640
number.

57
00:03:46,980 --> 00:03:55,710
So the way that we can do that is we can do math floor and wrap math random inside of it and then math

58
00:03:55,710 --> 00:03:56,310
random.

59
00:03:56,310 --> 00:03:59,610
We can randomize it and multiply it by a value.

60
00:03:59,940 --> 00:04:03,270
And we do have an array where we've got our game colors.

61
00:04:03,480 --> 00:04:10,490
So every array's has a length so we can use that length value and get a random number.

62
00:04:10,530 --> 00:04:12,020
So I'll show you how that works.

63
00:04:12,360 --> 00:04:18,030
And within our random number, you can see that we're going to generate a random number when we hit

64
00:04:18,030 --> 00:04:18,380
start.

65
00:04:18,390 --> 00:04:24,180
So we've got a random number of three, again, random number of three, and this time our number is

66
00:04:24,180 --> 00:04:24,540
one.

67
00:04:24,690 --> 00:04:28,070
So it's going to be anywhere from zero to three.

68
00:04:28,590 --> 00:04:33,750
And that's going to correspond with the values that we have within our array because we know that arrays

69
00:04:33,750 --> 00:04:35,430
start at a zero value.

70
00:04:35,670 --> 00:04:40,110
And it's also going to correspond with the number of squares that we have available to us.

71
00:04:40,350 --> 00:04:46,440
And we know the square order is going to be the same as the array order because we built the squares

72
00:04:46,440 --> 00:04:47,590
using the array.

73
00:04:47,910 --> 00:04:56,100
So now when we take that squares value and use the random number as the index value within the square

74
00:04:57,270 --> 00:05:02,220
and we start, what we're doing is we're randomly selecting one of the elements.

75
00:05:03,310 --> 00:05:11,830
And we can use that to add and update the capacity, as well as push it into our new sequence, so I

76
00:05:11,850 --> 00:05:12,670
show you how to do that.

77
00:05:12,680 --> 00:05:15,530
So we've got our Englin CLECs array.

78
00:05:15,820 --> 00:05:20,730
So this is the opposite of the user's array, user clicks array.

79
00:05:21,070 --> 00:05:25,840
And what we're doing is essentially doing the same thing as we're doing over here where we're checking

80
00:05:25,840 --> 00:05:32,020
the answer, except we're pushing in that value into that array sequence.

81
00:05:33,360 --> 00:05:41,520
So we're using JavaScript push and the value that we're pushing in is going to come from the game colors

82
00:05:41,520 --> 00:05:48,720
array and we're going to use that random NUM as the index value for it.

83
00:05:49,410 --> 00:05:51,180
So once again, refreshing.

84
00:05:51,180 --> 00:05:58,800
We hit start and this is now generating that random color into our game clicks array.

85
00:05:59,100 --> 00:06:02,290
And you can also see that when we console that value out.

86
00:06:02,700 --> 00:06:05,390
So now we're going to have a random color in there.

87
00:06:05,400 --> 00:06:06,660
So we've got blue in there.

88
00:06:07,140 --> 00:06:11,310
Next, what we want to do is we want to update that opacity.

89
00:06:11,310 --> 00:06:14,620
So we've got our element under squares.

90
00:06:14,910 --> 00:06:17,960
So this is the selected element at random.

91
00:06:17,970 --> 00:06:25,860
So whichever one we're selecting at random, and because it's an element object, we can apply the opacity

92
00:06:25,860 --> 00:06:28,770
to it and we'll set the opacity to one.

93
00:06:29,340 --> 00:06:34,810
So now what's going to happen is when we hit start, one of these squares is going to light up at random.

94
00:06:35,400 --> 00:06:36,990
So in that case, it was just red.

95
00:06:36,990 --> 00:06:41,700
This time it's yellow and it's completely random because we're using the math random.

96
00:06:42,150 --> 00:06:44,910
So that gives us the ability to select those elements.

97
00:06:45,120 --> 00:06:47,830
We're adding it into our game CLECs array.

98
00:06:48,270 --> 00:06:56,160
So the next thing that we want to do is we want to use that set timeout once again and run a timeout

99
00:06:56,160 --> 00:07:03,550
on this function because we might have more items that we want to add in to the array, a larger number.

100
00:07:03,570 --> 00:07:10,710
So in case we're starting out with maybe three squares that we want to play and we start we want to

101
00:07:10,860 --> 00:07:12,990
show all of the other squares as well.

102
00:07:13,350 --> 00:07:17,100
And in this case, because we only had the one, we weren't able to see that.

103
00:07:17,280 --> 00:07:23,610
But now when we're setting that set function, we can handle multiple values that are going to get added

104
00:07:23,610 --> 00:07:25,440
into our game.

105
00:07:25,440 --> 00:07:26,330
CLECs array.

106
00:07:26,610 --> 00:07:29,100
And I'll show you how to do that in the upcoming lesson.

107
00:07:29,250 --> 00:07:31,530
And we're going to do that with the set time out.

108
00:07:31,840 --> 00:07:38,280
But for now, what we can do is we can take that same element value and what we'll do is we'll set it

109
00:07:38,280 --> 00:07:44,250
back two point five, just as we did with the other function, and we'll set it back two point five

110
00:07:44,250 --> 00:07:46,590
after one hundred milliseconds.

111
00:07:47,400 --> 00:07:50,940
So go out and refresh Head Start and we see that it blinks.

112
00:07:51,280 --> 00:07:53,940
So we need to do it for five hundred milliseconds.

113
00:07:54,210 --> 00:07:57,660
So this is going to be how we're going to demonstrate the pattern to the player.

114
00:07:57,840 --> 00:08:03,000
They're going to come in Head Start and then they're going to see a pattern of a bunch of the boxes

115
00:08:03,000 --> 00:08:06,890
are going to light up and then next it's up to them to copy that pattern.

116
00:08:07,260 --> 00:08:10,560
So coming up next, I'll show you how to continue to build out the sequence.