PixiJSTypeScriptGSAPWeb AudioVitest
Керування
- Tap or click Spin, or press Space or Enter; press again while the reels turn to stop them at once
- Arrow keys or the minus and plus keys change the bet; T toggles turbo; M toggles sound
- Auto plays 10, 25 or 50 spins and stops on free spins, a big win, low credits or a hidden tab
- Tap, click or press Space to skip a win count
- Pays opens the paytable, rules and RTP; Refill credits resets the play balance
- Add ?seed=7 to the address for a repeatable run
Needs WebGL. Without it the poster is shown. Respects the reduced-motion setting: the reels swap to the result with a short fade, with no bounce, motion blur, particles, flicker or count-ups. Sound is off until you turn it on. Credits, bet and settings are saved in this browser. Play credits only: no real money, no prizes, 18+.
Як це зроблено
A Las Vegas slot machine for play credits: five reels, three rows, ten fixed lines, a wild on the middle reels and star scatters that start eight free spins where every win is doubled and wilds grow to fill their reel. It is built the way a production slot client is built, with the math kept apart from the presentation. Play credits only: no real money, no prizes.
How it's built
- Math as a "server".
core/ is plain TypeScript with no PixiJS imports: reel strips, the paytable, line evaluation (left to right, wild substitution, highest win per line, leading wilds paying as sevens), scatters, free spins with retriggers and a seeded RNG. One function, spin(state, rng), returns a typed result (stops, landed and evaluated grids, line wins with their cells, stars, win, spins awarded) and the next state. In a real product this would run on a remote gaming server with a certified RNG; the client here only animates what it gets back. - Exact RTP.
core/math.ts computes the return from the strips without sampling: every line takes one uniform cell from each reel, so the expected line pay is a sum over symbol combinations weighted by per-reel probabilities; free spins add "this reel expanded to wild" as an outcome per reel, and retriggers are a geometric series. Result: 96.04% (base game 64.5%, free spins 31.5%), free spins about once in 91 spins. A seeded 20 million spin simulation of whole sessions agrees (96.19%, hit rate 27.6%). Unit tests check the exact figure, a 400,000 spin seeded run and the line rules; the long run is behind SLOT_SIM=1. - Tuning. The first draft put wilds on all five reels; with expanding wilds the free spins alone returned over 100%. Wilds now land only on reels 2 to 4 and the outer reels carry one star instead of two, which keeps the feature near a third of the return; the pays were then scaled to land on 96%.
- A typed state machine runs the client: idle, request, spinning, stopping, present, feature intro, feature outro. An event that is not valid in the current state throws, so a double click or a stray key never starts a second spin.
- Reels. Each reel is a pool of five sprites over a looping strip, so no sprites are created while spinning. A spin winds up, runs at constant speed with pre-baked motion-smear textures, then each reel decelerates onto its stop with a small overshoot, staggered left to right. After two stars the remaining reels spin longer under a glowing frame (anticipation). Space, Enter or the button slams every reel at once; turbo shortens everything.
- Wins. All winning lines show at once with the other symbols dimmed and the winners pulsing, then the machine cycles line by line with the amount. Big (10x bet), Mega (25x) and Epic (50x) wins count up through the tiers over a coin fountain and confetti, skippable with a tap or Space. Coins, confetti and sparks are one PixiJS ParticleContainer fed from a single atlas.
- Art. Everything is painted in code with Canvas 2D at boot (gradients, bevels, layered shadow glows) and handed to PixiJS as textures: the symbols, the expanding wild, the cabinet with chrome bezel, gold trim, topper and coin tray, the night street with neon signs, the glass shading and the particle atlas. Chaser bulbs are sprites whose phase changes with the machine's mood. Fonts: Monoton, Bungee, Limelight and Oswald, loaded only on this page.
- Everything readable is HTML: credits, bet and win meters, the controls, the feature boards, a paytable dialog with RTP and rules, and a polite live region that reads every result out. The canvas is hidden from screen readers.
- Autoplay runs 10, 25 or 50 spins and stops on free spins, a 25x win, low credits or a hidden tab. Credits, bet and settings are saved in this browser; Refill credits resets the play balance. A regulated UK build would turn off turbo and autoplay and keep spins at least 2.5 seconds long.
- Reduced motion: the reels swap to the result behind a short fade, with no wind-up, bounce, motion blur, particles, flicker or count-ups; bulbs stay lit. Neon flicker elsewhere stays far below three flashes a second.
- Performance. The pixel ratio is capped at 2, weak devices start with smaller textures and fewer particles, and the ticker stops while the machine is off screen or the tab is hidden. If the graphics context is lost, the poster covers the machine.
- Sound is generated with Web Audio (no files) and off until turned on (button or M).