Welcome back.
This is going to be a fun lesson where we're going to create some interaction within our gameboard.
So right now we have a game board that gets generated using JavaScript when we hit start game and whenever
the page loads.
So what we want to do is we want to select the newly created elements here, these little.
Cells that we've created and we want to have a pop up image and have the user click those images in
order to play the game.
So let's start the game and we're going to use the player object and we'll create one called game over,
so make sure that when the game is in play that the game over is false.
And we also want to add in another function and we'll call that one start pop.
So this will start the game functionality.
So creating a function, they're called start pop.
Now, what we want to do is select one of these elements that we've just created and we want to select
one randomly.
So grabbing our new pop and let's create another function for this.
And this is the one we're going to return back that random value.
And then we'll again, I'll just log it out in the console before we try to do anything with it, setting
up a new function.
And this is going to be the one that's going to select all from all of the elements.
So what we want to do is we want to loop through all of the elements with a class of pop.
So remember, in the earlier lesson, as we're building these out, all of these have a class of pop.
So you can see that when you do an inspect of the element, they're all pop.
So we can loop through all of the ones that have a class of pop using query selector all and just to
make sure that you are getting it properly, we can return back, Pops.
So let's refresh start game, go to console.
So this gives us all the elements that have a class of pop.
So what we want to do is we want to randomly select one of them and we're going to use it as a holder
using JavaScript math.
I'll make this a little bit bigger because it's going to be a long statement.
So using JavaScript math floor and then math random.
And this is how in JavaScript we get random numbers.
So we do math floor and math random and we multiply it by the value.
So this is going to give us if we were doing math random times 10, we'd have a random number from zero
to nine.
And because this is an array, we want it to start out at zero index zero.
So that's fine when we do pops length.
So this will give us whatever the pop strength is.
And we know that the Pops length is 16, so it's going to give us a random number from zero to 15.
And that's exactly what we want to return back for our array.
And let's also return back that particular element.
So using ID x, make this small again and refresh new game.
So this is going to give us a random pop element and that's what we want to start our game.
We also want to make sure that we're not getting the one that we previously got.
So let's get play area lots.
And make sure that our S.A. remember these values that we set when we were building these out, we spent
a d'Hiv S.A..
So this gave us account value from zero to 15.
And that's how we can identify all the different pops that we have, all the different cells.
So and we can also use this to check to see if pops and we're checking to see if it's equal to play.
And we're going to set this one so play area last.
So if it's not equal to that, then we know that we're good to go and we can return back that one.
And we're also going to use play area lost and we're going to set this value.
So we don't want the element to we don't want to always be selecting that same cell.
So we want it to go from one cell to another.
So this is where we're making sure then checking to see if our value is the same one as the last one.
And if it is, then what we need to do is we need to return random up and we're going to just run this
function until we get a different ID.
So this is going to always give us a different one.
So no matter how many times we run it, it will constantly give us a different value being returned
back.
And that's actually exactly what we want.
So we're not going to be able to see it actually in play here because we're only running at one time.
But this will filter out the duplicates, having slept in the same cell more than once.
So now we're ready to move on to the next part of this.
And this is where we can set up and add an octave class to the selected element.
So let's go ahead and do that.
So we've got a cell, an element called New Pop and class list add and we're going to add in a class
of active and then going up into our styles.
We're going to update active to have a different border color.
So active will have a border and notice that we set the border pop there and we're going to change it
to red.
So now when we go out here, we hit start game.
We're going to see that we're selecting one of the cells at random.
And that's what we want because we want that pop up to show up in one of these cells at random.
So coming up next, I'm going to show you how you can add in the data that we've pulled into our game
from the fetch and output that within that cell and make it clickable and a whole lot more.
So that's still to come in the upcoming lessons.