2020
Blackjack (JS)

Blackjack - Create and Shuffle a Deck of Cards in JS

Translated from German using DeepL.

Date: July 2020
Reading time: 4 minutes

A few weeks ago I was given the task of implementing a game with HTML, CSS and JS. The choice fell on blackjack, the most played game of chance.

The game is complex to program and the many rules do not make it any easier. Therefore, this post only refers to the creation and shuffling the deck.

Creating a deck

To play blackjack, you need a deck of cards. This also applied to my game. To create the deck, I used JSON. I was able to save my data in a readable format. It looked like this:

{
    "cards": [
        {
            "suit": "clubs",
            "card": "ace",
            "value": "11",
            "img": "../pcards/clubs/ace.png"
        },
        {
            "suit": "clubs",
            "card": "2",
            "value": "2",
            "img": "../pcards/clubs/two.png"
        }
    ]
}

A card consists of four parts.

  • Suit: clubs/spades/hearts/squares
  • Card: 2-10/jack/queen/king/ace
  • Value: Value of the respective cards *
  • Picture: Link to the picture with the corresponding card

* An ace can be counted as 11 or 1. However, I have specified the value 11 in the JSON. This is changed to 1 as soon as 21 is exceeded. This means that the player and the bank always have the best possible score.

Include deck

To use these cards in the JS, I first had to integrate them. For this I used the best known JS library: jQuery
jQuery provides helpful functions. To use the library I added the following script tag to the HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
$.getJSON('bjgame.json', function (deck) {});

With a little code in JS I can now use the object under the name deck. If I now want the value of the first card, I can determine this with deck.cards[0].value.

Shuffle the deck

If you want to achieve a fair and realistic game, shuffling is a crucial point. Therefore, I wanted to make sure that the deck is well shuffled.

Fun Fact

If you shuffled a million decks of cards every second since the 12th century (when playing cards first appeared), the probability of getting an of getting a sequence that has occurred before would be:
1 of 2.867.038.870.154.391.317.064.159.598.662.483.914.762.118.736.300.000
That's several octillions... almost impossible.

Permutation

The following formula is needed to calculate the number of possible arrangements:
n! = n * (n - 1) * (n - 2) * ... * 1

If the deck consisted only of the 4 aces, there would be 24 possibilities.

  • At the beginning, an ace from 4 can be selected
  • Then there are 3 left
  • After you have already placed two, you can choose one of the 2 remaining aces
  • Finally, you place the last card

You have to multiply the number of options: 4 * 3 * 2 * 1 = 24

With 7 cards, that's already 5040 possibilities: 7 * 6 * 5 * 4 * 3 * 2 * 1 = 5040

If you want to calculate the possibilities for the whole deck, you have to calculate 52 * (52 - 1) * (52 - 2) * ... * 1. This number will be much larger than the number of atoms on this earth.

The number of possibilities can be easily determined on this website: https://www.zum.de/Faecher/Materialien/gebhardt/stochastik/Kombin.html (opens in a new tab)

How I shuffle my cards

function shuffleCards(deck) {
    for (let counter = deck.cards.length - 1; counter >= 0; counter--) {
        let randomIndex = Math.floor(Math.random() * counter);
        let store = deck.cards[counter];
        deck.cards[counter] = deck.cards[randomIndex];
        deck.cards[randomIndex] = store;
    }
}

My counter has the value 51, because a deck of cards has 52 cards and an array starts at 0.

The for loop is therefore executed 52 times. Each card is stored in the store variable. It is then replaced by a random card. The random card is in turn replaced by the card that was previously stored in the store variable.

After this process, the card has swapped places with another random card. Now the same is done with the card in the 50th position.

This graphic illustrates this:

shuffle

Then the cards are shuffled.

mixed

There are of course several ways to shuffle an array.

Considerations

Random

I was wondering how random a number generated by a computer can be. However, during my research I found out that math.random() is good.

How math.random generates a number can be read here: https://hackernoon.com/how-does-javascripts-math-random-generate-random-numbers-ef0de6a20131 (opens in a new tab)

Seven

In a casino, 6 or 8 decks are normally used. These are shuffled together for a long time before they are placed in the card slots. are placed in the card slots. This changes the bank advantage. The probability of getting a blackjack with one deck is 4.83%, with 8 decks only 4.75%. I didn't want to make the whole thing too complicated. That's why I decided on one deck for the time being.

Then I asked myself how much I should shuffle before dealing. I decided on 7 times, as according to studies this shuffles the deck randomly:

function shuffleCards(deck) {
    for (let shuffleCounter = 1; shuffleCounter <= 7; shuffleCounter++) {
        for (let counter = deck.cards.length - 1; counter >= 0; counter--) {
            let randomIndex = Math.floor(Math.random() * counter);
            let store = deck.cards[counter];
            deck.cards[counter] = deck.cards[randomIndex];
            deck.cards[randomIndex] = store;
        }
    }
}

Now I have to think about when to shuffle the next time. At the moment, I shuffle after every round.

Shuffle? What's the point?

To be able to deal random cards, you wouldn't need to shuffle the deck. You could determine the position of the next card with math.random() and deal it out. This way, the cards would also be dealt randomly.
However, shuffling better reflects reality.

End

This is the end of this blog post, but the game is not finished yet. It is an extremely exciting task. There is a lot to think about thinking and researching. There are also countless opportunities to incorporate new things. In the process, you learn some exciting things about the game and and of course a lot about programming.