Connect Four
Two players drop discs into a 7×6 grid; the first to line up four wins. The board renders in the starter — make it a game. Available as a React template and an HTML/CSS/JS one.
Requirements
- Clicking any cell in a column drops the current player's disc into the lowest empty cell of that column; a full column does nothing.
- Players alternate (red, then yellow); the status line shows whose turn it is.
- Detect a win — horizontal, vertical, or either diagonal — and announce it; no more moves after a win.
- Detect a draw when the board fills.
- Reset starts a new game.
- Update the board immutably (React state must be replaced, not mutated).
Hints
Hint 1
Model the board as a 6×7 array of null | 'red' | 'yellow'. dropPiece scans the column from the bottom row up for the first null and returns a copied board plus the row it landed in — or null when the column is full.
Hint 2
Don't scan the whole board for a win — only the four lines through the last move, counting outward in both directions along each of the 4 direction vectors; a count ≥ 4 is a win.
Hint 3
Store a move counter for the draw check (moves === ROWS * COLS with no winner); disable every cell in a full column so the UI matches the rule. In vanilla, one delegated click on the board reads data-col.