Klondike patience is the solitaire most people mean when they search “how to make solitaire”: seven tableau columns, four suit foundations, a stock you flip when stuck, and drag-drop moves until every card lands Ace-through-King. Microsoft bundled it with Windows for decades, so the rules are muscle memory even for players who never read a rulebook. Most javascript solitaire tutorials stop at a static screenshot and a hardcoded board array. The 2026 pipeline is different. A coding agent scaffolds the deck model, move validator, and pointer-driven drag layer from one prompt, and AI generation covers the felt table, card backs, and lounge audio. In a browser, that means WizardGenie for the Klondike loop, Sorceress AI Image Gen for the table and card art, SFX Gen for shuffle and place stings, and Music Gen for a calm background bed. This guide is the honest end-to-end for how to make solitaire in 2026, in a browser, in a weekend.
What how to make solitaire actually means in 2026
The query “how to make solitaire” hides three intents. Some searchers want a printable deck PDF or a physical card layout — that is a graphic-design problem, not a game loop. A second intent is a solitaire solver: paste a deal, watch an algorithm brute-force moves. Useful for analysis, but not playable. The third intent, and the one this guide targets, is a single-player browser Klondike game: a fair deal routine, seven tableau piles with face-up and face-down cards, four foundation piles, stock and waste piles, drag-drop (or tap-to-move) input, undo, a timer, optional draw-one versus draw-three stock rules, and a win screen when all fifty-two cards reach the foundations. That is a weekend build, it demos the whole Sorceress toolset, and it is the format most solitaire game tutorial and browser klondike searchers actually want.
The presentation contract is small and strict. A title screen shows the game name, a New Game button, a Draw mode toggle (one card or three), and optionally a Daily Deal seed keyed to the UTC date. The play screen shows green felt (or your theme), seven tableau columns with overlapping cards, four empty foundation slots top-right, stock bottom-left, waste beside stock, an Undo button, move counter, and running timer. On win, freeze input, play a short flourish, show elapsed time and best time, and offer New Game or Replay. The Klondike Wikipedia overview is still the cleanest rules summary: build foundations by suit from Ace to King, build tableau in alternating colors descending, empty tableau slots accept Kings only.
The solitaire loop in one minute (deal, select, move, flip, win)
Five moving parts, repeated until the board clears or the player gives up. First, deal — shuffle a standard fifty-two-card deck, place one face-up card on tableau pile one, then deal increasing face-down stacks across seven piles with the top card of each pile face-up. Remaining cards form the stock. Second, select — pointer-down on a face-up card selects that card and every face-up card stacked below it in the same tableau column (a valid sub-stack). Third, move — drag the stack to another tableau pile or a foundation; on release, run the move validator; if illegal, snap back. Fourth, flip — when no tableau moves exist, tap stock to move one (or three) cards to waste; when stock empties, optionally recycle waste back to stock. Fifth, win — when all four foundations hold thirteen cards each, stop the timer and show the completion card. That is the entire solitaire loop. Auto-complete to foundations, hints that flash a legal move, and Vegas scoring modes are polish layered after one honest round works.
Pick your engine for how to make solitaire: vanilla DOM, canvas, or WizardGenie
Three good browser targets in 2026, each with a different trade-off. Vanilla JavaScript with absolutely positioned card divs is the honest default and the pick this guide recommends for a first build. Each card is a <div> with a CSS background sprite or two layered images (back and face). Tableau piles offset cards vertically so you see the rank strip. Pointer events handle drag with a floating clone. Total code footprint for a working patience game tutorial is under 800 lines including the deal and validator. No engine to install, ships as a single static HTML file, deploys anywhere. This is the stack most html5 solitaire and javascript solitaire tutorials should have started with.
Canvas becomes the right pick if you want fan-spread animations, card flip tweens, or particle confetti on win. You still keep New Game and Undo in the DOM for accessibility; canvas owns the felt and cards. The cost is hit-testing rectangles for every card on every frame during drag.
Phaser 4.2.1 “Giedi” (verified 2026-08-19 on the official Phaser download page) becomes the right pick if you want tweens when cards snap onto foundations, shader-based glow on valid drop targets, or integrated audio timelines. Phaser’s Scene lifecycle maps cleanly onto title-play-win if you later add themed skins (space solitaire, neon casino). For a first card-drag game, Phaser is optional weight — use it when motion is the product, not when the product is a correct Klondike validator and a reliable undo stack.
WizardGenie is not a separate rendering engine — it scaffolds whichever of the three you pick from a single natural-language prompt. WizardGenie ships as both a desktop app (Windows installer with auto-update, available to Early Access supporters and above) and a no-install web build. Its coding-model lineup covers Claude Opus 4.7, GPT-5.5, Gemini 3.1 Pro, DeepSeek V4 Pro, Kimi K2.5, Grok 4.2, and MiniMax M2.7 (verified 2026-08-19 in src/app/_home-v2/_data/tools.ts). For solitaire, any frontier model scaffolds the deck model and drag layer in one prompt. Pair a frontier planner with a budget executor like DeepSeek V4 Pro or Kimi K2.5 for the typing pass — the Dual-agent pattern lands most projects at roughly one-fifth the single-frontier cost.
Step 1 — model deck, tableau, foundations, and Klondike deal
Nothing else in the pipeline matters if the move rules are wrong or the deal duplicates cards. Start with a canonical deck: fifty-two cards, each { id, suit, rank } where suit is hearts, diamonds, clubs, or spades and rank runs Ace (1) through King (13). Build helper predicates once:
function isRed(suit) {
return suit === 'hearts' || suit === 'diamonds';
}
function canTableauMove(moving, destTop) {
if (!destTop) return moving.rank === 13; // King on empty column
return isRed(moving.suit) !== isRed(destTop.suit)
&& moving.rank === destTop.rank - 1;
}
function canFoundationMove(card, foundationTop) {
if (!foundationTop) return card.rank === 1; // Ace starts pile
return card.suit === foundationTop.suit
&& card.rank === foundationTop.rank + 1;
}
The Klondike deal is deterministic given a seed. Shuffle with Fisher–Yates, then loop column c from 0 to 6 and row r from 0 to c, pushing one card onto tableau pile c face-down except the last card in each column, which starts face-up. Stock gets the remainder. Store game state as { tableau: Card[][], foundations: Card[][], stock: Card[], waste: Card[], undo: State[] }. Unit-test the deal: fifty-two unique ids, seven tableau piles with 1+2+3+4+5+6+7 = 28 cards, twenty-four in stock. Test canTableauMove with a red 7 onto a black 8 (legal) and a red 7 onto a red 6 (illegal). Those asserts are the difference between a solitaire clone people trust and one they rage-quit after the first illegal snap.
