This lesson, we're going to be wrapping up our final game play, we've got everything in place and
we're ready to complete the game.
There's a few things that we still need to add in some some functions in the last lesson we created
the Make Act, a function which randomly selects one of the squares and highlights it to active so we
can apply that and run that function within the build.
So that runs automatically.
So we always have a starting point.
So there we go.
We've got our square that we need to actively select.
So we to also check to see if this square has a class of active.
And we can do that as we're moving around the page checking to see if we've got the square that's active.
So we know that we are tracking the players square so we can do that within where we've got our keyboard,
our key press handler, where we're checking to see what square and this is where the movement is occurring.
And this is the ideal spot to check to see if the value of squares player square.
So we're getting a bunch of variables here.
So Player Square is going to be eighteen squares as that squares array with all of the element objects.
So we can select those elements just as we've done before.
And we can check to see if class list contains and what contains will do.
Is Wiltern true if the string contains the token.
So we're checking to see if it has a class of active and if it does, then what we want to do is want
to run a block of code.
So a console log.
And we could just for now we can type and found so going by this.
So now whenever I move over the square, you can see that we're outputting the right values.
So we know that it's been found.
And once you've confirmed that that's working, we can select that same element and it's fairly long
there.
We could shorten it as well within a variable and serve odd and contains we're going to do remove.
So we're removing out that class of active once we find it.
So let's see what happens.
So go down.
And it removed out that class of active from the from the square.
So that means that we need to generate a new one.
So make active.
So we always have an objective or target that we're adding into the game.
We can also at this point update the player score so we can increment it by one.
And then we've got our score object where we can update the inner HTML or in our text to whatever the
value of player score is.
So that's going to just update that score.
So let's try that out.
So now whenever we find our element, we see that the score increments by one and we randomly generate
another one that we can go target.
And now this is awfully dynamic.
So even if I was to adjust the width or the height, this game should still be playable.
So let's adjust it to 600 and we'll make it bigger.
It's always a good idea to test your game out to make sure that things are working as intended.
So we see that we move down, we get the score and so on.
So really the objective of this was to practice creating elements on the fly and also tracking these
elements into a larger object and then doing something when we've got some matching conditions.
So go ahead and try the game out, make sure that you've got all of the functionality.
Sometimes it does take a few times to play through and make some tweaks and adjustments as needed.
And as you can see, everything is working as intended.
We've got the score constantly increasing.
We can't get out of the boundary area and all of our key events are firing off properly and we're able
to track the correct movements.
So right now I'm just moving through the keyboard and I'm pressing the keys just to make sure that everything
is working as expected, which it is.
So coming up next, we'll do a quick overview of the gameplay and we'll wrap up this section of the
course where we've been building out this element grid game.
That's still to come in the next lesson.