时间戳

首页 > 解决方案 > 如何使用 Javascript 确定井字游戏中的平局

javascript - 如何使用 Javascript 确定井字游戏中的平局

问题描述

我试图弄清楚如何在井字游戏中确定平局，但似乎无法弄清楚。任何人有任何想法如何确定平局？

我正在考虑添加一个计数器来记录点击次数。一旦计数器达到 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));
}

标签： javascripttic-tac-toe

解决方案

您可以创建获胜组合矩阵。

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;
}

推荐阅读