Checkers Game — Free HTML CSS JS Snippet

Checkers (draughts) is a two-player board game played on the dark squares of an 8x8 grid, where pieces move diagonally, capture by jumping over an opposing piece into an empty square beyond it, and are promoted to kings on reaching the far row. This snippet implements the full rule set — not a simplified mockup — including the rule that captures are mandatory whenever one is available, and that a single turn can chain several jumps together if each landing square opens up another capture.

Board representation and movement

The board is a plain 8x8 array, board[r][c], holding either null or a piece object { color, king }. movesFor(r, c) computes both the simple diagonal moves and the jump captures available to the piece at that square by checking dirsFor(piece) — two forward diagonals for a regular piece (up for red, down for black) or all four diagonals once a piece is king. A capture requires an opposing piece immediately adjacent diagonally with an empty square directly beyond it in the same direction.

Forced captures — the rule most checkers implementations skip

anyCaptureAvailable(color) scans every piece of the moving color before each turn. If any piece on the board has a legal capture, mustCapture is set and clicking a piece without one shows an inline message telling the player a capture is available elsewhere and must be taken instead. This mandatory-capture rule is one of the most commonly-missed parts of checkers in casual implementations, and is central to real strategic play — it is why players can deliberately "sacrifice" a piece to force a worse trade for the opponent.

Multi-jump chains

After a capture lands, performMove() immediately calls movesFor() again from the new square. If further captures are available from that same piece, the turn does not pass — selected stays on the same piece, legalMoves is replaced with only the follow-up captures, and the player must continue jumping with that piece before the turn ends. This correctly implements the standard checkers rule that a capturing move must be completed as far as it will go in one turn.

King promotion

When a regular piece's landing row is the opponent's back row (row 0 for red, row 7 for black), piece.king = true promotes it in place, rendering a star glyph over the piece via the .king::after CSS pseudo-element and unlocking backward diagonal movement through dirsFor().

Win detection

The game ends the moment either color's piece count reaches zero, or the side to move has no legal moves at all (hasAnyMove) — both a real, complete win condition, not just a piece-count check, since checkers can also be won by immobilizing the opponent even with pieces still on the board.

Click-to-select interaction

Like other click-based board games in this library, moves are made by clicking a piece (highlighting its legal destinations, with capture destinations tinted differently from quiet moves) and then clicking a highlighted destination square — fully usable on touch devices without drag-and-drop.