Welcome back.
This lesson is going to be the one where we're going to build out that random sequence that's going
to play and that the user needs to watch and then mimic that same sequence.
So let's open up our Ed and go into the run sequence function.
And the first thing that we want to do within the run sequence is I want to select all of the current
squares within our dorm.
So I'm going to create a new object, call it squares using document query selector, and we're going
to use query selector all because we want to grab all of the elements on the page that have a class
of box.
So essentially there's going to be four of them because we did build four of them out and we're going
to use this random value in order to determine what random color.
So out of the four colors that we have available, which one we want to light up, and we're going to
build out that sequence within that type of format.
We're also because this is creating a brand new sequence each time we need to pass in a number and we're
going to loop through that number.
So this number will be dynamically counting down from the value of Planum.
So the first time we run through it will run this through one time.
And the way that we're going to do that is that we're going to create a condition here that's going
to check to see if the value of NUM is less than zero.
And if it is, then we've run through the sequence.
So every time we do a pass through of a run sequence, we're going to decrease the value of NUM by one
and we're going to continuously pass through that value within a loop within this function.
We're going to also be setting the value of play to true.
So this means that we're only going to allow the user to build their sequence after our sequence has
finished running.
And this is going to allow us to prevent cheating within the game.
Otherwise the user could just watch as the colors appeared and click those same colors building out
their own sequence.
So we want to make sure that that is not available.
And then here we just simply want to return back that function.
So it's going to return it back to the player area.
So selecting out a random number.
So we need a random number and we can take a look at what's available at MDN, the Musila Developer
Network.
There's quite a bit for math.
We need to use some of the math methods that are available.
First of all, math random, which is going to return our random floating point number from zero to
one, not but not including one.
And you can take a look at the example here to get a better idea of what's being returned back.
And when we run it, we see that it returns back this long number.
So zero decimal and bunch of digits after that.
And so what we want to do is we want to multiply this by the number that we want to use and we want
to use math flaw, which is going to bring that value down to the nearest largest integer less than
or equivalent to the given number.
And you can see an example of that as well.
So if we have five point nine five, if we floor it, we get five.
If we seeling it, we're going to get six.
And again over here, five point zero five.
If we floor it, we get five.
If we cieling it, we get six.
And there's another example of what, math four.
So if it's five, it's going to remain five.
So basically, think of it this way.
That's getting rid of the decimal places there when we're doing math floor.
And that's going to fix having all of those extra digits and give us the ability to pick up a math random
number.
So the way that we can do that is we can do math floor and wrap math random inside of it and then math
random.
We can randomize it and multiply it by a value.
And we do have an array where we've got our game colors.
So every array's has a length so we can use that length value and get a random number.
So I'll show you how that works.
And within our random number, you can see that we're going to generate a random number when we hit
start.
So we've got a random number of three, again, random number of three, and this time our number is
one.
So it's going to be anywhere from zero to three.
And that's going to correspond with the values that we have within our array because we know that arrays
start at a zero value.
And it's also going to correspond with the number of squares that we have available to us.
And we know the square order is going to be the same as the array order because we built the squares
using the array.
So now when we take that squares value and use the random number as the index value within the square
and we start, what we're doing is we're randomly selecting one of the elements.
And we can use that to add and update the capacity, as well as push it into our new sequence, so I
show you how to do that.
So we've got our Englin CLECs array.
So this is the opposite of the user's array, user clicks array.
And what we're doing is essentially doing the same thing as we're doing over here where we're checking
the answer, except we're pushing in that value into that array sequence.
So we're using JavaScript push and the value that we're pushing in is going to come from the game colors
array and we're going to use that random NUM as the index value for it.
So once again, refreshing.
We hit start and this is now generating that random color into our game clicks array.
And you can also see that when we console that value out.
So now we're going to have a random color in there.
So we've got blue in there.
Next, what we want to do is we want to update that opacity.
So we've got our element under squares.
So this is the selected element at random.
So whichever one we're selecting at random, and because it's an element object, we can apply the opacity
to it and we'll set the opacity to one.
So now what's going to happen is when we hit start, one of these squares is going to light up at random.
So in that case, it was just red.
This time it's yellow and it's completely random because we're using the math random.
So that gives us the ability to select those elements.
We're adding it into our game CLECs array.
So the next thing that we want to do is we want to use that set timeout once again and run a timeout
on this function because we might have more items that we want to add in to the array, a larger number.
So in case we're starting out with maybe three squares that we want to play and we start we want to
show all of the other squares as well.
And in this case, because we only had the one, we weren't able to see that.
But now when we're setting that set function, we can handle multiple values that are going to get added
into our game.
CLECs array.
And I'll show you how to do that in the upcoming lesson.
And we're going to do that with the set time out.
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
back two point five, just as we did with the other function, and we'll set it back two point five
after one hundred milliseconds.
So go out and refresh Head Start and we see that it blinks.
So we need to do it for five hundred milliseconds.
So this is going to be how we're going to demonstrate the pattern to the player.
They're going to come in Head Start and then they're going to see a pattern of a bunch of the boxes
are going to light up and then next it's up to them to copy that pattern.
So coming up next, I'll show you how to continue to build out the sequence.