What’s better than random?
By: Parker Nolan
Tags: Fun, User Experience, JavaScript, Product Design, UX

What’s better than random?

Coding a card game shuffle algorithm for better UX.

Credit: Giphy

Quarantine has unleashed a lot of creativity in the world.

Musicians are recording groundbreaking albums

Cat lovers have become tank designers

And, last week, some college students created a new drinking game

(My roommates and I are the college students)

The Game

Note: This is an article about how we are building the shuffle algorithm for our game. If you want to know more about the actual game itself, you can visit the website linked at the end of this piece.

The game is a pretty simple card game, where players pull from a deck of cards with instructions on them.

The card says “Play Civil War”? You play civil war.

The card says “Guys Drink”? Guys drink.

Seems simple enough, right?

That’s what we thought, too. Just randomly shuffle the cards and it’ll be fine.

So we used a standard random shuffle algorithm:

// array = array representation of our card deck

function rand_shuffle(array) { var j, x, i; for (i = array.length - 1; i > 0; i--) { j = Math.floor(Math.random() * (i + 1)); x = array[i]; array[i] = array[j]; array[j] = x; } return array; };

But this didn’t do the job

When we added the shuffle, we ignored the fact that there are different types of cards in the deck: Big Game cards and Mini Game cards.

Big Game cards instruct players to play games that involve setup and extra materials, like civil war or rage cage.

Mini Game cards instruct players to do quick tasks with little setup, like guessing a player’s hometown or “take a shot of hot sauce”.

We didn’t consider that you don’t want to play Big Games back-to-back.

Do you want to clean the table and set this game up twice in a row?

After we played a trial run of our game with friends, we found that the most fun was when we played a big game, then had a “cool down” period where everyone came back together in a small group.

That gives you time to talk about the things that happened in the big game, to share laughs with people that might have been on an opposing team, and to have conversations that lead to better experiences.

User Experience > Mathematics

By using a totally random shuffle algorithm, we ensured that Big Games would frequently be placed back-to-back in the deck, or placed so that there would only be one Mini Game between Big Games.

Apple learned this when they launched the iPod.

Apple originally used a truly random shuffle function, which didn’t take into account which songs had been played before any given song.

Users complained that the shuffle wasn’t really random, because they would sometimes get, for instance, three Coldplay songs in a row.

So Apple changed the shuffle algorithm.

The shuffle isn’t really random anymore, but the experience is better.

Our solution

We set up two separate decks, one for Big Game cards and one for Mini Game cards We randomly shuffle those decks Create a third empty deck, that will be used as the actual game deck Insert Mini Game cards to the game deck, with Big Game cards inserted at intervals randomized between every 3–5 cards

Here’s the code:

function fillPlayingDeck(cards, emptydeck) { var bigCards = []; var miniCards = []; cards.forEach(function(c) { for (let i = 0; i < c.deckCount; i++) { if (c.type === 'bigGame') { bigCards.push(c); } else { miniCards.push(c); }

}

}); // rand_shuffle is the shuffle function from earlier bigCards = rand_shuffle(bigCards); miniCards = rand_shuffle(miniCards); var limit = Math.floor(Math.random() * 2) + 2; var counter = 0; for (i = miniCards.length - 1; i > 0; i--) { if (counter === limit) { counter = 0; emptydeck.cards.push(bigCards.pop()); limit = Math.floor(Math.random() * 2) + 3; } emptydeck.cards.push(miniCards.pop()); counter++; } };

To clarify, the “c” being used in the card.forEach(c) function is a card object that we’ve created:

card(name, type, description, deckCount)

Type is either bigGame or miniGame, and deckCount is the number of times we want the card inserted to the deck.

What this does

At a technical level, this ensures that Big Game cards only get inserted with proper spacing.

But at the more important experience level, this makes the game:

Easier to play

Faster

More fun

The lesson here is: the next time you’re building a quick web project, ̶d̶o̶n̶’̶t̶ ̶o̶v̶e̶r̶t̶h̶i̶n̶k̶ ̶t̶h̶i̶n̶g̶s̶ pay attention to the smallest details and keep. on. testing. until you get it just right. Often, things that seem simple take the most work to create.

And if you want to play our game, check out the website here.