javascript - 如何用javascript检查某人是否在井字棋游戏中获胜？

标签 javascript html

我用 HTML、CSS 和 Javascript 制作了一个 tic tac toe 游戏。单击方框、显示消息以及其他所有操作都可以正常工作，但检查某人是否赢得了游戏则不行。

代码不会生成错误，只是不起作用。

这是我使用的代码:

var currentPlayer = "X";
var tds = document.querySelectorAll("td");
var playerDisplay = document.querySelector("#playerDisplay")
var warning = document.querySelector("#warning")
var winDisplay = document.querySelector("#win")

function switchPlayers() {
  if(currentPlayer === "X") {
    currentPlayer = "O";
    playerDisplay.innerHTML = "O"
  } else {
    currentPlayer = "X";
    playerDisplay.innerHTML = "X"
  }
}
function checkWin() {
  if (tds[0].textContent === tds[1].textContent === tds[2].textContent) {
        return tds[0].textContent;
  } else if (tds[3].textContent ===   tds[4].textContent ==tds[5].textContent){
        return tds[3].textContent;
  } else if (tds[6].textContent === tds[7].textContent === tds[8].textContent){
        return tds[6].textContent;
  } else if (tds[0].textContent === tds[3].textContent === tds[6].textContent){
        return tds[0].textContent;
  } else if (tds[1].textContent === tds[4].textContent === tds[7].textContent){
        return tds[1].textContent;
  } else if (tds[2].textContent === tds[5].textContent === tds[8].textContent){
        return tds[2].textContent;
  } else if (tds[0].textContent === tds[4].textContent === tds[8].textContent){
        return tds[0].textContent;
  } else if (tds[2].textContent === tds[4].textContent === tds[6].textContent){
        return tds[2].textContent;
  } else if (tds[0].textContent != "-" && tds[1].textContent != "-" && tds[2].textContent != "-" && tds[3].textContent != "-" && tds[4].textContent != "-" && tds[5].textContent != "-" && tds[6].textContent != "-" && tds[7].textContent != "-" && tds[8].textContent != "-"){
        return -1;
  } else {
    return -2;
  }
}

function game() {
  for(var i = 0; i < tds.length; i++) {
      tds[i].addEventListener("click", function(){
        if(this.textContent === "-") {
          this.textContent = currentPlayer;
          if(checkWin() === "X") {
            winDisplay.textContent = "X wins!!!";
            return;

          } else if(checkWin() === "O"){
            winDisplay.textContent = "O wins!!!";
            return;
          } else if (checkWin() === -1) {
            winDisplay.textContent = "Tied!!!"
            return;
          }
          switchPlayers();
        } else {
          warning.textContent = "That block has already been filled, choose and empty one."
          setTimeout(function(){
            warning.textContent = "";
          }, 1000);
        }
      });
  }
}

game();
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Tic Tac Toe</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto&display=swap" rel="stylesheet">
  </head>
  <body>
    <h1>Tic Tac Toe</h1>
    <table>
      <tr>
        <td id="1">-</td>
        <td id="2" class="top-middle">-</td>
        <td id="3" >-</td>
      </tr>
      <tr>
        <td id="4" class="left">-</td>
        <td id="5" class="middle">-</td>
        <td id="6" class="right">-</td>
      </tr>
      <tr>
        <td id="7" >-</td>
        <td id="8" class="bottom-middle">-</td>
        <td id="9">-</td>
      </tr>
    </table>
    <p id = "win">It's <span id="playerDisplay">X</span>'s turn.</p>
    <p id="warning"></p>
    <script src="script.js"></script>
  </body>
</html>

我只是不明白为什么它不起作用。 :)

最佳答案

安德鲁的答案非常有效，但如果您想了解为什么您的解决方案不起作用，那是因为这一行(以及其他类似的行):

if (tds[0].textContent === tds[1].textContent === tds[2].textContent)

不幸的是，您无法像这样测试三件事是否相等。您实际上正在做的是将 tds[0].textContent(假设为“X”)与 tds[1].textContent === tds[2].textContent 的结果进行比较 (如果它们都是“X”，则不会再次成为“X”，而是 bool 值 true)。

要进行比较，您可以使用:

if (tds[0].textContent === tds[1].textContent && tds[0].textContent === tds[2].textContent)

