如何用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() {&nbsp; if(currentPlayer === "X") {&nbsp; &nbsp; currentPlayer = "O";&nbsp; &nbsp; playerDisplay.innerHTML = "O"&nbsp; } else {&nbsp; &nbsp; currentPlayer = "X";&nbsp; &nbsp; playerDisplay.innerHTML = "X"&nbsp; }}var WINNING_INDEX_CONFIGURATIONS = [&nbsp; &nbsp; // horizontal&nbsp; &nbsp; [0, 1, 2],&nbsp; &nbsp; [3, 4, 5],&nbsp; &nbsp; [6, 7, 8],&nbsp; &nbsp; // vertical&nbsp; &nbsp; [0, 3, 6],&nbsp; &nbsp; [1, 4, 7],&nbsp; &nbsp; [2, 5, 8],&nbsp; &nbsp; // diagonal&nbsp; &nbsp; [0, 4, 8],&nbsp; &nbsp; [2, 4, 6],]function checkPlayerWin(currentPlayer) {&nbsp; &nbsp; return WINNING_INDEX_CONFIGURATIONS.some(function (config) {&nbsp; &nbsp; &nbsp; &nbsp; return config.every(function (idx) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return tds[idx].textContent === currentPlayer&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; })}function isTie() {for (let i = 0; i < 9; i++) {&nbsp; &nbsp; if (td[i] !== '-') {&nbsp; &nbsp; &nbsp; &nbsp; return false&nbsp; &nbsp; }}return true}function game() {&nbsp; for(var i = 0; i < tds.length; i++) {&nbsp; &nbsp; &nbsp; tds[i].addEventListener("click", function(){&nbsp; &nbsp; &nbsp; &nbsp; if(this.textContent === "-") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.textContent = currentPlayer;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(checkPlayerWin('X')) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; winDisplay.textContent = "X wins!!!";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if(checkPlayerWin('O')){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; winDisplay.textContent = "O wins!!!";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (isTie()) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; winDisplay.textContent = "Tied!!!"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; switchPlayers();&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; warning.textContent = "That block has already been filled, choose and empty one."&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; warning.textContent = "";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, 1000);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; });&nbsp; }}game();<html>&nbsp; <head>&nbsp; &nbsp; <meta charset="utf-8">&nbsp; &nbsp; <meta name="viewport" content="width=device-width">&nbsp; &nbsp; <title>Tic Tac Toe</title>&nbsp; &nbsp; <link href="style.css" rel="stylesheet" type="text/css" />&nbsp; &nbsp; <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto&display=swap" rel="stylesheet">&nbsp; </head>&nbsp; <body>&nbsp; &nbsp; <h1>Tic Tac Toe</h1>&nbsp; &nbsp; <table>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td id="1">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td id="2" class="top-middle">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td id="3" >-</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td id="4" class="left">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td id="5" class="middle">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td id="6" class="right">-</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td id="7" >-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td id="8" class="bottom-middle">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td id="9">-</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </table>&nbsp; &nbsp; <p id = "win">It's <span id="playerDisplay">X</span>'s turn.</p>&nbsp; &nbsp; <p id="warning"></p>&nbsp; &nbsp; <script src="script.js"></script>&nbsp; </body></html>