Javascript 井字游戏获胜者检查

Question

井字棋代码:

$(".square").one("click", function() { 
if( gameOver == false ) {
 sq1 = $("#sq1").text(); // grabs the value of squares after being clicked.
 sq2 = $("#sq2").text(); 
 //same for all 9 squares
}

//To check winner : (Result is same but code is broken into statements to avoid length.)
function checkWinner() {
if(  sq1 != emptyStr && (sq1 == sq2 && sq2 == sq3) ) { //emptyStr = ""
    winner = 1; //Testing purposes
    //alert(winner);
}

else if( sq1 != emptyStr &&  (sq1 == sq4 && sq4 == sq7) ) {
    winner = 1;
    //alert(winner);
}

我的问题是..我应该如何调用 checkWinner 函数。应该在每次点击时调用它还是应该使用 setInterval ？

第二个问题:如果我在控制台中运行 checkWinner 并且条件为真，则获胜者在一次额外点击后变为 1，而不是同时。

编辑:按照@sra的要求编写代码:

//2 buttons( x and o)
$("#x").on("click", function() {
  gameOver = false;
  player = 1;
  $("#o").attr("disabled","disabled");
})

$("#o").on("click", function() {
  gameOver = false;
  player = 2;
  $("#x").attr("disabled","disabled");
})

(检查了具有相同关键字的其他问题，但找不到我的答案)

附注仍然是 JavaScript 新手，因此请随时提出代码改进建议和编辑!

Answer 1

每当发生点击时，您都应该完全检查。这时你需要评估新的状态(有赢家吗？比赛是否以平局结束？)。

为了使实际的匹配逻辑更小，我会这样做:

didPlayerWin = function(player) {
  sq1 = $("#sq1").text() == player;
  sq2 = $("#sq2").text() == player;
  sq3 = $("#sq3").text() == player;
  // ... for all the squares

  sq1 && sq2 && sq3 ||
  sq4 && sq5 && sq6 ||
  sq7 && sq8 && sq9 ||
  // ... for all the possible wins
}

$(".square").on("click", function() {
  if (didPlayerWin("x")) {
    alert("x rockz!");
  } else if (didPlayerWin("o")) {
    alert("o rockz!");
  } else {
    // check if all the squares are filled
  }
}

对于问题的第二部分(您需要进行额外的单击才能评估获胜者)，我认为当您检查获胜者时，用户单击的实际 DOM 元素尚未更新为新的值(value)。那么什么时候将点击的 DOM 元素文本设置为“x”或“o”呢？您也可以发布该代码吗？