A miss is as good as a mile, as the saying goes, and nowhere is that saying more tangible than in a casino. This project examines the effect of deceptive design, making people believe they were so close, when in fact they were nowhere near.

Problem

I won’t claim to know exactly how a real slot machine works, but like most people who have played one, I can say I was a little too close too many times. This project shows how a clear loss can be turned into the illusion of being close to winning.

Approach

I built this as a fully client-side Vue.js application. The core idea is a split view: traditional animated spinning reels on one side, and an honest number line on the other. Both show the same reality, but one does so in a much more neutral way.

At its core, we simply generate a random number between 1 and 10,000. This number is checked against a table to determine the winnings.

The reels are built from knowing from the start which position they will land on, and we simply place the symbols that match the predetermined truth from the random value. Then we randomly fill in the positions around them with a bias toward more valuable symbols.

In the case of no win (70% of spins), there is a 30% probability of a near-miss — 2 out of 3 reels showing the same symbol, and in many cases the last symbol just one position off. Near-misses also have a very high probability of being the jackpot.

Features

  • Split view: Deceptive animated reels next to an honest statistical meter, both showing the same reality in very different ways
  • Near-miss composition: Configurable frequency where losses are shown as 2-matching-symbol near-misses, with weighted level selection and neighbour symbol placement
  • Weighted reel strips: Exponentially decaying weighted symbol placement creates natural clusters without explicit fixed patterns
  • 8-level win system: Fully adjustable thresholds, multipliers per symbol with live RTP calculation
  • Real-time configuration: Adjust nearly everything and see the effect immediately
  • Auto-spin & turbo mode: Run 10–100 automated spins at normal or accelerated speed for statistical observation
  • Spin history: View history of the last 20 spins
  • Statistics panel: Total wager, total win, biggest win, win/loss streaks, and level distribution
  • Win animations: Confetti, screen flashes, glows, and light bursts scaled by win level (4 tiers)

What it offers

Honest Slot Machine is an educational tool that demonstrates how slot machine psychology works under the hood. It gives developers, game designers, and curious players a transparent environment to experiment with RNG ranges, pay tables, and presentation bias. The real-time configuration makes it easy to test what-if scenarios and understand how small parameter changes affect the gameplay experience.

Tech Stack:

  • Frontend: Vue 3
  • Build tool: Vite
  • Dependencies: No UI framework — custom minimal CSS

Repository: git.jimmy-b.se/JimBer110/honest-slot-machine