Javascript 井字游戏 : how to alert user that he won?

Question

我正在学习 Javascript 并开始了第一个游戏元素:井字游戏。

我的元素及其代码: Tic Tac Toe Project

如果用户在井字游戏中获胜，我希望能够显示通知。

现在我只想测试我的“获胜”代码，如果你在第一行放 3 个 X，你就赢了:

HTML :

我插入了一个带有id的空段落，专门用于显示通知

<p id="Notif" style="text-align : center"></p>

JS:

var Boxes = document.querySelectorAll("td")
Notif = document.getElementById("Notif")

  if (Boxes[0].textContent === "X" && Boxes[1].textContent === "X" && Boxes[2].textContent === "X") {
  console.log("Check Ok");
  Notif.textContent = "You won!"
} 

它不起作用，我想这一定是关于脚本中的执行顺序？或者可能需要一个循环？

当我加载页面时，将 3 个“X”放在第一行，然后在控制台中启动:

  if (Boxes[0].textContent === "X" && Boxes[1].textContent === "X" && Boxes[2].textContent === "X") {
  console.log("Check Ok");

我收到日志“Check Ok”。

Answer 1

该代码只被调用一次。您需要将它包装在一个函数中，并在每次点击游戏板时调用它

function checkWin(){
  if (Boxes[0].textContent === "X" && Boxes[1].textContent === "X" && Boxes[2].textContent === "X") {
     console.log("Check Ok");
     Notification.textContent = "You won!"
  } 

}
function MarkBox() {
  if (this.textContent === "") {   // === means equal for true / false questions
    this.textContent = "X"  // = means change value of variable
  } else if (this.textContent === "X") {
    this.textContent = "O"
  }
  else { this.textContent = ""}
  checkWin();


}

查看工作示例 repl.it