1
00:00:00,460 --> 00:00:01,820
Hey, I know what you're thinking.

2
00:00:01,840 --> 00:00:04,000
How about a game while play a game of dice?

3
00:00:04,060 --> 00:00:08,230
Well, you're going to have to create that game first and we're going to do that using what we've learned

4
00:00:08,230 --> 00:00:12,260
in the earlier lessons about object oriented programming with JavaScript.

5
00:00:12,580 --> 00:00:17,320
So, first of all, create an element on the page that can be clicked, then create a constructor function

6
00:00:17,320 --> 00:00:20,770
to contain the game functions so you can call it day scheme.

7
00:00:21,070 --> 00:00:27,550
And then within this game, add the option to roll the dice with math, random one to six, and then

8
00:00:27,550 --> 00:00:33,910
the DICE scheme add an option to check the winner and then within the click events, give the ability

9
00:00:33,910 --> 00:00:34,780
to roll.

10
00:00:35,110 --> 00:00:42,580
Also add the ability to determine the winner of who is who has the highest roll of the dice and then

11
00:00:42,580 --> 00:00:46,850
output that information as it's being clicked onto the page.

12
00:00:47,020 --> 00:00:50,340
So just like the example here, it doesn't have to be anything fancy.

13
00:00:50,440 --> 00:00:51,910
This is all just tax base.

14
00:00:51,910 --> 00:00:54,280
And of course, we do want to focus on the JavaScript.

15
00:00:54,400 --> 00:01:00,480
So this is all behind the scenes and we're just simply outputting player got a six versus computer.

16
00:01:00,490 --> 00:01:01,960
One player wins.

17
00:01:02,080 --> 00:01:04,610
So that's all the functionality that we're looking for in this challenge.

18
00:01:04,870 --> 00:01:09,700
So you can pause the video and I'll walk you through how to construct this and how to build this coming

19
00:01:09,700 --> 00:01:09,850
up.

20
00:01:10,010 --> 00:01:14,070
So first thing that we wanted to do is create our basic game container.

21
00:01:14,230 --> 00:01:17,880
So this is the object that we're going to use in order to create our game.

22
00:01:18,160 --> 00:01:23,080
And this is calling out to this game function.

23
00:01:23,080 --> 00:01:28,330
And that means that we do need to create that as we see that we throw an error, of course, if we don't

24
00:01:28,330 --> 00:01:32,140
have that in existence and we try to access that function.

25
00:01:32,530 --> 00:01:37,280
So now we've got the function called this game, and then this is where all the magic happens.

26
00:01:37,600 --> 00:01:40,310
So we also need to create a few elements on the page.

27
00:01:40,630 --> 00:01:44,950
So this is for the user to be able to have something to click.

28
00:01:45,280 --> 00:01:50,430
So using document create elements and the element that we're creating.

29
00:01:50,440 --> 00:01:55,750
So this is just a regular div and then within the the the dice.

30
00:01:57,140 --> 00:02:03,120
Add in text context, and for now we can start out with the message that just says roll here.

31
00:02:04,100 --> 00:02:07,430
So this is the starting point and then we need to append it.

32
00:02:07,430 --> 00:02:14,000
So document body, append child, and we're spending the days to the body.

33
00:02:14,240 --> 00:02:15,730
So we've got role here.

34
00:02:15,740 --> 00:02:16,310
So that's it.

35
00:02:16,580 --> 00:02:19,960
So now we've got we're almost ready to go to continue with the game.

36
00:02:20,240 --> 00:02:22,610
So we need to make this clickable like roll here.

37
00:02:22,610 --> 00:02:23,600
Doesn't do very much.

38
00:02:23,600 --> 00:02:24,720
Just says roll here.

39
00:02:24,830 --> 00:02:27,170
So let's create an action to that.

40
00:02:27,440 --> 00:02:29,660
And we can do this by adding an event listener.

41
00:02:29,930 --> 00:02:32,500
I can actually do this as a second line down here.

42
00:02:32,750 --> 00:02:38,120
So for Dice, because we've got that subject that we created, so we always have access to it and add

43
00:02:38,120 --> 00:02:38,840
event listener.

