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;
  }
}

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 1

我将创建一系列可能的获胜者，并断言是否存在任何获胜配置

def need_authentication(actual_user = None):
    def decorator(func):
        def check_authentication(*args, **kwargs):
            print(app.User)
            print(user)
            if user == None:
                print("lo siento, necesita registrarse para acceder al contenido")
            else:
                func(*args, **kwargs)

        return check_authentication

    return decorator

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

Answer 2

安德鲁的答案很好用，但是如果您想了解为什么您的解决方案特别行不通，那是因为这一行（以及其他类似的行）：

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

不幸的是，您不能像这样测试三个条件是否相等。您实际上正在做的是将tds[0].textContent（假设为“ X”）与tds[1].textContent === tds[2].textContent的结果进行比较（如果它们都为“ X”，则不会再为“ X”，而是布尔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的井字游戏中获胜？

2 个答案: