Comprobación de victoria en el juego de tres en raya en JavaScript

Ahora es el momento de escribir el código que determinará la victoria y mostrará el nombre del ganador.

Al analizar la tarea, se puede deducir que la verificación de la victoria debe realizarse en cada movimiento:

javascriptfunction init(selector) {
  let cells = document.querySelectorAll('#field td');
  let i = 0;
  
  for (let cell of cells) {
    cell.addEventListener('click', function step() {
      this.textContent = ['X', 'O'][i % 2];
      this.removeEventListener('click', step);
      
      // aquí debemos verificar victoria o empate
      
      i++;
    });
  }
}

Hagamos una función isVictory, que tomará como parámetro un array de celdas y devolverá true si en el tablero hay una victoria, y false si no. Usaremos esta función de la siguiente manera:

javascriptfunction start(cells) {
  let i = 0;
  
  for (let cell of cells) {
    cell.addEventListener('click', function step() {
      this.textContent = ['X', 'O'][i % 2];
      this.removeEventListener('click', step);
      
      if (isVictory(cells)) {
        alert('nombre del ganador');
      }
      
      i++;
    });
  }
}

¿Cómo podemos saber el nombre del ganador? Obviamente, su nombre está almacenado en cada una de las celdas ganadoras. Para explicar: si hay una victoria, esto significa que algunas 3 celdas en horizontal, vertical o diagonal contienen el mismo valor: ya sea una cruz o un círculo.

Obviamente, el valor de cualquiera de estas celdas es el nombre del ganador. Pero se puede seguir otro camino menos obvio: como determinamos la presencia de la victoria en cada movimiento, es lógico que el ganador será el jugador que realizó el último movimiento. El nombre de este jugador está contenido en el texto de la celda clickeada:

javascriptfunction start(cells) {
  let i = 0;
  
  for (let cell of cells) {
    cell.addEventListener('click', function step() {
      this.textContent = ['X', 'O'][i % 2];
      this.removeEventListener('click', step);
      
      if (isVictory(cells)) {
        alert(this.textContent); // mostramos el nombre del ganador
      }
      
      i++;
    });
  }
}

Implementación de isVictory

¿Cómo determinamos técnicamente la presencia de una victoria en el tablero? Si lo pensamos bien, se puede llegar a la conclusión de que hay un número limitado de tripletes de celdas en el tablero.

Es decir, para verificar la victoria simplemente podemos verificar todos estos tripletes. Hay que verificar que los tripletes tengan los mismos valores no vacíos (es decir, que tengan ya sea cruz o círculo).

Hagamos un array bidimensional, donde cada subarray contendrá los números de celda de uno de los tripletes:

javascriptlet combs = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
  [2, 4, 6],
];

Escribamos la detección de victoria usando este array:

javascriptfunction isVictory(cells) {
  let combs = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];

  for (let comb of combs) {
    if (
      cells[comb[0]].textContent == cells[comb[1]].textContent &&
      cells[comb[1]].textContent == cells[comb[2]].textContent &&
      cells[comb[0]].textContent != ''
    ) {
      return true;
    }
  }
  
  return false;
}