Ante How to Make a Poker Game (Browser Hand Loop 2026)

Most beginners who search "how to make a poker game" want the Texas hold’em feel - a green felt table with a dealer button rotating between seats, two face-down hole cards sliding to each player, a flop of three community cards flipping up in unison, a betting action bar with FOLD, CALL, and RAISE lit up, and a showdown that reveals a two pair beating a busted flush draw - not a real-money platform with rake calculations and Know Your Customer flows on day one. Live poker is famously demanding at commercial scale because a single project juggles cryptographically fair shuffling, four staged betting rounds with position and blinds, a hand ranker that scores seven-card sets correctly, AI opponents that fold-check-call-raise plausibly, and a chip economy that survives 200 hands of tilted play. A browser poker game aimed at a portfolio piece or a jam is a different animal. A coding agent scaffolds the deck, the shuffle, the hand ranker, and the four-round betting flow from a single prompt, and AI generation covers the felt, the card faces, the opponent portraits, and the chip clacks. On desktop or web, that means WizardGenie for the hand-loop interpreter, AI Image Gen for the felt, cards, and opponent avatars, and SFX Gen for the card slides and chip clacks. This guide is the honest end-to-end for how to make a poker game in 2026, as a weekend build you can actually finish.

What how to make a poker game actually means in 2026

The query "how to make a poker game" hides three distinct intents. Some searchers want a game-theory deep dive on pot odds, expected value, and GTO ranges - a strategy article, not a browser build. A second intent is the broader how to make a deck builder game guide covering any deck-shuffle-hand mechanic including Slay the Spire clones - useful, but that guide correctly targets deckbuilding progression, not staged betting. The intent this article targets is the third: a browser poker game that boots into a single-page HTML shell with a green felt table, four seats (you and three AI opponents), fair Fisher-Yates shuffle of a 52-card deck, no-limit Texas hold’em with a small blind and a big blind rotating on a dealer button, four staged betting rounds (preflop, flop, turn, river), a correct five-card hand ranker for seven-card sets, three AI opponents that fold trash and call medium hands with an occasional bluff, a chip stack that carries between hands, and a winner banner at showdown. That is a weekend build, it demos the Sorceress toolset honestly, and it is the format most poker game tutorial and javascript poker searchers actually want.

The presentation contract is small and strict. A green felt fills most of the viewport, with four seats spaced around the rim, a dealer button chip near the seat that acts last, and a community-card row across the horizontal center. Two hole cards sit at the front of the player seat, face-up for the human and face-down for the AI opponents until showdown. A pot chip stack in the middle grows as bets go in. A betting action bar sits at the bottom with FOLD, CHECK, CALL, RAISE (with an amount slider), and ALL-IN buttons - the buttons that are illegal in the current state (CHECK when there is a live bet, CALL when there is no bet) grey out automatically. The poker overview on Wikipedia (verified 2026-08-30) traces the game from its 19th-century Mississippi roots through Texas hold’em’s mid-2000s online-poker boom, confirming the ranking hierarchy and the flop-turn-river street structure - cite that page in your itch.io blurb so players know you shipped a browser hand loop, not a video poker slot machine.

The poker hand loop in one minute (ante, deal, bet, showdown)

Five moving parts, cycled every hand. First, post blinds - the small blind and big blind chips go in from the two seats left of the dealer button; the button rotates one seat clockwise between hands. Second, deal hole cards - two face-down cards go to each seat starting from the small blind, and a preflop betting round opens on the seat left of the big blind. Third, street loop - after the preflop round settles, the flop deals three face-up community cards and opens a second betting round; the turn deals a fourth community card and opens a third round; the river deals a fifth and opens a fourth. Fourth, showdown - if two or more players remain after the river round, all remaining hole cards flip up and the ranker scores each seven-card set (hole cards plus community board) to find the best five-card hand. Fifth, award pot - chips slide from the pot to the winning seat, the dealer button rotates, and the loop restarts. That five-step cycle, wrapped by a chip-stack tracker between hands, is the whole html5 poker loop - everything else (side pots, all-in equity splits, hand history, tournament blind schedules) is polish on top.

Pick your engine for how to make a poker game: Canvas, Phaser, or WizardGenie

