How to Build a Tic-Tac-Toe Game in an Interview

How to Build a Tic-Tac-Toe Game in an Interview

Tic-tac-toe tests game logic and state management. Here is how to build it.

Requirements

• 3x3 grid.
• Two players (X and O), alternating turns.
• Win detection (3 in a row, column, or diagonal).
• Draw detection.
• Reset button.
• Score tracking.

Plan (5 minutes)

1. HTML: 3x3 grid of buttons.
2. State: board array (9 elements), current player, scores.
3. Events: click a cell to place.
4. Logic: check win after each move.

Build Core (40 minutes)

HTML

<div class="board" id="board"></div>
<p id="status">Player X's turn</p>
<button onclick="reset()">Reset</button>
<p>X: <span id="scoreX">0</span> | O: <span id="scoreO">0</span> | Draws: <span id="scoreDraw">0</span></p>

JavaScript

let board = Array(9).fill(null);
let currentPlayer = "X";
let gameOver = false;

const winPatterns = [
  [0,1,2], [3,4,5], [6,7,8], // rows
  [0,3,6], [1,4,7], [2,5,8], // columns
  [0,4,8], [2,4,6],          // diagonals
];

function checkWin() {
  for (const [a, b, c] of winPatterns) {
    if (board[a] && board[a] === board[b] && board[a] === board[c]) {
      return board[a];
    }
  }
  if (board.every((cell) => cell)) return "draw";
  return null;
}

function handleClick(index) {
  if (board[index] || gameOver) return;
  board[index] = currentPlayer;
  render();
  const result = checkWin();
  if (result === "draw") { gameOver = true; updateScore("draw"); }
  else if (result) { gameOver = true; updateScore(result); }
  else { currentPlayer = currentPlayer === "X" ? "O" : "X"; }
  updateStatus(result);
}

CSS

.board { display: grid; grid-template-columns: repeat(3, 80px); gap: 4px; }
.cell { width: 80px; height: 80px; font-size: 32px; border: 1px solid #ccc; cursor: pointer; }
.cell:disabled { cursor: default; }

Edge Cases (20 minutes)

• Clicking an already-filled cell (ignore).
• Clicking after game over (ignore).
• Highlight winning cells.
• Score tracking.
• Undo last move (optional).

The Takeaway

Build tic-tac-toe: HTML (3x3 grid), JavaScript (board array, alternating players, win patterns, check win/draw), CSS (grid layout). Handle edge cases (filled cells, game over, winning highlight). This tests game logic and state management.