Tic-Tac-Toe vs Minimax

// Tic-tac-toe vs a perfect minimax bot. You are X (human), bot is O.
// Board cells: 0 = empty, 1 = X (you), 2 = O (bot).
// Win lines indexed in WINS. Click empty square to play; click after
// game-over to reset.

let board, turn, gameOver, winner, winLine, msg, anim, hoverIdx;
let W = 0, H = 0;
// Autoplay: until the user clicks, the bot plays BOTH sides so the feed
// shows motion instead of a silent grid. First click flips userInteracted
// and switches to normal human-vs-bot.
let userInteracted = false;
let autoTimer = 0;        // seconds since last auto-move
let autoInterval = 0.8;   // re-rolled each move in [0.7, 0.9]
let autoResetDelay = 1.4; // pause on the finished board before resetting

const WINS = [
  [0, 1, 2], [3, 4, 5], [6, 7, 8],     // rows
  [0, 3, 6], [1, 4, 7], [2, 5, 8],     // cols
  [0, 4, 8], [2, 4, 6],                 // diags
];

function checkWinner(b) {
  for (let i = 0; i < WINS.length; i++) {
    const [a, c, d] = WINS[i];
    if (b[a] && b[a] === b[c] && b[a] === b[d]) return { player: b[a], line: i };
  }
  for (let i = 0; i < 9; i++) if (!b[i]) return null;
  return { player: 0, line: -1 }; // draw
}

// Minimax. Returns score from O's perspective: +10 - depth for O win,
// depth - 10 for X win, 0 for draw. O maximizes, X minimizes.
function minimax(b, player, depth) {
  const r = checkWinner(b);
  if (r) {
    if (r.player === 2) return 10 - depth;
    if (r.player === 1) return depth - 10;
    return 0;
  }
  if (player === 2) {
    let best = -Infinity;
    for (let i = 0; i < 9; i++) {
      if (!b[i]) {
        b[i] = 2;
        const s = minimax(b, 1, depth + 1);
        b[i] = 0;
        if (s > best) best = s;
      }
    }
    return best;
  } else {
    let best = Infinity;
    for (let i = 0; i < 9; i++) {
      if (!b[i]) {
        b[i] = 1;
        const s = minimax(b, 2, depth + 1);
        b[i] = 0;
        if (s < best) best = s;
      }
    }
    return best;
  }
}

function botMove() {
  let bestScore = -Infinity;
  let bestMoves = [];
  for (let i = 0; i < 9; i++) {
    if (!board[i]) {
      board[i] = 2;
      const s = minimax(board, 1, 0);
      board[i] = 0;
      if (s > bestScore) { bestScore = s; bestMoves = [i]; }
      else if (s === bestScore) bestMoves.push(i);
    }
  }
  // Tie-break randomly among optimal moves for variety.
  const pick = bestMoves[(Math.random() * bestMoves.length) | 0];
  board[pick] = 2;
}

// Pick the optimal move for `player` (1=X minimizer, 2=O maximizer) using
// the same minimax scoring. Used during pre-interaction autoplay so X also
// plays perfectly.
function autoMoveFor(player) {
  let bestMoves = [];
  if (player === 2) {
    let bestScore = -Infinity;
    for (let i = 0; i < 9; i++) {
      if (!board[i]) {
        board[i] = 2;
        const s = minimax(board, 1, 0);
        board[i] = 0;
        if (s > bestScore) { bestScore = s; bestMoves = [i]; }
        else if (s === bestScore) bestMoves.push(i);
      }
    }
  } else {
    let bestScore = Infinity;
    for (let i = 0; i < 9; i++) {
      if (!board[i]) {
        board[i] = 1;
        const s = minimax(board, 2, 0);
        board[i] = 0;
        if (s < bestScore) { bestScore = s; bestMoves = [i]; }
        else if (s === bestScore) bestMoves.push(i);
      }
    }
  }
  if (!bestMoves.length) return;
  const pick = bestMoves[(Math.random() * bestMoves.length) | 0];
  board[pick] = player;
}

function resolve() {
  const r = checkWinner(board);
  if (!r) return;
  gameOver = true;
  winner = r.player;
  winLine = r.line;
  if (r.player === 1) msg = "You win";
  else if (r.player === 2) msg = "You lose";
  else msg = "Draw";
}

function reset() {
  board = new Uint8Array(9);
  turn = 1; // X always first
  gameOver = false;
  winner = 0;
  winLine = -1;
  msg = "";
  anim = 0;
  hoverIdx = -1;
  autoTimer = 0;
  autoInterval = 0.7 + Math.random() * 0.2;
}

function init({ width, height }) {
  W = width; H = height;
  reset();
}

function geometry() {
  const size = Math.min(W, H) - 60;
  const ox = (W - size) / 2;
  const oy = (H - size) / 2 + 8;
  const cell = size / 3;
  return { size, ox, oy, cell };
}

function cellAt(x, y) {
  const { size, ox, oy, cell } = geometry();
  if (x < ox || x >= ox + size || y < oy || y >= oy + size) return -1;
  const cx = ((x - ox) / cell) | 0;
  const cy = ((y - oy) / cell) | 0;
  return cy * 3 + cx;
}

function handleClicks(input) {
  const clicks = input.consumeClicks();
  if (!clicks || !clicks.length) return;
  const c = clicks[clicks.length - 1];
  // First user click ever: stop autoplay, reset to a fresh board so the
  // user starts the game cleanly. Fall through to handle this click as a
  // normal move on the now-empty board.
  if (!userInteracted) {
    userInteracted = true;
    reset();
  }
  if (gameOver) { reset(); return; }
  if (turn !== 1) return;
  const idx = cellAt(c.x, c.y);
  if (idx < 0 || idx > 8) return;
  if (board[idx]) return;
  board[idx] = 1;
  resolve();
  if (!gameOver) {
    turn = 2;
    botMove();
    resolve();
    turn = 1;
  }
}