Three good targets in 2026, each with a different trade-off. Plain HTML Canvas 2D is the honest default and the pick this guide recommends for a first build. Poker is light on physics - there is no collision solver, no continuous motion outside of a short card-slide easing curve, and the biggest render loads are the static felt and the card sprites, both of which are cheap. The MDN Canvas API reference (verified 2026-08-30) covers the drawImage sprite-atlas pattern that lets you pack all 52 card faces plus the card-back into a single texture and stamp any card at any table position with one blit. Cache the felt backdrop to an offscreen canvas once at boot, redraw only the moving card sprites and the pot chip stack each frame, and the whole browser texas holdem experience holds a stable 60 fps in any modern browser without any WebGL overhead.

Separate the simulation tick from the render frame - poker is inherently turn-based and does not need per-frame simulation. A single tick fires when a player action commits (fold, check, call, raise); everything between actions is either idle or animating a card slide or chip cascade off the render loop. This is the same discipline the sibling how to make blackjack guide uses for its deal loop - poker just adds three more streets and multi-player action instead of a dealer-only response.

Phaser v4.2.1 "Giedi" (released 9 July 2026, verified 2026-08-30 on the official Phaser stable download page) becomes the right pick when a browser poker game wants Phaser’s Scene system, tween library, and input plugins out of the box. Phaser scenes map cleanly to poker screens - LobbyScene, TableScene, ShowdownScene, GameOverScene - and Phaser’s tween chain is a natural fit for the "deal two cards to each of four seats, one card at a time, 80 ms apart" animation without hand-writing an easing loop. For a first weekend hand loop where the card-slide animation is the biggest UX bet, Phaser saves an hour; for a pure vanilla-JavaScript learning build, plain Canvas is more instructive.

WizardGenie is not a separate poker engine - it scaffolds whichever of the two 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, Claude Sonnet 4.6, GPT-5.5, Gemini 3.1 Pro, DeepSeek V4 Pro, Kimi K2.5, Grok 4.2, and MiniMax M2.7 (verified 2026-08-30 in src/app/_home-v2/_data/tools.ts lines 767-772). For a first poker hand loop, any frontier model scaffolds the deck-shuffle-deal-bet-showdown state machine 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, hand rankings, and betting rounds

Nothing else in the pipeline matters if the deck is not fair and the ranker is not correct. Start with a small, testable model:

const SUITS = ["c", "d", "h", "s"];
const RANKS = ["2","3","4","5","6","7","8","9","T","J","Q","K","A"];
const RANK_VALUE = Object.fromEntries(RANKS.map((r, i) => [r, i + 2]));

function freshDeck() {
  const deck = [];
  for (const s of SUITS) for (const r of RANKS) deck.push(r + s);
  return deck;
}

function shuffle(deck) {
  for (let i = deck.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [deck[i], deck[j]] = [deck[j], deck[i]];
  }
  return deck;
}

const state = {
  seats: [
    { id: "you",  name: "You",  stack: 1000, hole: [], folded: false, allIn: false, bet: 0 },
    { id: "ai1",  name: "Rook", stack: 1000, hole: [], folded: false, allIn: false, bet: 0 },
    { id: "ai2",  name: "Vera", stack: 1000, hole: [], folded: false, allIn: false, bet: 0 },
    { id: "ai3",  name: "Otto", stack: 1000, hole: [], folded: false, allIn: false, bet: 0 },
  ],
  dealerIndex: 0,
  smallBlind: 5,
  bigBlind: 10,
  board: [],
  pot: 0,
  toCall: 0,
  street: "preflop",
  deck: [],
};

function dealHand() {
  state.deck = shuffle(freshDeck());
  state.board = [];
  state.pot = 0;
  state.toCall = state.bigBlind;
  state.street = "preflop";
  for (const s of state.seats) { s.hole = []; s.folded = false; s.allIn = false; s.bet = 0; }
  postBlinds();
  for (let i = 0; i < 2; i++) for (const s of state.seats) s.hole.push(state.deck.pop());
}

The Fisher-Yates shuffle above is the correct O(n) algorithm - the loop counter starts at the end and picks a random index only from the unshuffled prefix, which is what produces a uniform permutation. The common naive-shuffle bug of writing Math.floor(Math.random() * deck.length) on every iteration produces a biased distribution that leaves cluster patterns detectable after roughly fifty hands (the Fisher-Yates shuffle overview on Wikipedia, verified 2026-08-30, has the classic proof and the wrong-vs-right-way comparison). For a single-player casual browser poker game, MDN’s Math.random reference (verified 2026-08-30) is honest and passes casual scrutiny; for any build that ever ships against another human on the same URL, swap the RNG source for Crypto.getRandomValues (verified 2026-08-30) to close the "I inspected the client seed" attack.

