Writing a slot machine game: Reels

Symbols per reel

How many of each symbol should I place on my reels? That is a complicated question that slot machine manufacturers spend a lot of time considering and testing when creating a game since it is a key factor to a game’s RTP (Return to Player) payout percentage. Slot machine manufacturers document all of this in what is called a PAR sheet (Probability and Accounting Report).

I personally am not very interested in doing probability formulations myself. I’d rather just imitate an existing game and move on to the fun stuff. Thankfully, some PAR sheet information has been made public.

Since I am building a game that has five reels and three rows, I am going to reference a game with the same format called Lucky Larry’s Lobstermania. It also has a wild symbol, eight regular symbols, as well two distinct bonus and scatter symbols. I currently do not have an additional scatter symbol, so I will leave that off my reels for now. This change will make my game have a slightly higher payout percentage, but that’s probably a good thing for a game that doesn’t offer the thrill of winning real money.

Here is how I represent the symbols-per-reel in my TypeScript code to match Lobstermania.

// reels.ts

import { SlotSymbol, SLOT_SYMBOLS } from './types';

const SYMBOLS_PER_REEL: { [K in SlotSymbol]: number[] } = {
  W: [2, 2, 1, 4, 2],
  A: [4, 4, 3, 4, 4],
  K: [4, 4, 5, 4, 5],
  Q: [6, 4, 4, 4, 4],
  J: [5, 4, 6, 6, 7],
  '4': [6, 4, 5, 6, 7],
  '3': [6, 6, 5, 6, 6],
  '2': [5, 6, 5, 6, 6],
  '1': [5, 5, 6, 8, 7],
  B: [2, 0, 5, 0, 6],
};

Each array above has five numbers that represent that symbol’s count for each reel. The first reel has two Wilds, four Aces, four Kings, six Queens, and so on. A keen reader may notice that the Bonus should be [2, 5, 6, 0, 0], but I have used [2, 0, 5, 0, 6]. This is purely for aesthetics because I like seeing the Bonus symbols spread across the screen rather than just on the three left reels. This probably affects the payout percentage as well, but for hobby purposes, I’m sure it’s negligible.

Generating reel sequences

Each reel can be simply represented as an array of symbols (['A', '1', 'K', 'K', 'W', ...]). I just need to make sure I use the above SYMBOLS_PER_REEL to add the right number of each symbol to each of the five reel arrays.

// Something like this...
const reels = new Array(5).fill(null).map((_, reelIndex) => {
  const reel: SlotSymbol[] = [];
  SLOT_SYMBOLS.forEach((symbol) => {
    for (let i = 0; i < SYMBOLS_PER_REEL[symbol][reelIndex]; i++) {
      reel.push(symbol);
    }
  });
  return reel;
});

The above code would generate five reels that each look like this:

[
  'W', 'W', 'A', 'A', 'A', 'A', 'K', 'K', // and so on...
]

This would technically work, but the symbols are grouped together like a brand new deck of cards. I need to shuffle the symbols to make the game more realistic.

/** Generate five shuffled reels */
function generateReels(symbolsPerReel: {
  [K in SlotSymbol]: number[];
}): SlotSymbol[][] {
  return new Array(5).fill(null).map((_, reelIndex) => {
    const reel = generateReel(reelIndex, symbolsPerReel);
    let shuffled: SlotSymbol[];
    let bonusesTooClose: boolean;
    // Ensure bonuses are at least two symbols apart
    do {
      shuffled = shuffleReel(reel);
      bonusesTooClose = /B.{0,1}B/.test(shuffled.concat(shuffled).join(''));
    } while (bonusesTooClose);
    return shuffled;
  });
}

/** Generate a single unshuffled reel */
function generateReel(
  reelIndex: number,
  symbolsPerReel: {
    [K in SlotSymbol]: number[];
  },
): SlotSymbol[] {
  const reel: SlotSymbol[] = [];
  SLOT_SYMBOLS.forEach((symbol) => {
    for (let i = 0; i < symbolsPerReel[symbol][reelIndex]; i++) {
      reel.push(symbol);
    }
  });
  return reel;
}

/** Return a shuffled copy of a reel array */
function shuffleReel(reel: SlotSymbol[]) {
  const shuffled = reel.slice();
  for (let i = shuffled.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
  }
  return shuffled;
}

That’s quite a bit more code, but it ensures that the reels are shuffled randomly. I’ve factored out a generateReel function to keep the generateReels function to a reasonable size. The shuffleReel function is a Fisher-Yates shuffle. I’m also ensuring that bonus symbols are spread at least two symbols apart. This is optional, though; I’ve seen real games with bonus symbols right on top of each other.

Stopping each reel

Now that I have five reels, the core mechanism of the game is to stop each reel on a random position. That is simple enough.

function pickRandomStop(reel: SlotSymbol[]): number {
  return Math.floor(Math.random() * reel.length);
}

Keep in mind that a machine with physical reels may spin each reel end-to-end multiple times before actually stopping in order to build suspense. A video slot machine simply has to transition from one grid of symbols on the screen to another with animation.

/** Return the three-symbol sequence starting at the randomly picked position */
function getVisibleSymbols(reel: SlotSymbol[], position: number): SlotSymbol[] {
  let slice = [];
  for (let i = 0; i < 3; i++) {
    slice.push(reel[(position + i) % reel.length]);
  }
  return slice;
}