1
00:00:00,330 --> 00:00:05,610
This lesson, we're going to be wrapping up our final game play, we've got everything in place and

2
00:00:05,610 --> 00:00:07,200
we're ready to complete the game.

3
00:00:08,160 --> 00:00:12,990
There's a few things that we still need to add in some some functions in the last lesson we created

4
00:00:12,990 --> 00:00:19,050
the Make Act, a function which randomly selects one of the squares and highlights it to active so we

5
00:00:19,050 --> 00:00:22,050
can apply that and run that function within the build.

6
00:00:22,320 --> 00:00:23,820
So that runs automatically.

7
00:00:23,850 --> 00:00:25,260
So we always have a starting point.

8
00:00:25,570 --> 00:00:26,190
So there we go.

9
00:00:26,190 --> 00:00:29,250
We've got our square that we need to actively select.

10
00:00:29,610 --> 00:00:34,620
So we to also check to see if this square has a class of active.

11
00:00:34,860 --> 00:00:41,580
And we can do that as we're moving around the page checking to see if we've got the square that's active.

12
00:00:41,880 --> 00:00:47,520
So we know that we are tracking the players square so we can do that within where we've got our keyboard,

13
00:00:47,700 --> 00:00:53,390
our key press handler, where we're checking to see what square and this is where the movement is occurring.

14
00:00:53,610 --> 00:01:01,000
And this is the ideal spot to check to see if the value of squares player square.

15
00:01:01,110 --> 00:01:02,940
So we're getting a bunch of variables here.

16
00:01:03,240 --> 00:01:10,350
So Player Square is going to be eighteen squares as that squares array with all of the element objects.

17
00:01:10,620 --> 00:01:13,740
So we can select those elements just as we've done before.

18
00:01:13,920 --> 00:01:18,780
And we can check to see if class list contains and what contains will do.

19
00:01:18,780 --> 00:01:22,250
Is Wiltern true if the string contains the token.

20
00:01:22,470 --> 00:01:28,620
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

21
00:01:28,620 --> 00:01:29,670
to run a block of code.

22
00:01:29,670 --> 00:01:30,780
So a console log.

23
00:01:31,170 --> 00:01:35,220
And we could just for now we can type and found so going by this.

24
00:01:35,230 --> 00:01:40,060
So now whenever I move over the square, you can see that we're outputting the right values.

25
00:01:40,060 --> 00:01:41,430
So we know that it's been found.

26
00:01:41,670 --> 00:01:47,550
And once you've confirmed that that's working, we can select that same element and it's fairly long

27
00:01:47,550 --> 00:01:47,760
there.

28
00:01:47,760 --> 00:01:53,520
We could shorten it as well within a variable and serve odd and contains we're going to do remove.

29
00:01:53,970 --> 00:01:58,140
So we're removing out that class of active once we find it.

30
00:01:58,170 --> 00:01:59,280
So let's see what happens.

31
00:01:59,310 --> 00:02:00,150
So go down.

32
00:02:00,150 --> 00:02:03,630
And it removed out that class of active from the from the square.

33
00:02:04,050 --> 00:02:06,370
So that means that we need to generate a new one.

34
00:02:06,390 --> 00:02:07,380
So make active.

35
00:02:07,620 --> 00:02:11,480
So we always have an objective or target that we're adding into the game.

36
00:02:11,520 --> 00:02:15,660
We can also at this point update the player score so we can increment it by one.

37
00:02:15,660 --> 00:02:22,260
And then we've got our score object where we can update the inner HTML or in our text to whatever the

38
00:02:22,260 --> 00:02:23,670
value of player score is.

39
00:02:23,880 --> 00:02:25,740
So that's going to just update that score.

40
00:02:25,740 --> 00:02:26,560
So let's try that out.

41
00:02:26,580 --> 00:02:33,090
So now whenever we find our element, we see that the score increments by one and we randomly generate

42
00:02:33,090 --> 00:02:35,240
another one that we can go target.

43
00:02:35,250 --> 00:02:37,140
And now this is awfully dynamic.

44
00:02:37,150 --> 00:02:43,950
So even if I was to adjust the width or the height, this game should still be playable.

45
00:02:43,950 --> 00:02:47,070
So let's adjust it to 600 and we'll make it bigger.

46
00:02:47,100 --> 00:02:52,270
It's always a good idea to test your game out to make sure that things are working as intended.

47
00:02:52,290 --> 00:02:56,060
So we see that we move down, we get the score and so on.

48
00:02:56,340 --> 00:03:02,070
So really the objective of this was to practice creating elements on the fly and also tracking these

49
00:03:02,070 --> 00:03:07,800
elements into a larger object and then doing something when we've got some matching conditions.

50
00:03:07,950 --> 00:03:12,000
So go ahead and try the game out, make sure that you've got all of the functionality.

51
00:03:12,240 --> 00:03:17,550
Sometimes it does take a few times to play through and make some tweaks and adjustments as needed.

52
00:03:17,670 --> 00:03:20,640
And as you can see, everything is working as intended.

53
00:03:20,760 --> 00:03:23,040
We've got the score constantly increasing.

54
00:03:23,070 --> 00:03:28,980
We can't get out of the boundary area and all of our key events are firing off properly and we're able

55
00:03:28,980 --> 00:03:30,410
to track the correct movements.

56
00:03:30,660 --> 00:03:35,550
So right now I'm just moving through the keyboard and I'm pressing the keys just to make sure that everything

57
00:03:35,550 --> 00:03:37,850
is working as expected, which it is.

58
00:03:37,860 --> 00:03:43,500
So coming up next, we'll do a quick overview of the gameplay and we'll wrap up this section of the

59
00:03:43,500 --> 00:03:47,220
course where we've been building out this element grid game.

60
00:03:47,390 --> 00:03:48,810
That's still to come in the next lesson.