Connect Four: A Simple Game for Smarter Blogs

6 May

Written By JC Pass

Connect Four

Theme: Play vs Computer

<div id="connect-four" style="font-family:sans-serif; max-width:600px; margin:2em auto; position:relative;">
  <h2 style="text-align:center;">Connect Four</h2>
  <div style="text-align:center; margin-bottom:1em;">
    <label>Theme:
      <select id="cf-theme">
        <option value="red-yellow">Red / Yellow</option>
        <option value="blue-orange">Blue / Orange</option>
        <option value="green-purple">Green / Purple</option>
      </select>
    </label>
    <label style="margin-left:1em;">
      <input type="checkbox" id="cf-ai-toggle" checked> Play vs Computer
    </label>
  </div>
  <div id="cf-board" style="display:grid; grid-template-columns:repeat(7,1fr); gap:5px; background:#ddd; padding:5px; border-radius:10px; position:relative;"></div>
  <p id="cf-status" style="text-align:center; margin:1em 0;"></p>
  <div style="text-align:center;">
    <button onclick="cfInit()" style="margin:0.5em;">Restart</button>
    <button onclick="cfResetScore()" style="margin:0.5em;">Reset Score</button>
  </div>
  <p style="text-align:center;" id="cf-score"></p>
</div>

let cfState = {};
function cfInit() {
  const board = document.getElementById("cf-board");
  const theme = document.getElementById("cf-theme").value;
  cfSetTheme(theme);

cfState = {
    cols: 7, rows: 6,
    board: Array(6).fill().map(() => Array(7).fill('')),
    turn: 'P1', gameOver: false,
    theme, ai: document.getElementById("cf-ai-toggle").checked,
    score: JSON.parse(localStorage.getItem("cf-score") || '{"P1":0,"P2":0}')
  };

board.innerHTML = '';
  for (let r = 0; r < 6; r++) {
    for (let c = 0; c < 7; c++) {
      const div = document.createElement("div");
      div.className = "cf-cell";
      div.dataset.row = r;
      div.dataset.col = c;
      div.onclick = () => cfDrop(c);
      board.appendChild(div);
    }
  }
  document.getElementById("cf-status").textContent = "Player 1’s turn";
  cfUpdateScore();
}
function cfSetTheme(theme) {
  const { p1, p2 } = themeColors[theme];
  document.documentElement.style.setProperty('--p1', p1);
  document.documentElement.style.setProperty('--p2', p2);
}
function cfUpdateScore() {
  const s = cfState.score;
  document.getElementById("cf-score").textContent = `Score — P1: ${s.P1} | P2: ${s.P2}`;
  localStorage.setItem("cf-score", JSON.stringify(s));
}
function cfResetScore() {
  localStorage.removeItem("cf-score");
  cfInit();
}
function cfDrop(col) {
  if (cfState.gameOver) return;
  const b = cfState.board;
  let row = -1;
  for (let r = 5; r >= 0; r--) {
    if (!b[r][col]) {
      row = r;
      break;
    }
  }
  if (row === -1) return;

if (cfState.board.flat().every(cell => cell)) {
    document.getElementById("cf-status").textContent = "Draw!";
    return;
  }

cfState.turn = cfState.turn === "P1" ? "P2" : "P1";
  document.getElementById("cf-status").textContent = `${cfState.turn === "P1" ? "Player 1" : "Player 2"}’s turn`;

if (cfState.ai && cfState.turn === "P2") {
    setTimeout(() => cfAIMiniMax(), 300);
  }
}
function cfCheckWin(r, c) {
  const b = cfState.board, T = cfState.turn;
  const lines = [[[0,-1],[0,1]], [[-1,0],[1,0]], [[-1,-1],[1,1]], [[-1,1],[1,-1]]];
  for (let dir of lines) {
    let line = [[r, c]];
    dir.forEach(([dr,dc]) => {
      for (let i=1;i<4;i++) {
        let nr=r+dr*i, nc=c+dc*i;
        if (b[nr] && b[nr][nc] === T) line.push([nr,nc]); else break;
      }
    });
    if (line.length >= 4) return line;
  }
  return null;
}
function cfAIMiniMax() {
  const [score, col] = cfMiniMax(cfState.board, 4, -Infinity, Infinity, true);
  if (col !== null) cfDrop(col);
}
function cfMiniMax(board, depth, alpha, beta, isMax) {
  const winner = cfEvaluateBoard(board);
  if (Math.abs(winner) === 100 || depth === 0 || cfIsFull(board)) return [winner, null];

const moves = cfValidMoves(board);
  let bestScore = isMax ? -Infinity : Infinity;
  let bestCol = null;

for (let col of moves) {
    const temp = cfSimulateMove(board, col, isMax ? "P2" : "P1");
    const [score] = cfMiniMax(temp, depth - 1, alpha, beta, !isMax);
    if (isMax && score > bestScore) {
      bestScore = score;
      bestCol = col;
      alpha = Math.max(alpha, score);
    } else if (!isMax && score < bestScore) {
      bestScore = score;
      bestCol = col;
      beta = Math.min(beta, score);
    }
    if (beta <= alpha) break;
  }
  return [bestScore, bestCol];
}
function cfEvaluateBoard(board) {
  const lines = [[[0,1],[0,-1]], [[1,0],[-1,0]], [[1,1],[-1,-1]], [[1,-1],[-1,1]]];
  let score = 0;
  for (let r = 0; r < 6; r++) {
    for (let c = 0; c < 7; c++) {
      const val = board[r][c];
      if (!val) continue;
      for (let line of lines) {
        let count = 1;
        for (let [dr, dc] of line) {
          for (let i = 1; i < 4; i++) {
            let nr = r + dr * i, nc = c + dc * i;
            if (nr < 0 || nr >= 6 || nc < 0 || nc >= 7) break;
            if (board[nr][nc] === val) count++;
            else break;
          }
        }
        if (count >= 4) return val === "P2" ? 100 : -100;
      }
    }
  }
  return 0;
}
function cfValidMoves(board) {
  const moves = [];
  for (let c = 0; c < 7; c++) {
    if (!board[0][c]) moves.push(c);
  }
  return moves;
}
function cfIsFull(board) {
  return board[0].every(cell => cell);
}
function cfSimulateMove(board, col, player) {
  const copy = board.map(row => [...row]);
  for (let r = 5; r >= 0; r--) {
    if (!copy[r][col]) {
      copy[r][col] = player;
      break;
    }
  }
  return copy;
}
document.getElementById("cf-theme").addEventListener("change", () => {
  cfSetTheme(document.getElementById("cf-theme").value);
});
cfInit();
</script>

