21 Card Trick Breakdown

For over 35 years, this card trick has amazed and confused friends and family. It’s a simple trick in execution, but behind the scenes, there’s a clever mathematical principle at play. Here’s a breakdown of how it works and how I brought it to the web.

How the Trick Works

The game begins with 21 cards arranged into three columns. Here’s the step-by-step breakdown:

1. The Setup: The cards are shuffled and laid out in three columns. You’re asked to pick a card and remember which column it is in.
2. The First Move: You select the column your card is in. The trick is that the column you choose is placed in the middle of the pile during the next shuffle.
3. The Shuffle and Repeat: This process is repeated twice more — each time, the column with your card is shuffled into the middle. Because the middle pile consistently contains your card, the deck “narrows down” to a central card.
4. The Reveal: After three rounds of shuffling, the card you selected is always the 11th card in the pile. This predictable pattern is what makes the trick work every time.

The Web Version

I’ve ported this trick to the web, and now it’s available as an interactive game. You can try the game here.

The Code Explained

Here’s an overview of how the trick was implemented using JavaScript:

1. Shuffling and Dealing the Cards

The JavaScript code takes an array of 52 cards and shuffles them. It then selects 21 cards from the shuffled deck and arranges them into three columns. Here’s a snippet that does the shuffle:

function shuffleAndDeal() {
    cardImages = [...allCardImages].sort(() => Math.random() - 0.5).slice(0, 21);
    dealCards();
}

2. Re-arranging the Columns

Each time you select a column, the JavaScript code takes that column and moves it to the middle. This is crucial to keeping your card in the central stack:

function columnSelected(pickedColumn) {
    const newOrder = [];
    if (pickedColumn === 0) {
        newOrder.push(...columns[1], ...columns[0], ...columns[2]);
    } else if (pickedColumn === 1) {
        newOrder.push(...columns[0], ...columns[1], ...columns[2]);
    } else {
        newOrder.push(...columns[0], ...columns[2], ...columns[1]);
    }
    cardImages = newOrder;
}

3. Revealing the Card

Once the shuffle has been repeated three times, the 11th card in the deck is revealed as your chosen card:

function revealFinalCard() {
    const finalCardIndex = 10; // The 11th card
    const finalCardSrc = cardImages[finalCardIndex];
    const finalCardElement = document.getElementById('finalCard');
    document.getElementById('message').classList.add('show');

    finalCardElement.src = finalCardSrc;
    finalCardElement.classList.add('show');
}

4. Card Images

The card images used in the game are SVG files that you can download from Tek Eye's SVG Playing Cards.

How the Trick Works Programmatically

1. User Selection: The user selects the column with their card.
2. Middle Stack: The column they select is placed in the middle of the shuffled deck each time.
3. Predictable Outcome: After three rounds of shuffling, the card you selected is consistently the 11th card in the deck, which is why it can be predicted with certainty.

Want to Try It Yourself?

You can download the full code and set of card images here. If you’d like to add this trick to your own website or use it for learning purposes, feel free to experiment with it.

With this explanation, you now know the secret behind this fun, interactive card trick. Try it out with your friends and family, or explore how it works by playing the online version.