ConnectFour

🎯 What is this project?

Connect Four is a two-player strategy game played on a 7-column × 6-row grid. Players take turns dropping colored discs into columns. The first player to line up four discs in a row — horizontally, vertically, or diagonally — wins.

This tutorial walks you through building the entire game using plain HTML, CSS, and JavaScript — no frameworks, no libraries. The main focus is the JavaScript logic. HTML and CSS are kept short and to the point.

↑ Example board — the white-outlined cells show a winning horizontal four.

📄 HTML — The Skeleton

The HTML is minimal. Its job is to provide the containers that JavaScript will fill in. Here are the key parts:

<!-- drop arrows (one per column) -->
<div class="drop-arrows" id="dropArrows">
  <button onclick="drop(0)">▾</button>
  <button onclick="drop(1)">▾</button>
  ...
</div>

<!-- board grid (JS fills this) -->
<section class="playground" id="playground"></section>

🎨 CSS — Just Enough to Know

The CSS uses custom properties (variables) so colors and sizes can be changed in one place. You don't need to memorize this — just know where to look.

:root {
  --ground-color: #062dca;   /* board blue */
  --player-one:   #c0392b;   /* red  */
  --player-two:   #f0c030;   /* yellow */
  --cell-size:    62px;
  --cell-gap:     8px;
}

Three CSS classes control the circles' color:

⚙️ JavaScript — Variables First

Before writing any function, set up these variables at the top of your index.js:

const ROWS = 6;
const COLS = 7;
let grid = [];
let currentPlayer = 1;
let gameOver = false;
let scores = [0, 0];
let round = 1;

🔄 How the Functions Connect

Before diving into each function, here is the big picture. The game has two main entry points — page load and a column click.

On page load

On column click ▾

🧩 Functions — Step by Step

1 · initGrid() — Reset & Initialize

This is the master reset. Call it on page load and whenever a new game starts. It rebuilds the 2D grid array filled with zeros, resets gameOver, then calls the three helper functions to get the UI ready.

• 1
  Create a 2D array (ROWS × COLS) filled with 0.
• 2
  Set gameOver = false.
• 3
  Call renderBoard() to draw empty circles.
• 4
  Call updateStatus() with no argument → shows "Player 1's Turn".
• 5
  Call setArrows(true) to enable the drop buttons.

function initGrid() {
  grid = Array.from({ length: ROWS }, () => Array(COLS).fill(0));
  gameOver = false;
  renderBoard();
  updateStatus();
  setArrows(true);
}

2 · renderBoard() — Draw the Grid

Clears the #playground div and rebuilds every circle from the current grid[][] state. This is called after every move.

• 1
  Select #playground, set its innerHTML = '' to wipe old circles.
• 2
  Loop: outer loop = rows (0 → ROWS), inner = cols (0 → COLS).
• 3
  For each cell, create a <div>, add class cell.
• 4
  If grid[r][c] === 1 → also add class p1 (red).
• 5
  If grid[r][c] === 2 → also add class p2 (yellow).
• 6
  Append the cell to #playground.

function renderBoard() {
  const pg = document.getElementById('playground');
  pg.innerHTML = '';
  for (let r = 0; r < ROWS; r++) {
    for (let c = 0; c < COLS; c++) {
      const cell = document.createElement('div');
      cell.classList.add('cell');
      if (grid[r][c] === 1) cell.classList.add('p1');
      if (grid[r][c] === 2) cell.classList.add('p2');
      pg.appendChild(cell);
    }
  }
}

3 · updateStatus(message) — Turn / Win / Draw Text

Updates the small dot and text line that tells players what is happening. The optional message parameter is only passed when the game ends.

function updateStatus(message) {
  const dot  = document.getElementById('statusDot');
  const text = document.getElementById('statusText');
  dot.className = 'status-dot';            // reset classes
  if (message) {
    dot.classList.add('neutral');
    text.textContent = message;
  } else if (currentPlayer === 2) {
    dot.classList.add('p2');
    text.textContent = "Player 2's Turn";
  } else {
    text.textContent = "Player 1's Turn";
  }
}

4 · setArrows(enabled) — Enable / Disable Drop Buttons

Prevents players from clicking after the game ends. Pass true to enable, false to disable. It simply toggles the .disabled CSS class on the arrows container (CSS handles the fading and blocking of clicks).

function setArrows(enabled) {
  const arrows = document.getElementById('dropArrows');
  if (enabled) {
    arrows.classList.remove('disabled');
  } else {
    arrows.classList.add('disabled');
  }
}

5 · drop(col) — The Main Move Function