The hand ranker is the second must-get-right component. Rank a seven-card set (two hole cards plus the five community cards) by enumerating all C(7, 5) = 21 five-card subsets and returning the maximum. Score each five-card hand as a tuple (category, tiebreak-ranks) where category is an integer from 0 (high card) to 9 (royal flush) - a straight-flush of nines beats every full house, and comparing tuples lexicographically resolves the kicker rules correctly. Unit-test five cases before you generate any art: a pair of eights with an ace kicker beats a pair of eights with a king kicker; a wheel straight (A-2-3-4-5) is a valid straight and loses to any straight starting at 2 or higher; a flush ties correctly by high card down to the fifth card; a full house of aces over twos beats a full house of kings over queens; four of a kind beats any straight-flush-less full house. Those five tests catch ninety percent of javascript poker ranker bugs.

Step 2 - wire dealing, betting rounds, and AI opponents in WizardGenie

With the deck and ranker drafted, open WizardGenie. Drop in a bare index.html shell with a full-viewport canvas, a small HUD reading POT 0 - STREET PREFLOP, and a hotkey table. Give the agent one paragraph: Build a browser Texas hold’em poker game. Four seats: one human (bottom) and three AI opponents (Rook, Vera, Otto) around a green felt table. Each seat starts with 1000 chips. Small blind 5, big blind 10, dealer button rotates one seat clockwise between hands. Deal two hole cards to each seat starting from the small blind. Betting round order: preflop opens on the seat left of the big blind, postflop rounds open on the small blind. Actions per turn: FOLD, CHECK when no bet is live, CALL to match the current bet, RAISE by any amount from min-raise to remaining stack, ALL-IN for full stack. After the preflop round, deal the flop (three community cards), run a betting round, deal the turn (one card), run a round, deal the river (one card), run a final round. At showdown, evaluate each remaining seat’s best five-card hand from their two hole cards plus the five community cards using a seven-choose-five ranker, award the pot to the highest hand, and rotate the dealer button. AI opponents evaluate their current hand strength as a scalar between zero and one, call or raise when hand_strength times pot exceeds the call amount, otherwise fold, with a 10 percent bluff frequency on any street. Log every action to a hand-history panel on the right. Feed that to any coding model in the lineup and the interpreter scaffolds in under twenty minutes.

The remaining hour is polish via follow-up prompts. Add a hand-strength meter for the human player that updates after each community card deals - it renders the current best-five ranking name and the win-probability estimate as a small bar next to the CALL button, and turns off in tournament mode to match live-poker rules. Add chip animations so a raise slides chips from the seat stack to the pot in a short easing curve, and a pot award cascades chips back to the winning seat with a chip-clack SFX on each stack merge - fifteen lines of tween code. Add a timed action bar so an AI opponent’s fold-check-call-raise decision takes 800 ms with a small typing-indicator dot on their portrait, which reads as "thinking" and paces the hand naturally instead of firing all three AI actions in one frame. Add a hand-history log that records "Preflop: Rook raises to 30, Vera folds, Otto calls 30, You call 30. Flop [Ah, 7d, 2c]: You bet 60, Rook calls, Otto folds..." for the last five hands - fifty lines. Each item is a follow-up prompt, and the whole browser poker experience lands over a Saturday afternoon.

Optional siblings on the same base shell: for a simpler single-decision card game against a dealer, borrow the deal loop from how to make blackjack. For a deckbuilding roguelike where the deck evolves between fights instead of resetting each hand, see how to make a deck builder game. For a chance-driven scoring loop with no ranking hierarchy, see how to make a dice game.

Step 3 - AI Image Gen felt and cards, SFX Gen chip clacks and card slides

A blank Canvas with rectangle-and-text placeholders reads as a debugger, not a poker game. Two asset passes cover the whole html5 poker experience:

