Welcome back.
In the earlier lesson, we saw how we can select one of the cells at random and this is the starting
point for our game, and then we're going to continuously have these random cells popping up.
We can also update it to update the background color if we want.
So I'm going to just add that in so it's a little bit more dramatic so that we can actually see the
difference.
So adding an aquamarine or something, so we can see that that's the active cell right now that's been
selected at random.
So we want to make something more happen.
So now that we've started it and we've set a value to active and we've got that element selected in
an object called New Pop so we can add an event listener to that as well.
So adding event listener and the event that we're listening for is click and we'll just call it hit
pop.
So that's the function.
So again, we need to create that new function and hit pop and we can passan that element information
within the console.
We could use event target and we're just passing in that event object.
So let's try that out.
So now when we click, the elements are going into the console and we clear that up and we click it
and we get that particular element that we've selected.
So that's exactly what we want.
Let's also now create the loop.
So now that we've started the colors, we want them to.
Appear, disappear and loop through, so setting up.
Let's grab our time so this is whatever our current time that we want to start it with, using math
random.
So this is that JavaScript by random.
I'll make this bigger because once again, this math statement is going to be fairly long.
So we multiply it and this is the amount of milliseconds so we can do something like 1500 milliseconds.
And we also I'm just bracketing it so in case we want to make it more dynamic.
So at minimum, let's set it at 750 milliseconds.
So just beneath the second.
So that's the minimum that it might be and it could be random anywhere above that.
So it could be in a range of point seventy five seconds, all the way up to two point two five seconds.
And of course you can adjust this as needed.
And I want to store within that object whatever the old value is of the inner HTML.
So let's select that, because we are going to be updating it and changing it, so we're selecting that
inner text there.
So this is storing that old one within that same element.
And this is going to be our new inner HTML so we can set that new inner HTML and our play area.
We're going to set it to in play.
And this is where we're using that set time out.
So it's going to call a function that's going to execute a specific set of code on our timeout.
And that's where we needed the time value so that we can have this particular function time out.
And the value that we want to time it out on is going to be whatever the value of time was that we created
randomly.
And then this is the code that we want to run.
So whatever the function times that we want to take the new pop and go to class list, so what we saw
earlier and remove and the element that we want to remove is that active one, because, of course,
we set we added active and over here we want to remove it.
We also want to remove the ability to click it.
So we're removing event listener.
So it's this one here and this is going to remove the active click event listener.
That we set and the one that was going to hit pop function, so that's going to make it so that it's
not clickable anymore.
And also, we need to replace the inner HTML or the inner text with whatever was contained within that
old text.
So that's why we started in there as that object.
And so we could always refer back to it and reference.
And we're also going to check to see if game over is still false and if it is, so do our check to see
if game over is still false.
And this is how we're going to end the game.
So we're going to set it to true.
And then this is going to stop from launching the New Pops that we're launching.
And if it's not over, then we're going to just start another pop.
So I think we're ready to try that out.
Let's shrink this back down, and before we do that, I just noticed that I missed an assignment value
here, an equal sign.
So now it's ready to try that out.
So now we're loading it and we can see that the game is ready to go.
It's playing.
So we see that all of the elements are loading and we've got our cell is going green with the value
of hit randomly and for a random set of time and again, you can adjust this as needed.
And this essentially is our core gameplay.
So whenever you click this, it's going to activate that cell.
It's going to activate that hit pop and it's going to give us information about that current target.
So that's the next thing that we want to do is we want to evaluate if our element is the right one when
we hit the pop.
So it's coming up in the next lesson.
I'll show you how to do that.