Called when a player clicks a ▾ button. col is the column index (0–6). This is the heart of the game.

• 1
  If gameOver is true → return immediately (ignore click).
• 2
  Scan from the bottom row upward to find the lowest empty cell in that column. Store it in row (start at -1).
• 3
  If row is still -1 after the loop → column is full → return.
• 4
  Set grid[row][col] = currentPlayer.
• 5
  Call renderBoard() to show the new disc.
• 6
  Call checkWin(row, col). If it returns a winning sequence → handle win. Otherwise check for draw. Otherwise switch player.

function drop(col) {
  if (gameOver) return;

  let row = -1;
  for (let r = ROWS - 1; r >= 0; r--) {
    if (grid[r][col] === 0) { row = r; break; }
  }
  if (row === -1) return;   // column full

  grid[row][col] = currentPlayer;
  renderBoard();

  const win = checkWin(row, col);
  if (win) {
    highlightWin(win);
    scores[currentPlayer - 1]++;
    document.getElementById(`score${currentPlayer}`).textContent =
      scores[currentPlayer - 1];
    round++;
    document.getElementById('roundNum').textContent = round;
    updateStatus(`Player ${currentPlayer} Wins! 🎉`);
    gameOver = true;
    setArrows(false);
  } else if (grid[0].every(cell => cell !== 0)) {
    updateStatus("It's a Draw!");
    gameOver = true;
    setArrows(false);
  } else {
    currentPlayer = currentPlayer === 1 ? 2 : 1;
    updateStatus();
  }
}

6 · checkWin(row, col) — Detect Four in a Row

Checks whether the disc just placed at (row, col) completes a sequence of four. Returns the winning cells array if yes, or null if no.

It checks four directions. For each direction it looks both ways from the placed cell and counts how many matching discs are in a line.

function checkWin(row, col) {
  const directions = [[0,1],[1,0],[1,1],[1,-1]];
  const p = currentPlayer;
 
  for (const [dr, dc] of directions) {
    let seq = [[row, col]];
 
    // look in positive direction
    for (let d = 1; d < 4; d++) {
      const r = row + dr * d, c = col + dc * d;
      if (r>=0 && r<ROWS && c>=0 && c<COLS && grid[r][c]===p)
        seq.push([r, c]);
      else break;
    }
    // look in negative direction
    for (let d = 1; d < 4; d++) {
      const r = row - dr * d, c = col - dc * d;
      if (r>=0 && r<ROWS && c>=0 && c<COLS && grid[r][c]===p)
        seq.push([r, c]);
      else break;
    }
 
    if (seq.length >= 4) return seq.slice(0, 4);
  }
  return null;
}

7 · highlightWin(cells) — Highlight Winning Cells

Receives the array of 4 winning [row, col] pairs. Finds each cell in the DOM (using the formula r * COLS + c for grid index) and adds the win class, triggering the pulse animation.

function highlightWin(cells) {
  const pg = document.getElementById('playground');
  cells.forEach(([r, c]) => {
    pg.children[r * COLS + c].classList.add('win');
  });
}

8 · resetGame() and resetScores()

These are simple wrappers that use the functions you already built:

function resetGame() {
  currentPlayer = 1;
  initGrid();            // resets grid, re-renders, re-enables arrows
}

function resetScores() {
  scores = [0, 0];
  round = 1;
  document.getElementById('score1').textContent = '0';
  document.getElementById('score2').textContent = '0';
  document.getElementById('roundNum').textContent = '1';
}

9 · Kick Everything Off

At the very bottom of your script — outside all functions — call initGrid() once so the board is ready when the page loads.

// at the bottom of index.js
initGrid();

✅ Putting It All Together

Here is the complete call order summary to keep in mind:

• →
  Page load triggers initGrid() → renderBoard() + updateStatus() + setArrows(true)
• →
  Column click triggers drop(col) → renderBoard() → checkWin()
• →
  Win found → highlightWin() + update scores + setArrows(false)
• →
  No win, grid full → draw message + setArrows(false)
• →
  No win, grid not full → switch player + updateStatus()
• →
  New Game button → resetGame() → initGrid()
• →
  Reset Score button → resetScores()

💡 Quick Tips

• Use your browser's DevTools Console — add console.log(grid) inside drop() to watch the 2D array update in real time.
• The CSS disabled class on .drop-arrows uses pointer-events: none — no extra JS needed to block clicks when the game ends.
• To change board size, just change ROWS and COLS — the grid CSS already uses repeat(7, ...) variables, so update those too.
• The checkWin logic works for any four-in-a-row variant — you can swap it into other grid games.