Connect Four vs Computer — Free HTML CSS JS Snippet

Connect Four is a two-player strategy game built on a deceptively simple mechanic: discs fall under gravity into one of seven columns, stacking on top of whatever is already there, and the first player to line up four discs of their own colour horizontally, vertically, or diagonally wins. This snippet implements the full game as a genuine playable board — not a static mockup — complete with real gravity simulation, four-direction win checking, and a heuristic computer opponent that plays a credible game rather than moving randomly.

The gravity model: a 2D array, not pixel maths

The board is represented as a 7-column array of 6-row arrays, board[col][row], where row 0 is the bottom of the column. Instead of placing a disc exactly where the user clicked, lowestEmptyRow(col) scans the column from the bottom upward and returns the first null slot — that index is where the disc actually lands. This is the real mechanic behind Connect Four's gravity: clicking anywhere in a column always drops into the lowest available cell, and the CSS reinforces it visually by laying each column out with flex-direction: column-reverse so cell index 0 renders at the bottom. The falling animation itself is pure CSS — a .c4-disc starts at transform: scale(0) translateY(-140%) and animates to scale(1) translateY(0) with a bouncy cubic-bezier(0.34, 1.56, 0.64, 1) easing curve that gives the drop a satisfying overshoot.

Four-direction win detection

After every move, checkWin(col, row, player) walks outward from the just-placed disc along four axis pairs: horizontal [1, 0], vertical [0, 1], and both diagonals [1, 1] and [1, -1]. For each direction it counts matching discs going forward and then counts again going backward along the same axis, because a winning line can extend on either side of the disc that completed it. If the combined run reaches four or more, the coordinates of that line are returned and each winning cell gets a .win-cell class that adds a glowing green ring and a slow pulsing brightness animation, making the winning line immediately obvious.

The heuristic AI: three priorities, no brute force

The computer opponent does not use minimax or a deep search tree — it applies three ordered heuristics that are exactly how a competent human casual player thinks about the game. First, wouldWin(col, COMPUTER) temporarily drops a yellow disc into every legal column and re-runs checkWin to see whether that move produces an immediate four-in-a-row; if any column does, the computer takes it and wins on the spot. Second, if no winning move exists, the same check runs with HUMAN as the hypothetical player — if the human could win next turn by dropping into some column, the computer occupies that column itself to block it. Third, if neither an immediate win nor a necessary block exists, the computer falls back to positional strategy: it prefers columns in centerOrder = [3, 2, 4, 1, 5, 0, 6], trying the centre column first and working outward. This reflects real Connect Four theory — the centre column participates in more possible four-in-a-row lines (horizontal, vertical, and both diagonals) than any edge column, so occupying it early creates more future winning threats.

Session scoring and disc rendering

A running tally of wins, losses, and draws persists across rounds in a scores object and renders in three coloured score pills above the board. Each disc is a separate absolutely-positioned <div> layered on top of an empty circular cell rather than a background-colour change, which is what makes the drop-in scale animation possible — the disc element itself animates in, rather than a colour simply appearing.