Javascript Tic Tac Toe游戏：如何提醒用户他赢了？

Question

我正在学习Javascript并开始了第一个游戏项目：Tic Tac Toe游戏。

我的项目及其代码：Tic Tac Toe Project

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

现在我只想测试我的“获胜”代码，如果你把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");

我确实得到了“检查确定”的日志。

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

Answer 2

您似乎只是在运行一次检查。为了确保不是这种情况，每次用户设置X时都要运行检查，以便每次更改时都要重新检查。

要执行此操作，请使用相应的事件（如果单击元素以设置X，则使用click;如果实际上让用户输入X，则使用keydown）。

Answer 3

这是因为你第一次加载脚本时只调用了一次条件。因此，当您选择X或O时，脚本不会再次运行检查。因此，您需要一个函数来包装条件，并在每次用户输入时调用它并触发函数中的条件。我只是在这里分叉和修改你的代码是工作代码.https://repl.it/@syntax_hacker0/TickTackToe-Game

PS：实施所有在这种情况下获胜的工作案例。