Tictactoe 游戏代码

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

1. 您在startTac() 中有一些额外的}s
2. 有一次，有人决定不能使用数字作为 ID，真的。
3. 从 startTac() 中取出 var plyr = "X"，将该行放在其上方，否则每次单击时 palyer 都会重置为 X。
4. setAttribute("onclick","") 在您的代码中拼写错误
5. 必须处理您的条件块，它们将在开始时触发，因为空单元格相等
6. 游戏结束后应该会说谁赢了。