1
00:00:00,730 --> 00:00:05,530
This lesson, we are going to be updating it, and instead of writing hit, we're going to add in a

2
00:00:05,530 --> 00:00:06,510
random icon.

3
00:00:06,790 --> 00:00:15,220
And remember, earlier we pulled in that giant game object into the variable game object when we used

4
00:00:15,220 --> 00:00:19,250
fetch and we returned all of that information before we built out the board.

5
00:00:19,630 --> 00:00:22,270
So now we are ready to make use of that.

6
00:00:22,570 --> 00:00:26,200
And we do have it sitting within that game object.

7
00:00:26,470 --> 00:00:33,650
And we can where we're selecting that random time, we can also select out a random icon.

8
00:00:34,330 --> 00:00:43,570
So using the JavaScript math floor, once again, math random, we're going to multiply it by our game

9
00:00:43,570 --> 00:00:45,810
object length because remember, this is an array.

10
00:00:46,150 --> 00:00:48,060
So we do have a length of items.

11
00:00:48,490 --> 00:00:51,240
So this will select one of them at random.

12
00:00:51,850 --> 00:00:55,300
And we do have a couple of things here that we can add in.

13
00:00:55,540 --> 00:00:58,060
So we do have a game object now.

14
00:00:58,360 --> 00:01:01,990
So we've got our game object that's been selected.

15
00:01:02,290 --> 00:01:10,390
So instead of hit, we can do game object, taking whatever that value of the random index adding in

16
00:01:10,390 --> 00:01:13,600
the icon, because remember, that was an object the way that it's brought in.

17
00:01:14,200 --> 00:01:15,850
And I'll show you how this displays out.

18
00:01:16,330 --> 00:01:22,960
So using our game object, our random index and returning back the value.

19
00:01:23,380 --> 00:01:24,190
So let's try that out.

20
00:01:25,060 --> 00:01:31,600
So now when we refresh, we can see that we're getting the icons and we're also getting the value that's

21
00:01:31,600 --> 00:01:32,630
associated with them.

22
00:01:32,980 --> 00:01:36,190
So when you click it, that's the value that's going to get added in.

23
00:01:37,080 --> 00:01:43,590
And as you can see, it's randomly generating here and of course, we should update that as well within

24
00:01:43,590 --> 00:01:46,920
our active so quickly update active class.

25
00:01:47,790 --> 00:01:54,750
So I said it as Alice Blue will set our color as black, could also add in a box shadow.

26
00:01:54,760 --> 00:01:58,220
So it's a really nice effect and we'll change the cursor instead of red.

27
00:01:58,320 --> 00:01:59,030
Let's go blue.

28
00:01:59,250 --> 00:02:02,910
So we've got this popping up and as you can see it, it's still clickable.

29
00:02:02,940 --> 00:02:04,110
So that's exactly what we want.

30
00:02:04,140 --> 00:02:10,110
Also within that object, the new pop object, I want to update whatever the value is.

31
00:02:10,350 --> 00:02:12,660
So I just use Newport V..

32
00:02:12,720 --> 00:02:17,520
And that's the nice thing about objects which can declare we can create all of these variables without

33
00:02:17,520 --> 00:02:18,650
having to declare them.

34
00:02:19,500 --> 00:02:26,100
And within that new that object, the index of value is going to contain that value.

35
00:02:26,130 --> 00:02:30,020
So it's the same value that we see being output within the inner HTML.

36
00:02:30,030 --> 00:02:31,070
So we can use that.

37
00:02:31,530 --> 00:02:38,290
So now we can console logout so we know which cell got hit.

38
00:02:38,790 --> 00:02:40,910
We also have a value for it as well.

39
00:02:40,920 --> 00:02:41,670
So let's try that out.

40
00:02:44,380 --> 00:02:51,100
So you see, when we click it, I'm going to make this bigger and also make this part bigger so you

41
00:02:51,100 --> 00:02:59,200
can see that whenever I click it in the console, I get the count, which was six and the value which

42
00:02:59,200 --> 00:03:00,240
was 50 at the time.

43
00:03:02,420 --> 00:03:10,790
So now what we can do is we can take the player score that we have set to zero and equal player score

44
00:03:10,790 --> 00:03:16,430
plus player score, and we're going to add whatever the value of that target was.

45
00:03:17,330 --> 00:03:24,820
And we need to do some of the similar stuff here that we added, removed out that inner HTML and so

46
00:03:24,830 --> 00:03:24,980
on.

47
00:03:24,980 --> 00:03:26,510
So we add all of the stuff.

48
00:03:27,380 --> 00:03:31,330
So let's go down here and so we don't have to rewrite it.

49
00:03:31,370 --> 00:03:37,610
Let's declare a new variable called New Pop, and this is going to be equal to the then target.

50
00:03:37,790 --> 00:03:40,850
And so this way, we don't have to keep writing E target.

51
00:03:41,210 --> 00:03:48,500
We can just use new pop and we can use that that same syntax that we used up here to remove the octave

52
00:03:48,500 --> 00:03:53,600
class, to remove the click, to update it as the old text.

53
00:03:54,020 --> 00:04:02,440
And one other thing we need to do is clear the time out and that's contained within play area in play.

54
00:04:03,150 --> 00:04:05,920
Remember, up at the top, we had declared it as that.

55
00:04:06,530 --> 00:04:08,090
So that will remove out.

56
00:04:08,900 --> 00:04:12,110
So the play area in play, we're setting the time out.

57
00:04:12,290 --> 00:04:16,260
So we have to clear that out once it gets clicked, otherwise it won't disappear.

58
00:04:16,260 --> 00:04:17,650
It will keep staying in play.

59
00:04:18,630 --> 00:04:22,190
So this is the same thing as if player game over.

60
00:04:22,430 --> 00:04:27,500
So if not player game over, then we're going to just do the same function so I can just literally copy

61
00:04:27,500 --> 00:04:28,220
and paste that in.

62
00:04:28,790 --> 00:04:29,960
So let's try this one out.

63
00:04:30,920 --> 00:04:33,330
So I make the screen a little bit smaller.

64
00:04:33,890 --> 00:04:39,260
So now when I click it, I'm updating my score, but I don't see the score being output.

65
00:04:39,620 --> 00:04:43,000
So we need to take care of that and we'll handle that in the upcoming lesson.

66
00:04:43,340 --> 00:04:47,240
So go ahead and add this functionality so that you can click it.

67
00:04:47,480 --> 00:04:49,460
It's updating with the icons.

68
00:04:49,460 --> 00:04:51,680
It's getting the value from the game object.

69
00:04:51,890 --> 00:04:57,260
So remember, this is all coming from here where we've got an icon, we've got a value, we've got a

70
00:04:57,260 --> 00:04:58,970
value, we've got an icon.

71
00:04:59,150 --> 00:05:05,290
So all we're doing is we're taking this object information and we're making use of it in our JavaScript.

72
00:05:05,660 --> 00:05:07,070
So go ahead and try it out for yourself.

73
00:05:07,310 --> 00:05:10,330
And coming up next, we're going to add some more functionality to this game.