function drawX(ctx, cx, cy, r, alpha) {
  ctx.strokeStyle = `rgba(96,165,250,${alpha})`;
  ctx.lineWidth = 6;
  ctx.lineCap = "round";
  ctx.beginPath();
  ctx.moveTo(cx - r, cy - r); ctx.lineTo(cx + r, cy + r);
  ctx.moveTo(cx + r, cy - r); ctx.lineTo(cx - r, cy + r);
  ctx.stroke();
}

function drawO(ctx, cx, cy, r, alpha) {
  ctx.strokeStyle = `rgba(248,113,113,${alpha})`;
  ctx.lineWidth = 6;
  ctx.beginPath();
  ctx.arc(cx, cy, r, 0, Math.PI * 2);
  ctx.stroke();
}

function updateAutoplay(dt) {
  if (userInteracted) return;
  autoTimer += dt;
  if (gameOver) {
    if (autoTimer >= autoResetDelay) {
      reset(); // also reschedules autoInterval
    }
    return;
  }
  if (autoTimer < autoInterval) return;
  autoTimer = 0;
  autoInterval = 0.7 + Math.random() * 0.2;
  autoMoveFor(turn);
  resolve();
  if (!gameOver) turn = turn === 1 ? 2 : 1;
}

function tick({ dt, ctx, width, height, input }) {
  W = width; H = height;
  handleClicks(input);
  updateAutoplay(dt);
  anim += dt;

  // background
  ctx.fillStyle = "#0a0e14";
  ctx.fillRect(0, 0, W, H);

  const { size, ox, oy, cell } = geometry();

  // hover highlight (only when it's actually the user's turn)
  hoverIdx = !gameOver && turn === 1 && userInteracted
    ? cellAt(input.mouseX, input.mouseY)
    : -1;
  if (hoverIdx >= 0 && !board[hoverIdx]) {
    const hx = ox + (hoverIdx % 3) * cell;
    const hy = oy + ((hoverIdx / 3) | 0) * cell;
    ctx.fillStyle = "rgba(96,165,250,0.06)";
    ctx.fillRect(hx, hy, cell, cell);
  }

  // grid lines
  ctx.strokeStyle = "rgba(230,237,243,0.35)";
  ctx.lineWidth = 3;
  ctx.lineCap = "round";
  for (let i = 1; i < 3; i++) {
    ctx.beginPath();
    ctx.moveTo(ox + i * cell, oy + 8);
    ctx.lineTo(ox + i * cell, oy + size - 8);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(ox + 8, oy + i * cell);
    ctx.lineTo(ox + size - 8, oy + i * cell);
    ctx.stroke();
  }

  // marks
  const r = cell * 0.28;
  for (let i = 0; i < 9; i++) {
    if (!board[i]) continue;
    const cx = ox + (i % 3) * cell + cell / 2;
    const cy = oy + ((i / 3) | 0) * cell + cell / 2;
    if (board[i] === 1) drawX(ctx, cx, cy, r, 1);
    else drawO(ctx, cx, cy, r, 1);
  }

  // winning line
  if (gameOver && winLine >= 0) {
    const [a, , c2] = WINS[winLine];
    const ax = ox + (a % 3) * cell + cell / 2;
    const ay = oy + ((a / 3) | 0) * cell + cell / 2;
    const bx = ox + (c2 % 3) * cell + cell / 2;
    const by = oy + ((c2 / 3) | 0) * cell + cell / 2;
    const pulse = 0.6 + 0.4 * Math.sin(anim * 6);
    ctx.strokeStyle = winner === 1
      ? `rgba(96,165,250,${pulse})`
      : `rgba(248,113,113,${pulse})`;
    ctx.lineWidth = 8;
    ctx.lineCap = "round";
    ctx.beginPath();
    ctx.moveTo(ax, ay);
    ctx.lineTo(bx, by);
    ctx.stroke();
  }

  // HUD title
  ctx.fillStyle = "#e6edf3";
  ctx.textBaseline = "top";
  ctx.textAlign = "center";
  ctx.font = "bold 16px sans-serif";
  ctx.fillText("Tic-Tac-Toe — you (X) vs perfect bot (O)", W / 2, 8);

  // status message
  if (gameOver) {
    ctx.fillStyle = "rgba(10,14,20,0.7)";
    ctx.fillRect(0, oy + size + 6, W, 44);
    ctx.fillStyle = "#e6edf3";
    ctx.textAlign = "center";
    ctx.font = "bold 22px sans-serif";
    ctx.fillText(userInteracted ? msg : "Bot vs bot — " + msg.toLowerCase(),
                 W / 2, oy + size + 10);
    ctx.font = "12px sans-serif";
    ctx.fillStyle = "rgba(230,237,243,0.7)";
    ctx.fillText(userInteracted ? "Click to play again"
                                : "Click anywhere to play as X",
                 W / 2, oy + size + 34);
  } else {
    ctx.fillStyle = "rgba(230,237,243,0.7)";
    ctx.textAlign = "center";
    ctx.font = "12px sans-serif";
    ctx.fillText(userInteracted ? "Click a square to place X"
                                : "Bot vs bot — click anywhere to take over X",
                 W / 2, oy + size + 10);
  }
  ctx.textAlign = "left";
}