1
00:00:00,920 --> 00:00:05,120
Few lessons ago, we set off to create a coin toss scheme from scratch.

2
00:00:05,380 --> 00:00:12,610
The objective of the game is to guess whether the computer is going to select a heads or tails value.

3
00:00:12,730 --> 00:00:14,160
And you've got two options.

4
00:00:14,470 --> 00:00:19,780
So the players presented with either heads or tails, they go by starting to click one of them.

5
00:00:19,900 --> 00:00:21,370
They can select either one of them.

6
00:00:21,640 --> 00:00:28,150
And when they make that selection that triggers off the computer to make their random selection, make

7
00:00:28,150 --> 00:00:32,440
the comparison between the player selection and the computer's selection.

8
00:00:32,590 --> 00:00:35,560
And if it's correct, then the player wins.

9
00:00:35,770 --> 00:00:36,880
Player gets a point.

10
00:00:37,060 --> 00:00:42,030
If the player guessed wrong, then the computer wins and the computer gets a point.

11
00:00:42,370 --> 00:00:45,570
So this game is just a game of luck.

12
00:00:45,580 --> 00:00:48,730
So 50/50 chance to get it right or wrong.

13
00:00:48,940 --> 00:00:54,730
And I'm going to walk you through all of the steps that we took in the earlier lessons to build out

14
00:00:54,730 --> 00:00:55,870
this game from scratch.

15
00:00:56,200 --> 00:00:59,770
So we first we started out by setting up our HTML.

16
00:01:00,040 --> 00:01:05,800
So always think of it the way that what you need to present for the player in order for them to be able

17
00:01:05,800 --> 00:01:06,580
to play the game.

18
00:01:06,760 --> 00:01:12,370
This is a relatively simple model and we know that we needed a message so that we provide the player

19
00:01:12,370 --> 00:01:16,210
some instructions as well as results from their selection.

20
00:01:16,360 --> 00:01:21,700
And we also wanted to provide the player the two options, whether to guess heads or tails.

21
00:01:21,850 --> 00:01:24,550
And that's all we really needed within the HTML.

22
00:01:24,730 --> 00:01:26,170
Then we came to the JavaScript.

23
00:01:26,380 --> 00:01:31,990
We wanted the computer to be able to select either heads or tails as well so that it would match up

24
00:01:31,990 --> 00:01:34,440
with what the player had as an option.

25
00:01:34,720 --> 00:01:40,390
We set up a scoring, so the scoring was an additional part to the gameplay.

26
00:01:40,540 --> 00:01:46,180
It's not necessary for the core functionality of this game where we're simply guessing to see if we're

27
00:01:46,180 --> 00:01:48,700
getting the same value as the computer's guessing.

28
00:01:49,210 --> 00:01:55,510
We also went through and we set up a message area, so we set up some objects connecting them to the

29
00:01:55,510 --> 00:02:00,730
elements using square selector to make the selection from the elements using within the DOM.

30
00:02:01,210 --> 00:02:03,670
We output that content into the console.

31
00:02:03,670 --> 00:02:07,420
We can get rid of that because we're not going to be needing to make use of that anymore.

32
00:02:07,570 --> 00:02:11,830
And also the button values, we can output those and get rid of those from the console.

33
00:02:12,790 --> 00:02:17,350
We loop through the node list that was available.

34
00:02:17,650 --> 00:02:23,290
So all of the buttons, if we had more buttons, they'd be added into the Snoad list and they'd automatically

35
00:02:23,290 --> 00:02:28,090
be added in that click event using this this block of code here.

36
00:02:28,450 --> 00:02:30,460
And we're all sending them all.

37
00:02:30,550 --> 00:02:36,820
So it doesn't matter what button gets clicked, the function toss coin gets invoked within the toss

38
00:02:36,820 --> 00:02:37,330
coin.

39
00:02:37,480 --> 00:02:41,260
We check to see the element that triggered the event.

40
00:02:41,260 --> 00:02:42,790
We see what their inner text is.

41
00:02:43,030 --> 00:02:45,670
And in this case, we've got heads, we've got tails.

42
00:02:45,760 --> 00:02:51,430
If we create a random button and had whatever we wanted in their written, we would also see that text

43
00:02:51,430 --> 00:02:52,000
as well.

44
00:02:52,450 --> 00:02:59,230
We know with the coin, the computer coin toss, we've got a value of anywhere from zero or one.

45
00:02:59,230 --> 00:03:02,950
So we've got two possibilities within this value.

46
00:03:03,070 --> 00:03:10,450
And you can also extend this to be more dynamic where we've got the coin array and we can use the length

47
00:03:10,450 --> 00:03:10,870
value.

48
00:03:11,140 --> 00:03:17,470
And in this case, if we want to add in additional options here within the coin toss, then those would

49
00:03:17,470 --> 00:03:19,300
also be provided as well.

50
00:03:19,510 --> 00:03:24,220
But keeping in mind that we would still only have two buttons and you'd have to update the buttons as

51
00:03:24,220 --> 00:03:24,480
well.

52
00:03:25,570 --> 00:03:32,620
So going into our random values or selecting a random value from the computer for the computer, either

53
00:03:32,620 --> 00:03:36,250
heads or tails, and once we make that random.

54
00:03:37,310 --> 00:03:38,400
Value, that's good.

55
00:03:38,420 --> 00:03:44,900
We're going to use that as the index value within the coin array and display whatever is the corresponding

56
00:03:44,900 --> 00:03:46,470
value, either heads or tails.

57
00:03:47,260 --> 00:03:55,490
Next, we output the content that what the computer selected within that message area element.

58
00:03:57,280 --> 00:04:04,570
We create another element that will hold our output so that we can set an output here, whether we win

59
00:04:04,570 --> 00:04:06,600
or lose, we set different outputs.

60
00:04:06,910 --> 00:04:09,840
We check to see if the players guess is equal to the computers.

61
00:04:09,850 --> 00:04:11,950
Guess if it is, the player wins.

62
00:04:12,170 --> 00:04:18,070
If it's not the computer wins, we update the score accordingly and we output that final message to

63
00:04:18,070 --> 00:04:19,540
the player so they know what happens.

64
00:04:20,200 --> 00:04:26,890
Thanks again for taking this quick section and learning how to build out a coin toss game from scratch.