Как определить ничью в Ti c Ta c Toe, используя Javascript

Question

Я пытаюсь выяснить, как определить ничью в игре Ti c Ta c Toe, но не могу понять это. У кого-нибудь есть идеи, как определить ничью?

Я думал о добавлении счетчика, который бы регистрировал количество сделанных кликов. Как только счетчик достигнет 9 кликов, я могу проверить, есть ли победители; если нет, то я объявляю ничью. Однако я не знаю, как это будет закодировано.

var player1 = "X";
var player2 = "O";
let currentClass = player1;
var moves;
var j;
const winCombos = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
  [6, 4, 2]
]

let cells = document.querySelectorAll(".row>div");
console.log(cells);


for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener('click', cellClicked, { once: true })

}

function cellClicked() {
  if (currentClass == player1) {
    event.target.textContent = currentClass;
    currentClass = player2;


    if (checkWin(player1)) {
      document.getElementById("x").innerHTML = "X Wins!";


      for (var i = 0; i < cells.length; i++) {
        cells[i].removeEventListener('click', cellClicked, { once: true })
      }

      for (var i = 0; i < cells.length; i++) {
        cells[i].addEventListener('click', reset)

      }

      function reset() {
        cells[i].textContent = window.location.reload(true);

      }
    }

  } else {
    currentClass == player2;
    event.target.textContent = currentClass;
    currentClass = player1;


    if (checkWin(player2)) {

      document.getElementById("o").innerHTML = "O Wins!"

      for (var i = 0; i < cells.length; i++) {
        cells[i].removeEventListener('click', cellClicked, { once: true })
      }
      for (var i = 0; i < cells.length; i++) {
        cells[i].addEventListener('click', reset)

      }
      function reset() {
        cells[i].textContent = window.location.reload(true);
      }

    }
  }

} 


function checkWin(player) {
  return winCombos.some(v => v.every(k => cells[k].textContent == player));
}

Answer 1

Вы можете создать матрицу выигрышных комбинаций.

winningCombination = [
  [
    [0, 0],
    [0, 1],
    [0, 2],
  ],
  [
    [1, 0],
    [1, 1],
    [1, 2],
  ],
  [
    [2, 0],
    [2, 1],
    [2, 2],
  ],
  [
    [0, 0],
    [1, 0],
    [2, 0],
  ],
  [
    [0, 1],
    [1, 1],
    [2, 1],
  ],
  [
    [0, 2],
    [1, 2],
    [2, 2],
  ],

  [
    [0, 0],
    [1, 1],
    [2, 2],
  ],
  [
    [2, 2],
    [1, 1],
    [0, 0],
  ],
];

Где каждая строка определяет, [i,j] Положение хода.

class TicTac {
  constructor() {
    this.mat = [
      [-1, -1, -1],
      [-1, -1, -1],
      [-1, -1, -1],
    ];
  }
  move(i, j, m) {
    m ? this.moveX([i, j]) : moveO([i, j]);
  }
  moveX([i, j]) {
    this.mat[i][j] = 1;
  }
  moveO([i, j]) {
    this.mat[i][j] = 0;
  }
  winner(move) {
    const mat = this.mat;
    for (let i = 0; i < TicTac.winningCombination.length; i++) {
      const [[x11, x12], [x21, x22], [x31, x32]] = TicTac.winningCombination[i];
      if (
        move == mat[x11][x12] &&
        mat[x11][x12] == mat[x21][x22] &&
        mat[x11][x12] == mat[x31][x32]
      ) {
        return move;
      }
    }
    return -1;
  }
}
TicTac.winningCombination = [
  [
    [0, 0],
    [0, 1],
    [0, 2],
  ],
  [
    [1, 0],
    [1, 1],
    [1, 2],
  ],
  [
    [2, 0],
    [2, 1],
    [2, 2],
  ],
  [
    [0, 0],
    [1, 0],
    [2, 0],
  ],
  [
    [0, 1],
    [1, 1],
    [2, 1],
  ],
  [
    [0, 2],
    [1, 2],
    [2, 2],
  ],

  [
    [0, 0],
    [1, 1],
    [2, 2],
  ],
  [
    [2, 2],
    [1, 1],
    [0, 0],
  ],
];
const ticTac = new TicTac();
ticTac.moveO([0, 0]);
ticTac.moveX([1, 1]);
console.log(ticTac.mat);
let hasWinner = ticTac.winner(1);
console.log(hasWinner !== -1 ? (hasWinner ? "X Wins" : "O Wins") : "NO Winner");
ticTac.moveO([0, 2]);
ticTac.moveX([1, 0]);
console.log(ticTac.mat);
ticTac.moveO([2, 1]);
ticTac.moveX([2, 2]);
console.log(ticTac.mat);
ticTac.moveO([0, 1]);
hasWinner = ticTac.winner(0);
console.log(hasWinner !== -1 ? (hasWinner ? "X Wins" : "O Wins") : "NO Winner");

.as-console {
  min-height: 100% !important;
}

.as-console-row {
  color: blue !important;
}