Blackjack vs Dealer — Free HTML CSS JS Snippet

Blackjack is deceptively simple to describe but genuinely tricky to implement correctly, because a single rule — how an Ace is scored — has to be recalculated dynamically every time a card is drawn, not decided once. This snippet builds a complete, playable single-player Blackjack round against an automatic dealer, using nothing but vanilla JavaScript for the rules engine and CSS for card rendering, with every core rule implemented rather than approximated.

Soft and hard hand scoring

The trickiest part of Blackjack logic is that an Ace is worth 11 by default but must demote to 1 whenever counting it as 11 would bust the hand — and this has to be re-evaluated every time a new card is drawn, since a hand that was "hard" (no usable Ace) can become "soft" again as cards are added, or vice versa. The handValue() function handles this cleanly: it first sums every card assuming every Ace is worth 11 while counting how many Aces are present, then runs a loop that subtracts 10 (demoting one Ace from 11 to 1) for as long as the total exceeds 21 and at least one Ace is still counted as 11. This produces the correct best-possible total in every situation — a hand of Ace-6 correctly reads as a soft 17, and if a third card like a 10 is drawn, the same function correctly re-evaluates it as a hard 17 without any special-case branching.

The dealer's fixed, rule-bound AI

Once the player stands, the dealer's hole card (drawn face-down at deal time and rendered with a diagonal-stripe pattern) is flipped face-up, and dealerPlay() runs an automatic loop: the dealer draws another card any time its total is below 17, and stops the instant its total reaches 17 or higher — this is the standard, unmodifiable house rule used at real casino tables, sometimes called "dealer stands on all 17s." Each dealer draw is spaced out with a short setTimeout so the player can actually watch the hand build up rather than seeing it resolve instantly.

Deck management and shuffling

A fresh 52-card deck is built and shuffled with the Fisher-Yates algorithm — the standard unbiased in-place shuffle, iterating from the last card to the first and swapping each with a randomly chosen earlier-or-equal-index card — at the start of every round, which is simpler and just as fair as tracking a persistent shoe across rounds for a casual single-player demo. drawCard() pops from the end of the shuffled array and silently rebuilds and reshuffles a new deck if it is ever exhausted, so the game can never run out of cards mid-round.

Round resolution and the session tally

Busting (exceeding 21) ends the round immediately as a loss without waiting for the dealer to play, matching real Blackjack rules where a bust is an instant loss regardless of what the dealer holds. A two-card total of exactly 21 on the deal is recognised as a natural Blackjack and resolves the round immediately. Standing triggers the dealer's automatic play, and finishRound() compares final totals: a dealer bust is an automatic win, a strictly higher dealer total wins for the dealer, a strictly higher player total wins for the player, and equal totals resolve as a push (tie), crediting a running win/loss/push tally that persists for the whole session across a "New Round" button.