您可以在这里阅读更多相关信息:

Javascript compare 3 values

我修改了您的代码片段，但为了简洁起见，使用了一个函数来返回比较。

希望这是有道理的!

var currentPlayer = "X";
var tds = document.querySelectorAll("td");
var playerDisplay = document.querySelector("#playerDisplay")
var warning = document.querySelector("#warning")
var winDisplay = document.querySelector("#win")

function switchPlayers() {
  if(currentPlayer === "X") {
    currentPlayer = "O";
    playerDisplay.innerHTML = "O"
  } else {
    currentPlayer = "X";
    playerDisplay.innerHTML = "X"
  }
}
function checkWin() {
  if (check3Same(0, 1, 2)) {
        return tds[0].textContent;
  } else if (check3Same(3, 4, 5)){
        return tds[3].textContent;
  } else if (check3Same(6, 7, 8)){
        return tds[6].textContent;
  } else if (check3Same(0, 3, 6)){
        return tds[0].textContent;
  } else if (check3Same(1, 4, 7)){
        return tds[1].textContent;
  } else if (check3Same(2, 5, 8)){
        return tds[2].textContent;
  } else if (check3Same(0, 4, 8)){
        return tds[0].textContent;
  } else if (check3Same(2, 4, 6)){
        return tds[2].textContent;
  } else if (tds[0].textContent != "-" && tds[1].textContent != "-" && tds[2].textContent != "-" && tds[3].textContent != "-" && tds[4].textContent != "-" && tds[5].textContent != "-" && tds[6].textContent != "-" && tds[7].textContent != "-" && tds[8].textContent != "-"){
        return -1;
  } else {
    return -2;
  }
}

function check3Same(a, b, c) {
  return tds[a].textContent === tds[b].textContent && tds[a].textContent === tds[c].textContent;
}

function game() {
  for(var i = 0; i < tds.length; i++) {
      tds[i].addEventListener("click", function(){
        if(this.textContent === "-") {
          this.textContent = currentPlayer;
          if(checkWin() === "X") {
            winDisplay.textContent = "X wins!!!";
            return;

          } else if(checkWin() === "O"){
            winDisplay.textContent = "O wins!!!";
            return;
          } else if (checkWin() === -1) {
            winDisplay.textContent = "Tied!!!"
            return;
          }
          switchPlayers();
        } else {
          warning.textContent = "That block has already been filled, choose and empty one."
          setTimeout(function(){
            warning.textContent = "";
          }, 1000);
        }
      });
  }
}

game();
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Tic Tac Toe</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto&display=swap" rel="stylesheet">
  </head>
  <body>
    <h1>Tic Tac Toe</h1>
    <table>
      <tr>
        <td id="1">-</td>
        <td id="2" class="top-middle">-</td>
        <td id="3" >-</td>
      </tr>
      <tr>
        <td id="4" class="left">-</td>
        <td id="5" class="middle">-</td>
        <td id="6" class="right">-</td>
      </tr>
      <tr>
        <td id="7" >-</td>
        <td id="8" class="bottom-middle">-</td>
        <td id="9">-</td>
      </tr>
    </table>
    <p id = "win">It's <span id="playerDisplay">X</span>'s turn.</p>
    <p id="warning"></p>
    <script src="script.js"></script>
  </body>
</html>

关于javascript - 如何用javascript检查某人是否在井字棋游戏中获胜？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60781311/

上一篇：javascript - React - 如何将输入字段(受控)重置为默认值

下一篇：javascript - 有没有办法在 highcharter wordcloud 中使用两个系列(或某种组)？

相关文章：

html - 在不使用实际行/列表的情况下连续居中图像

html - CSS 溢出规则包括对象边框？

javascript - 视频结束时添加电子邮件注册表单

javascript - 为什么 Angular $scope 不删除旧值？

javascript - 在 FireBug 控制台中设置一个 js 变量

javascript - 所选属性未在我的选择对象中设置

javascript - PhpStorm 文件(图像)不会自动添加到提交中

javascript - 使用多个复选框显示/隐藏内容

javascript - 在 Javascript 中搜索号码

java - 生成动态表以及动态单选按钮以进一步在 JSP 中生成动态表

©2024 IT工具网  联系我们