This lesson, we're going to be drawing out a random card from the deck of cards that we built in the
previous lesson coming into our game, we've got a start button.
We hit start and we see that we've generated the deck of cards.
We also have an option now to do higher or lower, so we need to present the player with a deck or a
card that they can look at and visually see.
And then the next step would be to determine if the following card is going to be higher or lower.
So we need to pick a card at random from the deck that we just generated.
And that's going to be happening where we draw a card.
And within that draw card function, where we're setting a value for card, we can pull a card out of
the deck.
Let's select random using JavaScript math random.
So let's random index, we need to select a random value of an item, an index value from the deck that's
currently existing and this can be done using math floor.
So we get a full number there so we don't have any more decimal places.
And then using math random.
And then the number that we want to multiply the math random is by the value of the length of the deck.
And that will give us a full number because the deck length starts at zero, the index values start
at zero.
So it's fine to start at zero, going all the way up to the maximum length of the deck.
So currently it would be 52.
So this would return back on that first iteration, a number from zero to fifty one.
And as you can see, that would match with index numbers of all of the items that we have currently
within our deck array.
So now that we've selected an item at random, we can return back a value for card.
And using this card value, we can take deck and using a JavaScript array method splice, we can splice
out, which actually changes the content of the array and removes the item out of the array and returning
it back into the value of card.
So when we do splice using that random index value that we just pulled out at random, we only want
to splice out one card.
So indicate that that's the one card that we want to splice out and return that back as card.
And there's actually one other thing that we're going to need to do.
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
returned here.
So we output the value of card and you see that this is an array with an object inside of it, because
the way that it was built when we were building the card is that we created this object and we dropped
this item in here into the array.
So we need to return back that first value that's sitting in there as we've pushed it in.
And the way to do that and this also gives us an option to provide additional information into that
card if we wanted to.
So it's not a bad thing to have all of this options here.
And we can easily pull back that card by selecting that first item in the index, doing the zero.
Now, when I start it, I return it.
I see that I've got a card value being returned back.
I'm returning back that full object.
So it's a queen of hearts.
Its value is eleven.
And that's where we're returning back into my card when we draw a card.
So now we have a card to work with and we can output that card value into the player's visible area
where we've got our gameplay in our HTML.
And if we want to, we could output my card and say, Frank.
And then my card, because now we've got an object of value in there and suit, so refresh start eight
hearts, so we return back the eight of hearts we can refresh for spades, we've returned back the four
spades.
Now, I know this isn't very appealing visually.
And coming up next, we're going to generate some HTML using JavaScript and generate out a more visual
representation of the jack of hearts instead of Jasjeet Hearts.
So that's still all coming up in the next lessons.
For now, build out the ability to draw a card.
And the other thing that I want to note before we conclude this lesson is as we splice content out of
the deck, the deck is actually getting smaller.
We've removed out that item from the deck.
So eventually, once we run through that full deck, we're going to hit a deck length of zero.
We're no longer going to run this function.
We're going to make a brand new deck and then we're going to be able to draw another card.
So even if the player is playing extremely well, they can go through all 52 cards, get everything
correct.
It's just going to create another deck and they can keep playing infinitely long until as long as they're
guessing the value, whether it's higher or lower.
So the game can really continue to an infinite amount.
It's all up to the player to be able to determine if it's higher or lower.