• Felt, cards, and portraits - open AI Image Gen and prompt five 3:2 scene panels: a green casino felt table backdrop with four seat positions and a dealer button chip, a single sprite sheet of all 52 card faces (13 ranks x 4 suits in a 13x4 grid) plus a matching card-back, and three opponent portraits (a stoic older man in a cowboy hat, a sharp-eyed woman with dark glasses, a smirking younger man in a hoodie). AI Image Gen ships every leading model in one panel including Nano Banana Pro, GPT Image 2, Seedream 5 Lite, Flux 2 Pro, Z-Image Turbo, and Grok Imagine (verified 2026-08-30 in src/app/_home-v2/_data/tools.ts lines 746-752). GPT Image 2 handles legible pip patterns on card faces best (the rank letters and suit symbols stay readable at small sizes); Nano Banana Pro carries mood best for the opponent portraits. Cost lands around 8 credits per generation - five generations for felt plus card sheet plus three portraits lands around 40 credits.
• Chip and card SFX - open SFX Gen and describe four short clips: "single wooden card sliding across felt, 250 ms" for each deal, "sharp plastic chip clack, 180 ms" for each chip stack merge, "riffled chip stack shuffle, 400 ms" for a pot award cascade, "quick flick and slap of a folded card being tossed toward the muck, 220 ms" for a fold. SFX Gen bills per second of generated audio via getSeedAudioCreditCost at SEED_AUDIO_CREDITS_PER_SECOND = 1 (verified 2026-08-30 in src/app/sfx-gen/page.tsx lines 23-24), and four short cues total under 5 credits. Cap the chip clack at 180 ms so rapid raises do not blow out the mix - the hand rhythm depends on many small chip clacks per hand, not a single loud stinger.

Load the card sprite sheet as a single 13x4 atlas and draw each card with a single drawImage call at the right (col, row) offset - stamping 52 cards through 52 separate Image loads eats network cost and forces 52 texture uploads on WebGL-backed canvases. Do not chase a "perfect" first pass - a second AI Image Gen retry on the card sheet is cheap, but three retries per sheet is a signal to rewrite the prompt, not to reroll the seed.

Step 4 - playtest the browser poker game like a jam judge

Before you share the build, run a five-minute checklist borrowed from card-game jam judges:

1. The first hand lands inside thirty seconds - the app boots into a lobby or straight to the table, blinds post visibly, cards slide with a satisfying delay (not a dump), and the preflop action opens on the seat left of the big blind.
2. The action bar is legible at a glance - FOLD, CHECK, CALL amount, RAISE with a slider showing min-raise to stack, and ALL-IN across the bottom; illegal actions grey out; the current pot and your remaining stack are always visible.
3. The hand ranker never lies - test a two pair beating a pair, a straight beating a two pair, a flush beating a straight, and a full house beating a flush; the winner banner names the exact hand ("Full House, Aces over Sevens") not just "Winner".
4. The AI opponents feel like different people - Rook folds too much preflop, Vera calls too many turns, Otto bluffs the river once every eight or nine hands; nobody is a pure random button masher and nobody is an unbeatable solver.
5. Chip math conserves - after every hand, the sum of all seat stacks plus the current pot equals the initial 4000 chips exactly; any drift is a bug in the pot award or a raise-cap edge case.

Log issues as WizardGenie follow-ups, not rewrites. "Add a side-pot calculator so an all-in from a short stack builds a main pot and a side pot" is one prompt. "Add a rebuy option when a stack hits zero" is another. The Sorceress tools guide lists every asset tool if you want to swap AI Image Gen portraits for hand-drawn opponent art or add a Speech Gen line for a table-talk taunt from Otto on the river.

What how to make a poker game costs on Sorceress in 2026

An honest budget for the stack above against the 2026 Sorceress rate card (verified 2026-08-30 against local source):

• One AI Image Gen felt backdrop: ~8 credits (0.08 USD)
• One AI Image Gen 52-card face sheet + card back: ~8 credits (0.08 USD)
• Three AI Image Gen opponent portraits: ~24 credits (0.24 USD)
• Four SFX Gen cues (card slide, chip clack, chip cascade, fold flick): ~5 credits (0.05 USD)
• Coding-model API time with planner + budget executor: under 0.30 USD

Total roughly 45 credits or 0.45 USD in generation, plus a small model bill. The free 100-credit signup grant covers this build outright, with headroom for a second card-sheet retry or a tournament-victory fanfare cue. Lifetime Early Access sits at 49 USD (LIFETIME_PRICE in src/app/plans/page.tsx line 51) if you want desktop WizardGenie with auto-update for the next jam. Credits convert at 100 per dollar (CREDITS_PER_DOLLAR in src/lib/models.ts line 69). Adding a tournament mode with a blind schedule, a side-pot calculator, and a fifth AI opponent adds about 10 credits, still well under the one-dollar ceiling this guide targets.

That is the whole path for how to make a poker game as a browser hand loop in 2026: model a fair Fisher-Yates deck and a correct seven-choose-five hand ranker, let WizardGenie scaffold the ante-deal-bet-showdown flow with three AI opponents from one prompt, dress the felt with AI Image Gen and layer chip clacks with SFX Gen, and ship the browser poker experience before the weekend ends. When you are ready for tournament schedules, side pots, and multi-table play, graduate slowly - but finish one honest hand loop first.