Strategy / HTML5 + JAVASCRIPT

Four in a Row

Drop discs into seven columns. Connect four before your opponent does, on the same device.

About this template

Four in a Row is an original, self-contained browser starter. It focuses on gravity-based placement, alternating turns, and directional win scans. The interface and game logic live in one HTML file, so you can open the source and trace the interaction from input to screen without setting up a toolchain.

How to play

Two players share one device. Select a column button to drop a disc. Connect four horizontally, vertically, or diagonally. Use the Start button to begin and Restart to try again. The game does not connect to a server or store a public score.

What is in the download?

The ZIP includes index.html, a quick-start README, and the MIT license. There are no external scripts, fonts, image assets, or package dependencies. Open index.html in a current browser to play; open it in a text editor to make changes.

Make your first change

Read the four direction pairs in hasFour. Add a winning-line highlight while preserving the gravity rule and rejecting full columns.

  1. Save a copy of the original before editing.
  2. Change one value or rule, reload, and play a full round.
  3. Try both winning and losing paths. Then check the controls on a smaller screen.

Ideas for your own version

Start with the visual theme: adjust the background, accent color, and title. Next, add a rule that changes a decision the player makes. Prefer one well-tested mechanic over several unfinished systems. Keep a short note beside each new setting so the next person can understand why it exists.

Build a threat from the bottom

Discs fall into the lowest free position in a column. You cannot place a disc in midair. The center column participates in more potential lines, but a playable three-disc threat needs immediate attention wherever it appears.

Two people, one board

Coral moves first and Teal follows. The status names the next player, and the discs also use A and B marks so color is not the only cue. A full column rejects another drop. A full board with no line of four is a draw. This version uses local turns and has no computer or online opponent.

Before you publish

This is a learning starter, not a full game engine. It has no network multiplayer, cloud saving, or commercial art pack. Add your own polish, test your target browsers, and follow the publishing checklist. The included code can be adapted for personal or commercial projects under the MIT license.