1
00:00:01,330 --> 00:00:05,920
This lesson, we're going to be drawing out a random card from the deck of cards that we built in the

2
00:00:05,920 --> 00:00:09,520
previous lesson coming into our game, we've got a start button.

3
00:00:09,730 --> 00:00:13,420
We hit start and we see that we've generated the deck of cards.

4
00:00:14,380 --> 00:00:20,740
We also have an option now to do higher or lower, so we need to present the player with a deck or a

5
00:00:20,740 --> 00:00:23,410
card that they can look at and visually see.

6
00:00:23,530 --> 00:00:28,840
And then the next step would be to determine if the following card is going to be higher or lower.

7
00:00:29,020 --> 00:00:33,400
So we need to pick a card at random from the deck that we just generated.

8
00:00:33,580 --> 00:00:37,090
And that's going to be happening where we draw a card.

9
00:00:37,210 --> 00:00:43,660
And within that draw card function, where we're setting a value for card, we can pull a card out of

10
00:00:43,690 --> 00:00:44,200
the deck.

11
00:00:44,860 --> 00:00:49,120
Let's select random using JavaScript math random.

12
00:00:50,190 --> 00:00:59,190
So let's random index, we need to select a random value of an item, an index value from the deck that's

13
00:00:59,190 --> 00:01:03,000
currently existing and this can be done using math floor.

14
00:01:03,150 --> 00:01:06,720
So we get a full number there so we don't have any more decimal places.

15
00:01:06,910 --> 00:01:08,970
And then using math random.

16
00:01:09,150 --> 00:01:15,810
And then the number that we want to multiply the math random is by the value of the length of the deck.

17
00:01:16,140 --> 00:01:21,570
And that will give us a full number because the deck length starts at zero, the index values start

18
00:01:21,570 --> 00:01:22,130
at zero.

19
00:01:22,320 --> 00:01:27,220
So it's fine to start at zero, going all the way up to the maximum length of the deck.

20
00:01:27,360 --> 00:01:28,920
So currently it would be 52.

21
00:01:29,070 --> 00:01:34,260
So this would return back on that first iteration, a number from zero to fifty one.

22
00:01:34,410 --> 00:01:40,470
And as you can see, that would match with index numbers of all of the items that we have currently

23
00:01:40,620 --> 00:01:42,480
within our deck array.

24
00:01:42,840 --> 00:01:48,690
So now that we've selected an item at random, we can return back a value for card.

25
00:01:48,810 --> 00:01:58,560
And using this card value, we can take deck and using a JavaScript array method splice, we can splice

26
00:01:58,560 --> 00:02:05,310
out, which actually changes the content of the array and removes the item out of the array and returning

27
00:02:05,310 --> 00:02:07,520
it back into the value of card.

28
00:02:07,800 --> 00:02:14,940
So when we do splice using that random index value that we just pulled out at random, we only want

29
00:02:14,940 --> 00:02:16,380
to splice out one card.

30
00:02:16,620 --> 00:02:22,470
So indicate that that's the one card that we want to splice out and return that back as card.

31
00:02:22,630 --> 00:02:25,140
And there's actually one other thing that we're going to need to do.

32
00:02:25,440 --> 00:02:32,460
So for now, what I'll do is I'll output the value of card and I'll show you what I was actually getting

33
00:02:32,460 --> 00:02:33,030
returned here.

34
00:02:33,480 --> 00:02:40,560
So we output the value of card and you see that this is an array with an object inside of it, because

35
00:02:40,560 --> 00:02:46,680
the way that it was built when we were building the card is that we created this object and we dropped

36
00:02:46,680 --> 00:02:49,010
this item in here into the array.

37
00:02:49,230 --> 00:02:55,410
So we need to return back that first value that's sitting in there as we've pushed it in.

38
00:02:55,500 --> 00:03:01,080
And the way to do that and this also gives us an option to provide additional information into that

39
00:03:01,080 --> 00:03:02,100
card if we wanted to.

40
00:03:02,400 --> 00:03:05,990
So it's not a bad thing to have all of this options here.

41
00:03:06,000 --> 00:03:11,920
And we can easily pull back that card by selecting that first item in the index, doing the zero.

42
00:03:12,120 --> 00:03:14,040
Now, when I start it, I return it.

43
00:03:14,160 --> 00:03:17,550
I see that I've got a card value being returned back.

44
00:03:17,670 --> 00:03:19,500
I'm returning back that full object.

45
00:03:19,680 --> 00:03:21,090
So it's a queen of hearts.

46
00:03:21,090 --> 00:03:22,320
Its value is eleven.

47
00:03:22,440 --> 00:03:27,230
And that's where we're returning back into my card when we draw a card.

48
00:03:27,480 --> 00:03:36,060
So now we have a card to work with and we can output that card value into the player's visible area

49
00:03:36,210 --> 00:03:39,210
where we've got our gameplay in our HTML.

50
00:03:39,360 --> 00:03:44,670
And if we want to, we could output my card and say, Frank.

51
00:03:46,610 --> 00:03:54,770
And then my card, because now we've got an object of value in there and suit, so refresh start eight

52
00:03:54,800 --> 00:04:02,540
hearts, so we return back the eight of hearts we can refresh for spades, we've returned back the four

53
00:04:02,600 --> 00:04:03,090
spades.

54
00:04:03,440 --> 00:04:05,930
Now, I know this isn't very appealing visually.

55
00:04:06,200 --> 00:04:14,210
And coming up next, we're going to generate some HTML using JavaScript and generate out a more visual

56
00:04:14,210 --> 00:04:18,310
representation of the jack of hearts instead of Jasjeet Hearts.

57
00:04:18,560 --> 00:04:21,110
So that's still all coming up in the next lessons.

58
00:04:21,740 --> 00:04:25,610
For now, build out the ability to draw a card.

59
00:04:25,790 --> 00:04:31,610
And the other thing that I want to note before we conclude this lesson is as we splice content out of

60
00:04:31,610 --> 00:04:34,380
the deck, the deck is actually getting smaller.

61
00:04:34,430 --> 00:04:36,740
We've removed out that item from the deck.

62
00:04:36,890 --> 00:04:42,470
So eventually, once we run through that full deck, we're going to hit a deck length of zero.

63
00:04:42,650 --> 00:04:44,510
We're no longer going to run this function.

64
00:04:44,510 --> 00:04:48,310
We're going to make a brand new deck and then we're going to be able to draw another card.

65
00:04:48,530 --> 00:04:54,830
So even if the player is playing extremely well, they can go through all 52 cards, get everything

66
00:04:54,830 --> 00:04:55,370
correct.

67
00:04:55,460 --> 00:05:01,880
It's just going to create another deck and they can keep playing infinitely long until as long as they're

68
00:05:01,880 --> 00:05:04,280
guessing the value, whether it's higher or lower.

69
00:05:04,400 --> 00:05:07,960
So the game can really continue to an infinite amount.

70
00:05:07,970 --> 00:05:10,910
It's all up to the player to be able to determine if it's higher or lower.