44
00:02:39,110 --> 00:02:41,560
And the event that we're listening for is a click.

45
00:02:41,840 --> 00:02:44,870
So anyone that clicks that is going to invoke the function.

46
00:02:45,200 --> 00:02:48,920
This can just be an anonymous function within that odd event listener.

47
00:02:49,490 --> 00:02:52,950
So now whenever we click it and let's just make sure that it's working.

48
00:02:53,300 --> 00:02:57,140
So now when we click it, we got roll showing up within the console.

49
00:02:57,170 --> 00:02:57,920
That's what we want.

50
00:02:58,680 --> 00:03:03,770
So what we want to do is we want to have the ability to roll and all of this is going to actually happen

51
00:03:03,770 --> 00:03:05,040
within the dice game.

52
00:03:05,450 --> 00:03:08,360
So within this next game, we need to create a few methods.

53
00:03:08,360 --> 00:03:09,830
And the first one is roll.

54
00:03:09,830 --> 00:03:12,680
We need to have some type of action that the user can take.

55
00:03:12,830 --> 00:03:14,660
And then we're going to call to these actions.

56
00:03:14,780 --> 00:03:17,330
And this is all going to be contained within the game object.

57
00:03:17,570 --> 00:03:19,060
So this is the one that we're constructing.

58
00:03:19,340 --> 00:03:21,100
So using the function.

59
00:03:21,860 --> 00:03:26,560
So whenever the user roles, what we want to do is return back a result.

60
00:03:27,050 --> 00:03:36,200
So I'm going to use this results and using JavaScript math floor and then taking math random and we're

61
00:03:36,200 --> 00:03:38,660
going to multiply the result by six.

62
00:03:38,900 --> 00:03:42,890
And so we want a value that's being returned back from one to six.

63
00:03:43,100 --> 00:03:45,150
So I'm going to add in a one to it.

64
00:03:45,860 --> 00:03:51,120
So now our result is going to be resulting back with the value of one to six.

65
00:03:51,140 --> 00:03:54,980
I had an extra bracket there, so let's throw in the error there.

66
00:03:55,550 --> 00:03:59,210
And then all we're doing here is we're returning this result.

67
00:04:00,680 --> 00:04:02,140
So we're turning back the result.

68
00:04:02,330 --> 00:04:07,760
So that means that we can use game roll and we can roll anytime we want.

69
00:04:08,180 --> 00:04:18,170
So how about how about we try that in game a rule so we get the game roll, we get a random value and

70
00:04:18,170 --> 00:04:19,650
hopefully it's one to six.

71
00:04:19,650 --> 00:04:20,710
That should be one to six.

72
00:04:21,080 --> 00:04:22,940
So everything is good to go.

73
00:04:22,970 --> 00:04:28,400
So now we can create the rules for the player as well as for the computer.

74
00:04:28,700 --> 00:04:33,830
So the player rolls the dice and they're using game rule.

75
00:04:34,110 --> 00:04:39,350
Also, we need a computer roll and you could add in as many as you want.

76
00:04:39,380 --> 00:04:41,090
So in this case, we're only going to have the two.

77
00:04:42,050 --> 00:04:45,720
But you can extend on this and create additional options to roll.

78
00:04:46,070 --> 00:04:51,470
So we also need to do is check to see who the winner is and then output the results.

79
00:04:52,250 --> 00:04:54,520
And we're going to do that in the upcoming lesson.

80
00:04:54,800 --> 00:05:00,590
So go ahead, set this up and have the ability to roll and you're going to be ready to move on to the

81
00:05:00,590 --> 00:05:06,050
next part where we're going to wrap this up and we're going to check to see who the winner is and then

82
00:05:06,050 --> 00:05:07,370
output that information.

83
00:05:07,370 --> 00:05:12,380
And actually, we're going to just put it right on top of the dice so that wherever we're clicking and

84
00:05:12,380 --> 00:05:18,260
I know this doesn't look like dice, so it's just that input feel that field that we can click and initiate

85
00:05:18,260 --> 00:05:19,440
the action of the game.

86
00:05:20,060 --> 00:05:21,380
So go ahead, create this.

87
00:05:21,380 --> 00:05:23,090
And coming up, we're going to wrap this up.