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

Question

我用 HTML、CSS 和 Javascript 制作了一个井字游戏。单击方框、显示消息以及其他所有操作都可以正常工作，但检查某人是否赢得了游戏则不行。该代码不会生成错误，它只是不起作用。这是我使用的代码：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;  }}我只是不明白为什么它不起作用。:)

Answer 1

如果您想了解为什么您的解决方案具体不起作用，那是因为这一行（以及其他类似的行）：

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

不幸的是，你无法像这样测试三件事是否相等。您实际上所做的是将tds[0].textContent，比方说 'X' 与结果进行比较tds[1].textContent === tds[2].textContent（如果它们都是 'X'，则不会再次是 'X' 而是 boolean true）。

为了进行比较，您可以使用：

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

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

希望这是有道理的！

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>

Answer 2

我将创建一系列可能的胜利，并断言这些获胜配置是否存在

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"

  }

}

var WINNING_INDEX_CONFIGURATIONS = [

    // horizontal

    [0, 1, 2],

    [3, 4, 5],

    [6, 7, 8],

    // vertical

    [0, 3, 6],

    [1, 4, 7],

    [2, 5, 8],

    // diagonal

    [0, 4, 8],

    [2, 4, 6],

]

function checkPlayerWin(currentPlayer) {

    return WINNING_INDEX_CONFIGURATIONS.some(function (config) {

        return config.every(function (idx) {

            return tds[idx].textContent === currentPlayer

        })

    })

}

function isTie() {

for (let i = 0; i < 9; i++) {

    if (td[i] !== '-') {

        return false

    }

}

return true

}

function game() {

  for(var i = 0; i < tds.length; i++) {

      tds[i].addEventListener("click", function(){

        if(this.textContent === "-") {

          this.textContent = currentPlayer;

          if(checkPlayerWin('X')) {

            winDisplay.textContent = "X wins!!!";

            return;

          } else if(checkPlayerWin('O')){

            winDisplay.textContent = "O wins!!!";

            return;

          } else if (isTie()) {

            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>