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");

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

Answer 1

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

为此，请使用相应的事件（如果单击元素来设置X，则使用click；如果实际上是让用户输入X，则使用keydown）。

Answer 2

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

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 3

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

PS：在这种情况下，执行所有获胜的工作案例。

JavaScript井字游戏：如何提醒用户他赢了？

3 个答案: