IEBPROJECT CASE STUDY
12 / 33
CT 00:00:00 T+00:00
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 33

2D
Solitaire

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

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: 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 02FreeCell on the same engine, where the four cells at the top left set how long a move can be.
A game of two-suit Spider solitaire with ten tableau columns of overlapping cards
PL 03Two-suit Spider, ten columns wide, the variant that forced the move model to handle whole runs rather than single cards.

Sheet 03 of 08/Split

The engine cannot see the screen

engine.js makes no DOM calls at all, so ui.js never decides whether a move is legal, it just asks the engine.

A settings panel over the game listing variant, draw, redeal, scoring and assist options
PL 04The settings drawer, where the variant, the draw count, the redeal limit and every assist are switches rather than assumptions.
The same FreeCell game rendered on a near-black table with classic red and black suits
PL 05The dark table with the classic suit palette, one of the looks the same board can be rendered in without the engine knowing.
The same Klondike deal drawn with plain programmatic pip faces instead of the illustrated deck
PL 06The second face mode: pips drawn as SVG in code, from a table of positions per rank, so the game still reads with no images loaded.

Sheet 04 of 08/Moves

Undo is just the move run backwards

Every move is stored as a reversible delta instead of a board snapshot, so undo is that same delta run backwards and redo runs it forwards again.

Sheet 05 of 08/Honest

The solver says maybe, so it says maybe

When the solver can't confirm a deal is winnable within its search budget it says so and deals anyway instead of pretending, and for Spider it doesn't even try.

Sheet 06 of 08/Look

Adjustable down to the felt

Almost everything about how it looks and plays, table colour, card size, suit palette, whether you drag or click, is a setting, and every one of them is remembered 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 producing a move instead of three separate paths that happen to do the same thing.

PL 07The full-screen page at iebisen.com/2d-solitaire, which is the same build as the one embedded on this page.

Sheet 08 of 08/Source

Inspect the work