Not every visitor is here to scroll endlessly. Sometimes, they need a moment to pause, play, and reset.

This free Connect Four embed is a lightweight, Squarespace-compatible game you can add directly to your site. It's fully client-side — no logins, no data tracking, no backend. Just two players (or you vs. a smart AI) dropping discs and battling it out with a classic twist.

It’s not just fun — it’s strategic:

🧠 MiniMax-based AI that thinks ahead
🎨 Custom themes to match your site
📊 Score tracking (via local storage)
⚡ Animated disc drop with visual win highlights

Best of all, it helps increase dwell time and engagement — a playful way to keep visitors around longer.

Add it to a blog, sidebar, or even a portfolio. It's built with Squarespace quirks in mind, tested in real-world blog layouts, and free for personal use.

Simply click the copy button and paste into a Squarespace code block

Is This Free to Use?

Personal use is free forever.
If you’re using this tool/game on your own blog, portfolio, or personal Squarespace site, you don’t need to pay — enjoy it freely.

Commercial use requires a one-time license.
If you’re a developer, agency, or using this on a client project or monetized site, please purchase a commercial license. It helps support ongoing development and gives you peace of mind.

One-time cost: £49.99 (normally £79.99)
Covers unlimited client sites, all current tools, and future updates.

👉 Learn more or buy a lic ense here

Disclaimer

This script is provided as-is with no guarantees. While it's designed to be safe for most Squarespace sites, always test changes before going live — especially if you’ve installed third-party plugins, custom fonts, or heavy integrations. By using this code, you accept that we are not liable for any unexpected behavior or performance changes.

JC Pass

JC Pass is a specialist in social and political psychology who merges academic insight with cultural critique. With an MSc in Applied Social and Political Psychology and a BSc in Psychology, JC explores how power, identity, and influence shape everything from global politics to gaming culture. Their work spans political commentary, video game psychology, LGBTQIA+ allyship, and media analysis, all with a focus on how narratives, systems, and social forces affect real lives.

JC’s writing moves fluidly between the academic and the accessible, offering sharp, psychologically grounded takes on world leaders, fictional characters, player behaviour, and the mechanics of resilience in turbulent times. They also create resources for psychology students, making complex theory feel usable, relevant, and real.

https://SimplyPutPsych.co.uk/

Connect Four: A Simple Game for Smarter Blogs

Connect Four

Not every visitor is here to scroll endlessly. Sometimes, they need a moment to pause, play, and reset.

Is This Free to Use?

Disclaimer

Universal Copy Button Generator

Why Games Like Tic Tac Toe Belong on Blogs