This lesson, we are going to be updating it, and instead of writing hit, we're going to add in a
random icon.
And remember, earlier we pulled in that giant game object into the variable game object when we used
fetch and we returned all of that information before we built out the board.
So now we are ready to make use of that.
And we do have it sitting within that game object.
And we can where we're selecting that random time, we can also select out a random icon.
So using the JavaScript math floor, once again, math random, we're going to multiply it by our game
object length because remember, this is an array.
So we do have a length of items.
So this will select one of them at random.
And we do have a couple of things here that we can add in.
So we do have a game object now.
So we've got our game object that's been selected.
So instead of hit, we can do game object, taking whatever that value of the random index adding in
the icon, because remember, that was an object the way that it's brought in.
And I'll show you how this displays out.
So using our game object, our random index and returning back the value.
So let's try that out.
So now when we refresh, we can see that we're getting the icons and we're also getting the value that's
associated with them.
So when you click it, that's the value that's going to get added in.
And as you can see, it's randomly generating here and of course, we should update that as well within
our active so quickly update active class.
So I said it as Alice Blue will set our color as black, could also add in a box shadow.
So it's a really nice effect and we'll change the cursor instead of red.
Let's go blue.
So we've got this popping up and as you can see it, it's still clickable.
So that's exactly what we want.
Also within that object, the new pop object, I want to update whatever the value is.
So I just use Newport V..
And that's the nice thing about objects which can declare we can create all of these variables without
having to declare them.
And within that new that object, the index of value is going to contain that value.
So it's the same value that we see being output within the inner HTML.
So we can use that.
So now we can console logout so we know which cell got hit.
We also have a value for it as well.
So let's try that out.
So you see, when we click it, I'm going to make this bigger and also make this part bigger so you
can see that whenever I click it in the console, I get the count, which was six and the value which
was 50 at the time.
So now what we can do is we can take the player score that we have set to zero and equal player score
plus player score, and we're going to add whatever the value of that target was.
And we need to do some of the similar stuff here that we added, removed out that inner HTML and so
on.
So we add all of the stuff.
So let's go down here and so we don't have to rewrite it.
Let's declare a new variable called New Pop, and this is going to be equal to the then target.
And so this way, we don't have to keep writing E target.
We can just use new pop and we can use that that same syntax that we used up here to remove the octave
class, to remove the click, to update it as the old text.
And one other thing we need to do is clear the time out and that's contained within play area in play.
Remember, up at the top, we had declared it as that.
So that will remove out.
So the play area in play, we're setting the time out.
So we have to clear that out once it gets clicked, otherwise it won't disappear.
It will keep staying in play.
So this is the same thing as if player game over.
So if not player game over, then we're going to just do the same function so I can just literally copy
and paste that in.
So let's try this one out.
So I make the screen a little bit smaller.
So now when I click it, I'm updating my score, but I don't see the score being output.
So we need to take care of that and we'll handle that in the upcoming lesson.
So go ahead and add this functionality so that you can click it.
It's updating with the icons.
It's getting the value from the game object.
So remember, this is all coming from here where we've got an icon, we've got a value, we've got a
value, we've got an icon.
So all we're doing is we're taking this object information and we're making use of it in our JavaScript.
So go ahead and try it out for yourself.
And coming up next, we're going to add some more functionality to this game.