Connect Four

Two-player browser game implementing gravity-based token placement and multi-direction win detection in vanilla JavaScript.

HTML · CSS · JavaScript · Firebase Hosting

Connect Four desktop game showing Tom and Tina, seven column controls, and four red and yellow tokens placed near the bottom of the blue board. — An in-progress two-player match with player identity, turn status, and column controls visible.

Responsive Connect Four mobile game showing Tom and Tina, the complete seven-column board, and an in-progress red-and-yellow match. — The complete game interface adapted to a narrow mobile viewport.

Load interactive demo

What this demonstrates

Vanilla JavaScript, a 6×7 board-state model, gravity-based placement, alternating turns, directional win detection, draw handling, full-column protection, and a complete replay lifecycle.

Why it matters

A focused demonstration of state management, reusable game logic, DOM rendering, responsive interaction, and accessible status feedback without a framework.

What it does

A local two-player Connect Four game where players alternate dropping tokens into seven columns until one connects four horizontally, vertically, or diagonally.

JavaScript mechanics

The game uses a 6×7 board array, gravity-based placement, alternating turn state, directional win detection, draw handling, full-column protection, and a game-over lock with Play Again support.

Interaction and accessibility

Seven keyboard-operable column controls share the same move logic as pointer input. Live status messages announce turns and outcomes, player identity is not color-only, and the board scales responsively for desktop and mobile play.

Technology

HTML, CSS, vanilla JavaScript, and Firebase Hosting.

View live app