1
00:00:00,720 --> 00:00:01,500
Welcome back.

2
00:00:01,500 --> 00:00:08,070
In the earlier lesson, we saw how we can select one of the cells at random and this is the starting

3
00:00:08,070 --> 00:00:13,870
point for our game, and then we're going to continuously have these random cells popping up.

4
00:00:14,040 --> 00:00:17,670
We can also update it to update the background color if we want.

5
00:00:17,910 --> 00:00:22,560
So I'm going to just add that in so it's a little bit more dramatic so that we can actually see the

6
00:00:22,560 --> 00:00:22,980
difference.

7
00:00:23,250 --> 00:00:29,100
So adding an aquamarine or something, so we can see that that's the active cell right now that's been

8
00:00:29,100 --> 00:00:30,470
selected at random.

9
00:00:30,810 --> 00:00:32,870
So we want to make something more happen.

10
00:00:33,120 --> 00:00:40,230
So now that we've started it and we've set a value to active and we've got that element selected in

11
00:00:40,230 --> 00:00:44,780
an object called New Pop so we can add an event listener to that as well.

12
00:00:45,090 --> 00:00:51,000
So adding event listener and the event that we're listening for is click and we'll just call it hit

13
00:00:51,000 --> 00:00:51,380
pop.

14
00:00:51,390 --> 00:00:52,390
So that's the function.

15
00:00:53,010 --> 00:01:00,690
So again, we need to create that new function and hit pop and we can passan that element information

16
00:01:00,690 --> 00:01:01,830
within the console.

17
00:01:02,520 --> 00:01:06,120
We could use event target and we're just passing in that event object.

18
00:01:07,140 --> 00:01:08,420
So let's try that out.

19
00:01:08,550 --> 00:01:13,710
So now when we click, the elements are going into the console and we clear that up and we click it

20
00:01:13,860 --> 00:01:17,220
and we get that particular element that we've selected.

21
00:01:17,500 --> 00:01:18,890
So that's exactly what we want.

22
00:01:19,410 --> 00:01:21,720
Let's also now create the loop.

23
00:01:21,930 --> 00:01:26,190
So now that we've started the colors, we want them to.

24
00:01:27,480 --> 00:01:31,710
Appear, disappear and loop through, so setting up.

25
00:01:31,800 --> 00:01:39,090
Let's grab our time so this is whatever our current time that we want to start it with, using math

26
00:01:39,090 --> 00:01:39,530
random.

27
00:01:39,540 --> 00:01:42,720
So this is that JavaScript by random.

28
00:01:42,990 --> 00:01:46,880
I'll make this bigger because once again, this math statement is going to be fairly long.

29
00:01:47,400 --> 00:01:54,120
So we multiply it and this is the amount of milliseconds so we can do something like 1500 milliseconds.

30
00:01:54,870 --> 00:01:58,640
And we also I'm just bracketing it so in case we want to make it more dynamic.

31
00:01:58,800 --> 00:02:03,440
So at minimum, let's set it at 750 milliseconds.

32
00:02:03,450 --> 00:02:05,000
So just beneath the second.

33
00:02:05,220 --> 00:02:09,090
So that's the minimum that it might be and it could be random anywhere above that.

34
00:02:09,100 --> 00:02:17,850
So it could be in a range of point seventy five seconds, all the way up to two point two five seconds.

35
00:02:18,610 --> 00:02:20,970
And of course you can adjust this as needed.

36
00:02:21,600 --> 00:02:28,560
And I want to store within that object whatever the old value is of the inner HTML.

37
00:02:29,810 --> 00:02:35,090
So let's select that, because we are going to be updating it and changing it, so we're selecting that

38
00:02:35,090 --> 00:02:36,350
inner text there.

39
00:02:36,350 --> 00:02:40,000
So this is storing that old one within that same element.

40
00:02:40,700 --> 00:02:50,370
And this is going to be our new inner HTML so we can set that new inner HTML and our play area.

