1
00:00:00,240 --> 00:00:00,880
Welcome back.

2
00:00:00,900 --> 00:00:05,970
This is going to be a fun lesson where we're going to create some interaction within our gameboard.

3
00:00:05,970 --> 00:00:13,830
So right now we have a game board that gets generated using JavaScript when we hit start game and whenever

4
00:00:13,830 --> 00:00:14,840
the page loads.

5
00:00:15,000 --> 00:00:20,190
So what we want to do is we want to select the newly created elements here, these little.

6
00:00:21,760 --> 00:00:29,170
Cells that we've created and we want to have a pop up image and have the user click those images in

7
00:00:29,170 --> 00:00:30,130
order to play the game.

8
00:00:31,150 --> 00:00:38,710
So let's start the game and we're going to use the player object and we'll create one called game over,

9
00:00:38,860 --> 00:00:44,010
so make sure that when the game is in play that the game over is false.

10
00:00:44,500 --> 00:00:48,770
And we also want to add in another function and we'll call that one start pop.

11
00:00:49,000 --> 00:00:51,910
So this will start the game functionality.

12
00:00:52,750 --> 00:00:56,500
So creating a function, they're called start pop.

13
00:00:57,040 --> 00:01:03,040
Now, what we want to do is select one of these elements that we've just created and we want to select

14
00:01:03,040 --> 00:01:04,090
one randomly.

15
00:01:04,360 --> 00:01:08,890
So grabbing our new pop and let's create another function for this.

16
00:01:09,160 --> 00:01:13,240
And this is the one we're going to return back that random value.

17
00:01:13,360 --> 00:01:17,800
And then we'll again, I'll just log it out in the console before we try to do anything with it, setting

18
00:01:17,800 --> 00:01:18,780
up a new function.

19
00:01:18,790 --> 00:01:23,810
And this is going to be the one that's going to select all from all of the elements.

20
00:01:24,130 --> 00:01:29,540
So what we want to do is we want to loop through all of the elements with a class of pop.

21
00:01:29,830 --> 00:01:34,540
So remember, in the earlier lesson, as we're building these out, all of these have a class of pop.

22
00:01:34,810 --> 00:01:39,420
So you can see that when you do an inspect of the element, they're all pop.

23
00:01:39,430 --> 00:01:48,280
So we can loop through all of the ones that have a class of pop using query selector all and just to

24
00:01:48,280 --> 00:01:52,870
make sure that you are getting it properly, we can return back, Pops.

25
00:01:53,220 --> 00:01:56,000
So let's refresh start game, go to console.

26
00:01:56,230 --> 00:01:59,620
So this gives us all the elements that have a class of pop.

27
00:01:59,860 --> 00:02:06,100
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

28
00:02:06,400 --> 00:02:08,220
using JavaScript math.

29
00:02:08,230 --> 00:02:11,290
I'll make this a little bit bigger because it's going to be a long statement.

30
00:02:11,590 --> 00:02:16,930
So using JavaScript math floor and then math random.

31
00:02:17,500 --> 00:02:20,650
And this is how in JavaScript we get random numbers.

32
00:02:20,920 --> 00:02:25,700
So we do math floor and math random and we multiply it by the value.

33
00:02:25,730 --> 00:02:32,440
So this is going to give us if we were doing math random times 10, we'd have a random number from zero

34
00:02:32,440 --> 00:02:32,980
to nine.

35
00:02:33,100 --> 00:02:38,080
And because this is an array, we want it to start out at zero index zero.

36
00:02:38,230 --> 00:02:40,830
So that's fine when we do pops length.

37
00:02:41,140 --> 00:02:43,330
So this will give us whatever the pop strength is.

38
00:02:43,330 --> 00:02:49,600
And we know that the Pops length is 16, so it's going to give us a random number from zero to 15.

39
00:02:49,720 --> 00:02:53,340
And that's exactly what we want to return back for our array.

40
00:02:53,680 --> 00:02:57,570
And let's also return back that particular element.

41
00:02:57,970 --> 00:03:03,350
So using ID x, make this small again and refresh new game.

42
00:03:03,580 --> 00:03:09,850
So this is going to give us a random pop element and that's what we want to start our game.

43
00:03:10,360 --> 00:03:15,280
We also want to make sure that we're not getting the one that we previously got.

44
00:03:15,640 --> 00:03:18,400
So let's get play area lots.

45
00:03:19,330 --> 00:03:27,450
And make sure that our S.A. remember these values that we set when we were building these out, we spent

46
00:03:27,460 --> 00:03:28,880
a d'Hiv S.A..

47
00:03:28,900 --> 00:03:32,410
So this gave us account value from zero to 15.

48
00:03:32,530 --> 00:03:37,660
And that's how we can identify all the different pops that we have, all the different cells.

49
00:03:37,990 --> 00:03:46,860
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.

50
00:03:48,190 --> 00:03:51,410
And we're going to set this one so play area last.

51
00:03:51,790 --> 00:03:57,840
So if it's not equal to that, then we know that we're good to go and we can return back that one.

52
00:03:58,120 --> 00:04:03,490
And we're also going to use play area lost and we're going to set this value.

53
00:04:03,730 --> 00:04:10,540
So we don't want the element to we don't want to always be selecting that same cell.

54
00:04:10,550 --> 00:04:12,700
So we want it to go from one cell to another.

55
00:04:12,940 --> 00:04:19,780
So this is where we're making sure then checking to see if our value is the same one as the last one.

56
00:04:19,780 --> 00:04:26,560
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

57
00:04:26,560 --> 00:04:30,200
function until we get a different ID.

58
00:04:30,340 --> 00:04:33,010
So this is going to always give us a different one.

59
00:04:33,040 --> 00:04:38,560
So no matter how many times we run it, it will constantly give us a different value being returned

60
00:04:38,560 --> 00:04:38,890
back.

61
00:04:39,910 --> 00:04:41,580
And that's actually exactly what we want.

62
00:04:41,800 --> 00:04:47,170
So we're not going to be able to see it actually in play here because we're only running at one time.

63
00:04:47,380 --> 00:04:54,740
But this will filter out the duplicates, having slept in the same cell more than once.

64
00:04:55,360 --> 00:04:58,480
So now we're ready to move on to the next part of this.

65
00:04:58,780 --> 00:05:04,380
And this is where we can set up and add an octave class to the selected element.

66
00:05:04,840 --> 00:05:06,580
So let's go ahead and do that.

67
00:05:06,590 --> 00:05:16,900
So we've got a cell, an element called New Pop and class list add and we're going to add in a class

68
00:05:16,900 --> 00:05:21,100
of active and then going up into our styles.

69
00:05:21,520 --> 00:05:24,940
We're going to update active to have a different border color.

70
00:05:27,280 --> 00:05:34,510
So active will have a border and notice that we set the border pop there and we're going to change it

71
00:05:34,510 --> 00:05:35,050
to red.

72
00:05:35,950 --> 00:05:39,010
So now when we go out here, we hit start game.

73
00:05:39,220 --> 00:05:43,120
We're going to see that we're selecting one of the cells at random.

74
00:05:43,990 --> 00:05:48,120
And that's what we want because we want that pop up to show up in one of these cells at random.

75
00:05:48,610 --> 00:05:55,390
So coming up next, I'm going to show you how you can add in the data that we've pulled into our game

76
00:05:55,390 --> 00:06:01,920
from the fetch and output that within that cell and make it clickable and a whole lot more.

77
00:06:01,930 --> 00:06:03,820
So that's still to come in the upcoming lessons.