Blackjack vs Dealer with Chips and Hints — Free HTML CSS JS

Blackjack looks simple but rewards getting the details right: an Ace that changes value, a dealer who follows a fixed rule, a blackjack that pays more than an ordinary win, and a tie that returns your bet. This snippet is a complete single-player table in plain JavaScript and CSS, with every one of those rules implemented, real playing-card faces drawn without any images, chips and a bankroll, and the extras that make it feel like a game rather than a demo: a card that flies from the shoe, a hole card that flips in 3D, and a hint button that explains what basic strategy would do.

Soft and hard totals

score(hand) adds every card with each Ace counted as 11, remembers how many Aces there are, and then demotes them to 1 one at a time while the total is over 21. It returns both the best total and whether the hand is "soft" (an Ace is still counting as 11). A hand of Ace and 6 reads as a soft 17, and drawing a 10 turns it into a hard 17 without any special-case code, because the total is recalculated from scratch on every card.

A fixed dealer, and the real rules of the table

After you stand, the dealer's hole card flips and dealerTurn() draws until the total reaches 17, then stops, whether the 17 is hard or soft ("dealer stands on all 17s", printed on the felt). A natural is checked the way a casino checks it: when the dealer shows an Ace or a ten-value card, the hole card is peeked at straight away. Player blackjack against a dealer without one pays 3 to 2; both having blackjack is a push, which the earlier version of this snippet scored as a win; a bust ends the round at once as a loss.

Chips, payouts and double down

Bets are built from chips of 10, 50, 100 and 500, and the bet is shown as a stack drawn greedily from the highest chip down. finish() is the one place money moves: a win returns the bet twice, a blackjack returns it 2.5 times, a push returns it once and a loss returns nothing, so the ledger always balances. Double down is allowed on the first two cards when you can afford it: the bet doubles, you get exactly one more card, and the dealer then plays. Chips and the win, loss and push record are saved to localStorage in a try/catch, and a two-press reset button starts over.

A six-deck shoe

The shoe holds six shuffled decks (312 cards), built with the Fisher-Yates shuffle, which is the standard unbiased in-place shuffle. draw() pops from the end, a new shoe is shuffled when fewer than 78 cards remain, and the shoe counter beside the stack shows how deep you are.

Cards drawn with CSS

Each card is built from elements: a corner index at the top left and, rotated 180 degrees, at the bottom right; pips for the numbers 2 to 10 placed from a table of column and row positions (the lower half drawn upside down like a real card); a large suit for the Ace; and a framed letter for the court cards. The back is a repeating-gradient pattern. The dealer's hole card has a front and a back with backface-visibility: hidden, and removing the down class rotates it 180 degrees on the Y axis.

Animating the deal with FLIP

When a card is dealt, addCard() measures the cards already in the hand, adds the new one (which makes the hand re-centre), and animates each old card from its previous position back to the new one with the Web Animations API. The new card flies in from the shoe's position the same way. Only transforms are animated, so the motion stays smooth, and visitors who prefer reduced motion get an instant deal.

A hint that explains itself

The Hint button runs advice(), a compact basic-strategy table for six decks with a dealer who stands on 17. It looks at your total, whether it is soft, the dealer's up card and whether doubling is still possible, then names the move and gives a one-sentence reason. The recommended button pulses gold. It never plays for you.

Keyboard and accessibility

H hits, S stands, D doubles (or deals when betting), and ? shows the hint. The message line is a live region, every card has an aria-label such as "Queen of hearts" (the hole card says "Face-down card" until it is revealed), and the hands announce their cards and total.