Morpion

LE HTML

<div id="plateau"></div>
<p id="statut" aria-live="polite"></p>
<button id="rejouer">Rejouer</button>

L'ÉTAT

Neuf cases vides, le joueur qui commence, et la fin de partie.

let cases = Array(9).fill(null);
let joueur = 'X';
let fini = false;

LES LIGNES GAGNANTES

Trois lignes, trois colonnes, deux diagonales.

const LIGNES = [[0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6]];
function gagnant() {
  for (const [a, b, c] of LIGNES) {
    if (cases[a] && cases[a] === cases[b] && cases[a] === cases[c]) return cases[a];
  }
  return cases.every(Boolean) ? 'nul' : null;
}

AFFICHER

Neuf boutons, désactivés quand la case est prise ou la partie finie.

function afficher() {
  document.getElementById('plateau').innerHTML = cases.map((v, i) =>
    `<button data-i="${i}" ${v || fini ? 'disabled' : ''} aria-label="Case ${i + 1}">${v || ''}</button>`
  ).join('');
  const g = gagnant();
  document.getElementById('statut').textContent =
    g === 'nul' ? 'Match nul.' : g ? `${g} gagne.` : `Au tour de ${joueur}.`;
}

JOUER

document.getElementById('plateau').addEventListener('click', e => {
  const i = e.target.dataset.i;
  if (i === undefined || cases[i] || fini) return;
  cases[i] = joueur;
  fini = Boolean(gagnant());
  joueur = joueur === 'X' ? 'O' : 'X';
  afficher();
});
document.getElementById('rejouer').addEventListener('click', () => {
  cases = Array(9).fill(null);
  joueur = 'X';
  fini = false;
  afficher();
});
afficher();