Checkers Game vs Computer with 12 Levels – HTML, CSS & JS

Checkers (draughts) is a game of forced captures, and that rule is what makes it a good programming exercise. This version is a full game: you play red against a computer with twelve difficulty levels, or play a friend on the same screen. It enforces the real rules (forced jumps, multi-jumps that must be completed, kings, a draw rule), animates every move, gives hints, and has stars, a daily match and saved progress. It is plain HTML, CSS and JavaScript with no libraries, images or audio files.

The board as 64 numbers

The position is a flat array of 64 numbers: 0 for empty, 1 and 2 for a red man and king, and -1 and -2 for black. genMoves() returns every legal move as a complete sequence, such as { path: [41, 32, 23], caps: [36, 27] }. Because a whole multi-jump is one move, the interface, the AI and the move log all use the same objects. If any jump exists, only jumps are returned, which is the forced-capture rule. While generating a chain, a jumped piece is marked as a ghost so it cannot be jumped twice, and a man that reaches the far row becomes a king and its move ends there.

Multi-jumps that cannot be abandoned

Many simple checkers programs let you switch pieces halfway through a multi-jump. Here, nextSquares() looks at the squares chosen so far and shows only the squares that continue a legal sequence. Once you have started a chain, clicking another piece is refused with a message, and the move is applied only when a complete sequence has been chosen. Each jump is drawn as soon as you click it, and the captured piece shrinks away.

A minimax opponent with a dial for strength

The computer uses iterative deepening negamax with alpha-beta pruning. evaluate() scores material (a king is worth 1.7 men), how far each man has advanced, a guarded home row and control of the centre. At the edge of the search it keeps going while captures are pending, so it never stops in the middle of an exchange. Each level in the LEVELS array sets the search depth (1 to 9 moves), a time limit and a noise value. Noise adds a random amount to each candidate move's score, which makes the lower levels play like a distracted human instead of a perfect player with a shallow horizon. Level 12 searches nine plies, within a time cap that keeps the page responsive.

Hints, undo, stars and the daily match

The Hint button runs the same search for you at depth 6 and highlights the start and end squares. Undo takes back your last move together with the computer's reply. Winning gives one star, a second star if you used no hints or undos, and a third if you lost no more than the level's par number of pieces. A win unlocks the next level. The Daily Match plays four seeded random moves from the start position, so everyone faces the same opening each day, and winning on consecutive days builds a streak. There is also a pass-and-play mode.

Draws, feel and saving

A game with 40 moves each without a capture or a man move is a draw, which stops endless king shuffling. Moves slide across the board, captured pieces shrink away, kinging crowns a piece with a glow, and a short wooden click and chimes come from a Web Audio synth. Your last move is highlighted, pieces that must jump pulse, and a move list shows the game in notation such as d6xb4. Stars, your record and the streak are saved to localStorage inside try/catch, and the whole game scales to short preview areas.