Question

我创造了这个游戏很多个小时。我完成它没有任何语法错误。

我尝试播放但不起作用。我不知道为什么？我的代码有什么问题吗？

<script>
  function startTac() {
    var t1 = document.getElementById("1");
    var t2 = document.getElementById("2");
    var t3 = document.getElementById("3");
    var t4 = document.getElementById("4");
    var t5 = document.getElementById("5");
    var t6 = document.getElementById("6");
    var t7 = document.getElementById("7");
    var t8 = document.getElementById("8");
    var t9 = document.getElementById("9");
    var plyr = "X";
    if ((t1.innerHTML) == (t2.innerHTML) && (t2.innerHTML) == (t3.innerHTML) || (t4.innerHTML) == (t5.innerHTML) && (t5.innerHTML) == (t6.innerHTML) || (t7.innerHTML) == (t8.innerHTML) && (t8.innerHTML) == (t9.innerHTML)) {
      alert("Game Over");
    }
  }
  if ((t1.innerHTML) == (t4.innerHTML) && (t4.innerHTML) == (t7.innerHTML) || (t2.innerHTML) == (t5.innerHTML) && (t5.innerHTML) == (t8.innerHTML) || (t3.innerHTML) == (t6.innerHTML) && (t6.innerHTML) == (t9.innerHTML)) {
    alert("Game Over");
  }
  }
  if ((t1.innerHTML) == (t5.innerHTML) && (t5.innerHTML) == (t9.innerHTML) || (t3.innerHTML) == (t5.innerHTML) && (t5.innerHTML) == (t7.innerHTML)) {
    alert("Game Over");
  }
  }

  function gameTac(tar) {
    switch (plyr) {
      case "X":
        {
          document.getElementById(tar).innerHTML = "O";
          document.getElementById(tar).setAtrribute(" onclick", "");
          plyr = "O";startTac();
          break;
        }
      case "O":
        {
          document.getElementById(tar).innerHTML = "X";
          document.getElementById(tar).setAtrribute(" onclick", "");
          plyr = "X";startTac();
          break;
        }
    }
  }
</script>
<table border="1" width="400px" height="400px" style="margin: 0px; padding: 0px;">
  <tbody>
    <tr>
      <td id="1" onclick="gameTac(this.id)"></td>
      <td id="2" onclick="gameTac(this.id)"></td>
      <td id="3" onclick="gameTac(this.id)">H</td>
    </tr>
    <tr>
      <td id="4" onclick="gameTac(this.id)"></td>
      <td id="5" onclick="gameTac(this.id)"></td>
      <td id="6" onclick="gameTac(this.id)"></td>
    </tr>
    <tr>
      <td id="7" onclick="gameTac(this.id)"></td>
      <td id="8" onclick="gameTac(this.id)"></td>
      <td id="9" onclick="gameTac(this.id)"></td>
    </tr>
  </tbody>
</table>

任何人都可以修复我的代码吗？

我无法修复我的代码因为我在android上创建了这个代码。谢谢！

Answer 1

简单地说：你的代码有很多错误......（具体参考其他答案）。以下是一些可以让您的游戏正常运行的代码，我将留给您完成。

var plyr = "X";

function startTac() {
    var t1 = document.getElementById("1");
    var t2 = document.getElementById("2");
    var t3 = document.getElementById("3");
    var t4 = document.getElementById("4");
    var t5 = document.getElementById("5");
    var t6 = document.getElementById("6");
    var t7 = document.getElementById("7");
    var t8 = document.getElementById("8");
    var t9 = document.getElementById("9");

    let tiles = [0, t1, t2, t3, t4, t5, t6, t7, t8, t9]
    let winningPaths = [
        [1,2,3],[4,5,6],[7,8,9],
        [1,4,7],[2,5,8],[3,6,9],
        [1,5,9],[3,5,7]
    ]

    winningPaths.forEach(path => {
        let matchingTiles = path.filter(id => {
            let tile = tiles[id]

            if(tile.textContent === plyr) {
              return true
            } else {
              return false
            }

      }).length

      if(matchingTiles === 3) {
        alert("Game Over")
      }
    })

  }    

  function gameTac(tar) {
    switch (plyr) {
      case "X":
      {
          document.getElementById(tar).textContent = "O";
          document.getElementById(tar).onclick = undefined;
          plyr = "O";
          startTac();
          break;
      }
      case "O":
      {
          document.getElementById(tar).textContent = "X";
          document.getElementById(tar).onclick = undefined;
          plyr = "X";
          startTac();
          break;
        }
    }
  }

Answer 2

我的第一个想法是你需要仔细检查，然后确保你的条件是正确的：

if ( (t1.innerHTML == t2.innerHTML && t2.innerHTML == t3.innerHTML) || (t4.innerHTML == t5.innerHTML && t5.innerHTML == t6.innerHTML) || (t7.innerHTML == t8.innerHTML && t8.innerHTML == t9.innerHTML)) {
      alert("Game Over");
}

和

if ((t1.innerHTML == t4.innerHTML && t4.innerHTML == t7.innerHTML) || (t2.innerHTML == t5.innerHTML && t5.innerHTML == t8.innerHTML) || (t3.innerHTML == t6.innerHTML && t6.innerHTML == t9.innerHTML)) {
    alert("Game Over");
}

和

  if ((t1.innerHTML == t5.innerHTML && t5.innerHTML == t9.innerHTML) || (t3.innerHTML == t5.innerHTML && t5.innerHTML == t7.innerHTML)) {
    alert("Game Over");
  }

Answer 3

}

startTac()

有人决定你不能认真对待数字作为ID。
将var plyr = "X"从startTac（）中取出，将该行放在其上方，否则每次点击都会将重置为X.
setAttribute("onclick","")在您的代码中拼写错误
必须处理条件块，它们将在开始时触发，因为空单元格相等
当你结束游戏时，应该说谁赢了。

Tictactoe游戏代码

3 个答案: