A game of Klondike solitaire in progress, cards laid out in seven tableau columns on a pale felt table

Programming projectDesign and buildDrawing 12 of 47

2D
Solitaire

I built this Solitaire for the browser to practise keeping the game rules separate from the screen. One engine runs three games, Klondike, FreeCell and Spider, and you can play it right here on this page.

StatusPlayable, 2026
GamesKlondike, FreeCell and Spider on one engine
Built withPlain JavaScript, no framework and no build step
Engine907 lines of rules with zero DOM calls
DealsDeterministic, so deal #4412 comes back the same every time

Sheet 02 of 08/Why

A small game with a lot of state

Solitaire looks simple until you write down everything one drag can do. It can flip a hidden card, empty a column and complete a foundation, all at once.

A game of FreeCell in progress with four free cells and four foundations across the top — *PL 02*FreeCell on the same engine. The four cells at the top left decide how long a move can be.

A game of two-suit Spider solitaire with ten tableau columns of overlapping cards — *PL 03*Two-suit Spider, ten columns wide. This is the variant that made the move model handle whole runs instead of single cards.

Sheet 03 of 08/Split

Separating the rules from the screen

engine.js doesn't make a single DOM call. Whenever ui.js needs to know if a move is legal, it asks the engine.

A settings panel over the game listing variant, draw, redeal, scoring and assist options — *PL 04*The settings drawer, where the variant, the draw count, the redeal limit and every assist are switches you can change.

The same FreeCell game rendered on a near-black table with classic red and black suits — *PL 05*The dark table with the classic suit palette. It's one of the looks the same board can be drawn in, and the engine doesn't know which one is on screen.

The same Klondike deal drawn with plain programmatic pip faces instead of the illustrated deck — *PL 06*The second face mode. The pips are drawn as SVG in code from a table of positions for each rank, so you can still read the cards with no images loaded.

Sheet 04 of 08/Moves

Undo and redo

Every move is stored as a reversible delta instead of a snapshot of the board. Undo runs that delta backwards, and redo runs it forwards again.

Sheet 05 of 08/Solver

Deals the solver can't confirm

If the solver can't confirm a deal is winnable within its search budget, it says so and deals anyway. For Spider, it doesn't try at all.

Sheet 06 of 08/Settings

Settings

Almost everything about how it looks and plays is a setting, like the table colour, the card size, the suit palette and whether you drag or click. It remembers every one of them the next time you open it.

The 2D Solitaire page with site header, title and the game board filling the width below it

Sheet 07 of 08/Next

What I would do differently

If I rebuilt this, I'd merge drag, click-to-move and keyboard into one shared way of making a move. Right now they're three separate paths that happen to do the same thing.

PL 07The full-screen page at iebisen.com/2d-solitaire. It's the same build as the one embedded on this page.

Sheet 08 of 08/Source

2DSolitaire