Javascript井字游戏:如何提醒用户他赢了？

Question

我正在学习Javascript，并开始了第一个游戏项目：井字游戏。

我的项目及其代码：＜b＞井字游戏项目

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

现在，我只想测试我的“获胜”代码，说如果你在第一行写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

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

PS:实现条件中获胜的所有工作案例。

Answer 2

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

为此，请使用相应的事件（如果单击元素以设置 X，请单击该事件;如果您实际让用户输入 X，则单击键下）。

Answer 3

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

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