41
00:02:51,050 --> 00:02:53,350
We're going to set it to in play.

42
00:02:54,140 --> 00:02:56,780
And this is where we're using that set time out.

43
00:02:57,050 --> 00:03:02,760
So it's going to call a function that's going to execute a specific set of code on our timeout.

44
00:03:03,020 --> 00:03:10,400
And that's where we needed the time value so that we can have this particular function time out.

45
00:03:11,030 --> 00:03:17,060
And the value that we want to time it out on is going to be whatever the value of time was that we created

46
00:03:17,060 --> 00:03:17,570
randomly.

47
00:03:19,520 --> 00:03:21,680
And then this is the code that we want to run.

48
00:03:24,150 --> 00:03:32,790
So whatever the function times that we want to take the new pop and go to class list, so what we saw

49
00:03:32,790 --> 00:03:38,910
earlier and remove and the element that we want to remove is that active one, because, of course,

50
00:03:38,910 --> 00:03:42,600
we set we added active and over here we want to remove it.

51
00:03:43,560 --> 00:03:46,700
We also want to remove the ability to click it.

52
00:03:47,220 --> 00:03:49,830
So we're removing event listener.

53
00:03:50,820 --> 00:03:54,840
So it's this one here and this is going to remove the active click event listener.

54
00:03:56,770 --> 00:04:03,040
That we set and the one that was going to hit pop function, so that's going to make it so that it's

55
00:04:03,040 --> 00:04:04,190
not clickable anymore.

56
00:04:04,660 --> 00:04:12,400
And also, we need to replace the inner HTML or the inner text with whatever was contained within that

57
00:04:12,400 --> 00:04:13,060
old text.

58
00:04:13,250 --> 00:04:15,910
So that's why we started in there as that object.

59
00:04:16,450 --> 00:04:19,180
And so we could always refer back to it and reference.

60
00:04:20,120 --> 00:04:29,990
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

61
00:04:29,990 --> 00:04:32,090
if game over is still false.

62
00:04:32,630 --> 00:04:34,330
And this is how we're going to end the game.

63
00:04:34,910 --> 00:04:36,710
So we're going to set it to true.

64
00:04:36,710 --> 00:04:43,010
And then this is going to stop from launching the New Pops that we're launching.

65
00:04:43,670 --> 00:04:47,520
And if it's not over, then we're going to just start another pop.

66
00:04:48,620 --> 00:04:50,360
So I think we're ready to try that out.

67
00:04:51,700 --> 00:04:58,060
Let's shrink this back down, and before we do that, I just noticed that I missed an assignment value

68
00:04:58,060 --> 00:04:59,090
here, an equal sign.

69
00:04:59,410 --> 00:05:01,140
So now it's ready to try that out.

70
00:05:01,510 --> 00:05:06,270
So now we're loading it and we can see that the game is ready to go.

71
00:05:06,280 --> 00:05:06,900
It's playing.

72
00:05:07,420 --> 00:05:15,070
So we see that all of the elements are loading and we've got our cell is going green with the value

73
00:05:15,070 --> 00:05:21,760
of hit randomly and for a random set of time and again, you can adjust this as needed.

74
00:05:22,360 --> 00:05:25,050
And this essentially is our core gameplay.

75
00:05:25,240 --> 00:05:29,040
So whenever you click this, it's going to activate that cell.

76
00:05:29,050 --> 00:05:33,900
It's going to activate that hit pop and it's going to give us information about that current target.

77
00:05:34,270 --> 00:05:42,190
So that's the next thing that we want to do is we want to evaluate if our element is the right one when

78
00:05:42,190 --> 00:05:43,470
we hit the pop.

79
00:05:43,990 --> 00:05:45,550
So it's coming up in the next lesson.

80
00:05:45,850 --> 00:05:46,930
I'll show you how to do that.