为什么电脑在我的井字棋游戏中随机放下 2 个 O

Question

let O1 = false;
let X1 = false;
let O2 = false;
let X2 = false;
let O3 = false;
let X3 = false;
let O4 = false;
let X4 = false;
let O5 = false;
let X5 = false;
let O6 = false;
let X6 = false;
let O7 = false;
let X7 = false;
let O8 = false;
let X8 = false;
let O9 = false;
let X9 = false;

let turn = 0;

function Xon1() {
  if (O1 === false && X1 === false && turn === 0) {
    document.getElementById("1").innerHTML = 'X';
    X1 = true;
    turn++
    setTimeout(compMove, 1000);
  }
}

function Xon2() {
  if (O2 === false && X2 === false && turn === 0) {
    document.getElementById("2").innerHTML = 'X';
    X2 = true;
    turn++
    setTimeout(compMove, 1000);
  }
}

function Xon3() {
  if (O3 === false && X3 === false && turn === 0) {
    document.getElementById("3").innerHTML = 'X';
    X3 = true;
    turn++
    setTimeout(compMove, 1000);
  }
}

function Xon4() {
  if (O4 === false && X4 === false && turn === 0) {
    document.getElementById("4").innerHTML = 'X';
    X4 = true;
    turn++
    setTimeout(compMove, 1000);
  }
}

function Xon5() {
  if (O5 === false && X5 === false && turn === 0) {
    document.getElementById("5").innerHTML = 'X';
    X5 = true;
    turn++
    setTimeout(compMove, 1000);
  }
}

function Xon6() {
  if (O6 === false && X6 === false && turn === 0) {
    document.getElementById("6").innerHTML = 'X';
    X6 = true;
    turn++
    setTimeout(compMove, 1000);
  }
}

function Xon7() {
  if (O7 === false && X7 === false && turn === 0) {
    document.getElementById("7").innerHTML = 'X';
    X7 = true;
    turn++
    setTimeout(compMove, 1000);
  }
}

function Xon8() {
  if (O8 === false && X8 === false && turn === 0) {
    document.getElementById("8").innerHTML = 'X';
    X8 = true;
    turn++
    setTimeout(compMove, 1000);
  }
}

function Xon9() {
  if (O9 === false && X9 === false && turn === 0) {
    document.getElementById("9").innerHTML = 'X';
    X9 = true;
    turn++
    setTimeout(compMove, 1000);
  }
}

function compMove() {
  if (turn === 1) {
    if (X1 === true && X2 === true && X3 === false && O3 === false && turn === 1) {
      document.getElementById("3").innerHTML = 'O';
      O3 = true
      turn--
    }
    if (X1 === true && X3 === true && X2 === false && O2 === false && turn === 1) {
      document.getElementById("2").innerHTML = 'O';
      O2 = true
      turn--
    }
    if (X2 === true && X3 === true && X1 === false && O1 === false && turn === 1) {
      document.getElementById("1").innerHTML = 'O';
      O1 = true
      turn--
    }
    if (X3 === true && X4 === true && X5 === false && O5 === false && turn === 1) {
      document.getElementById("5").innerHTML = 'O';
      O5 = true
      turn--
    }
    if (X3 === true && X5 === true && X4 === false && O4 === false && turn === 1) {
      document.getElementById("4").innerHTML = 'O';
      O4 = true
      turn--
    }
    if (X4 === true && X5 === true && X3 === false && O3 === false && turn === 1) {
      document.getElementById("3").innerHTML = 'O';
      O3 = true
      turn--
    }
    if (X7 === true && X8 === true && X9 === false && O9 === false && turn === 1) {
      document.getElementById("9").innerHTML = 'O';
      O9 = true
      turn--
    }
    if (X7 === true && X9 === true && X8 === false && O8 === false && turn === 1) {
      document.getElementById("8").innerHTML = 'O';
      O8 = true
      turn--
    }
    if (X8 === true && X9 === true && X7 === false && O7 === false && turn === 1) {
      document.getElementById("7").innerHTML = 'O';
      O7 = true
      turn--
    }
    if (X1 === true && X4 === true && X7 === false && O7 === false && turn === 1) {
      document.getElementById("7").innerHTML = 'O';
      O7 = true
      turn--
    }
    if (X1 === true && X7 === true && X4 === false && O4 === false && turn === 1) {
      document.getElementById("4").innerHTML = 'O';
      O4 = true
      turn--
    }
    if (X7 === true && X4 === true && X1 === false && O1 === false && turn === 1) {
      document.getElementById("1").innerHTML = 'O';
      O1 = true
      turn--
    }
    if (X2 === true && X5 === true && X8 === false && O8 === false && turn === 1) {
      document.getElementById("8").innerHTML = 'O';
      O8 = true
      turn--
    }
    if (X2 === true && X8 === true && X5 === false && O5 === false && turn === 1) {
      document.getElementById("5").innerHTML = 'O';
      O5 = true
      turn--
    }
    if (X5 === true && X8 === true && X2 === false && O2 === false && turn === 1) {
      document.getElementById("2").innerHTML = 'O';
      O2 = true
      turn--
    }
    if (X3 === true && X6 === true && X9 === false && O9 === false && turn === 1) {
      document.getElementById("9").innerHTML = 'O';
      O9 = true
      turn--
    }
    if (X3 === true && X9 === true && X6 === false && O6 === false && turn === 1) {
      document.getElementById("6").innerHTML = 'O';
      O6 = true
      turn--
    }
    if (X6 === true && X9 === true && X3 === false && O3 === false && turn === 1) {
      document.getElementById("3").innerHTML = 'O';
      O3 = true
      turn--
    }
    if (O5 === false && X5 === false) {
      if (X1 === true || X2 === true || X3 === true || X4 === true || X5 === true || X6 === true || X7 === true || X8 === true || X9 === true && turn === 1) {
        document.getElementById("5").innerHTML = 'O';
        O5 = true
        turn--
      } else {
        compRandom()
      }
    } else {
      compRandom()
    };
  }
}

function compRandom() {
  randomChoice = Math.floor(Math.random() * 9) + 1
  if (randomChoice === 1 && X1 === false && O1 === false) {
    document.getElementById("1").innerHTML = 'O';
    O1 = true
    turn--
  }
  if (randomChoice === 2 && X2 === false && O2 === false) {
    document.getElementById("2").innerHTML = 'O';
    O2 = true
    turn--
  }
  if (randomChoice === 3 && X3 === false && O3 === false) {
    document.getElementById("3").innerHTML = 'O';
    O3 = true
    turn--
  }
  if (randomChoice === 4 && X4 === false && O4 === false) {
    document.getElementById("4").innerHTML = 'O';
    O4 = true
    turn--
  }
  if (randomChoice === 5 && X5 === false && O5 === false) {
    document.getElementById("5").innerHTML = 'O';
    O5 = true
    turn--
  }
  if (randomChoice === 6 && X6 === false && O6 === false) {
    document.getElementById("6").innerHTML = 'O';
    O6 = true
    turn--
  }
  if (randomChoice === 7 && X7 === false && O7 === false) {
    document.getElementById("7").innerHTML = 'O';
    O7 = true
    turn--
  }
  if (randomChoice === 8 && X8 === false && O8 === false) {
    document.getElementById("8").innerHTML = 'O';
    O8 = true
    turn--
  }
  if (randomChoice === 9 && X9 === false && O9 === false) {
    document.getElementById("9").innerHTML = 'O';
    O9 = true
    turn--
  }
}

td {
  border: 1px solid black;
  height: 50px;
  width: 50px;
}

<html>

<body>
  <table>
    <tr>
      <td align="center"><button id="1" onclick="Xon1()">-</button></td>
      <td align="center"><button id="2" onclick="Xon2()">-</button></td>
      <td align="center"><button id="3" onclick="Xon3()">-</button></td>
    </tr>
    <tr>
      <td align="center"><button id="4" onclick="Xon4()">-</button></td>
      <td align="center"><button id="5" onclick="Xon5()">-</button></td>
      <td align="center"><button id="6" onclick="Xon6()">-</button></td>
    </tr>
    <tr>
      <td align="center"><button id="7" onclick="Xon7()">-</button></td>
      <td align="center"><button id="8" onclick="Xon8()">-</button></td>
      <td align="center"><button id="9" onclick="Xon9()">-</button></td>
    </tr>
  </table>
</body>

</html>

我已经查看了代码，我知道代码很多，所以我可能错过了一些东西，所以也许有人可以帮助我找出问题所在。 if语句有问题吗？你也不必这样做，但如果你能弄清楚如何缩短它或简化它以使其更容易审查，我不介意。

Answer 1

代码中井字棋游戏中的两个 O 是结果，因为没有

else if

，在你的代码中只有

if

和

else

当您添加

else if

时，计算机一圈内就不会出现两个 O。

 let O1 = false;
      let X1 = false;
      let O2 = false;
      let X2 = false;
      let O3 = false;
      let X3 = false;
      let O4 = false;
      let X4 = false;
      let O5 = false;
      let X5 = false;
      let O6 = false;
      let X6 = false;
      let O7 = false;
      let X7 = false;
      let O8 = false;
      let X8 = false;
      let O9 = false;
      let X9 = false;

      let turn = 0;

      function Xon1() {
        if (O1 === false && X1 === false && turn === 0) {
          document.getElementById("1").innerHTML = "X";
          X1 = true;
          turn++;
          setTimeout(compMove, 1000);
        }
      }

      function Xon2() {
        if (O2 === false && X2 === false && turn === 0) {
          document.getElementById("2").innerHTML = "X";
          X2 = true;
          turn++;
          setTimeout(compMove, 1000);
        }
      }

      function Xon3() {
        if (O3 === false && X3 === false && turn === 0) {
          document.getElementById("3").innerHTML = "X";
          X3 = true;
          turn++;
          setTimeout(compMove, 1000);
        }
      }

      function Xon4() {
        if (O4 === false && X4 === false && turn === 0) {
          document.getElementById("4").innerHTML = "X";
          X4 = true;
          turn++;
          setTimeout(compMove, 1000);
        }
      }

      function Xon5() {
        if (O5 === false && X5 === false && turn === 0) {
          document.getElementById("5").innerHTML = "X";
          X5 = true;
          turn++;
          setTimeout(compMove, 1000);
        }
      }

      function Xon6() {
        if (O6 === false && X6 === false && turn === 0) {
          document.getElementById("6").innerHTML = "X";
          X6 = true;
          turn++;
          setTimeout(compMove, 1000);
        }
      }

      function Xon7() {
        if (O7 === false && X7 === false && turn === 0) {
          document.getElementById("7").innerHTML = "X";
          X7 = true;
          turn++;
          setTimeout(compMove, 1000);
        }
      }

      function Xon8() {
        if (O8 === false && X8 === false && turn === 0) {
          document.getElementById("8").innerHTML = "X";
          X8 = true;
          turn++;
          setTimeout(compMove, 1000);
        }
      }

      function Xon9() {
        if (O9 === false && X9 === false && turn === 0) {
          document.getElementById("9").innerHTML = "X";
          X9 = true;
          turn++;
          setTimeout(compMove, 1000);
        }
      }

      function compMove() {
        if (turn === 1) {
          if (X1 === true && X2 === true && X3 === false && O3 === false && turn === 1) {
            document.getElementById("3").innerHTML = "O";
            O3 = true;
            turn--;
          } else if (X1 === true && X3 === true && X2 === false && O2 === false && turn === 1) {
            document.getElementById("2").innerHTML = "O";
            O2 = true;
            turn--;
          } else if (X2 === true && X3 === true && X1 === false && O1 === false && turn === 1) {
            document.getElementById("1").innerHTML = "O";
            O1 = true;
            turn--;
          } else if (X3 === true && X4 === true && X5 === false && O5 === false && turn === 1) {
            document.getElementById("5").innerHTML = "O";
            O5 = true;
            turn--;
          } else if (X3 === true && X5 === true && X4 === false && O4 === false && turn === 1) {
            document.getElementById("4").innerHTML = "O";
            O4 = true;
            turn--;
          } else if (X4 === true && X5 === true && X3 === false && O3 === false && turn === 1) {
            document.getElementById("3").innerHTML = "O";
            O3 = true;
            turn--;
          } else if (X7 === true && X8 === true && X9 === false && O9 === false && turn === 1) {
            document.getElementById("9").innerHTML = "O";
            O9 = true;
            turn--;
          } else if (X7 === true && X9 === true && X8 === false && O8 === false && turn === 1) {
            document.getElementById("8").innerHTML = "O";
            O8 = true;
            turn--;
          } else if (X8 === true && X9 === true && X7 === false && O7 === false && turn === 1) {
            document.getElementById("7").innerHTML = "O";
            O7 = true;
            turn--;
          } else if (X1 === true && X4 === true && X7 === false && O7 === false && turn === 1) {
            document.getElementById("7").innerHTML = "O";
            O7 = true;
            turn--;
          } else if (X1 === true && X7 === true && X4 === false && O4 === false && turn === 1) {
            document.getElementById("4").innerHTML = "O";
            O4 = true;
            turn--;
          } else if (X7 === true && X4 === true && X1 === false && O1 === false && turn === 1) {
            document.getElementById("1").innerHTML = "O";
            O1 = true;
            turn--;
          } else if (X2 === true && X5 === true && X8 === false && O8 === false && turn === 1) {
            document.getElementById("8").innerHTML = "O";
            O8 = true;
            turn--;
          } else if (X2 === true && X8 === true && X5 === false && O5 === false && turn === 1) {
            document.getElementById("5").innerHTML = "O";
            O5 = true;
            turn--;
          } else if (X5 === true && X8 === true && X2 === false && O2 === false && turn === 1) {
            document.getElementById("2").innerHTML = "O";
            O2 = true;
            turn--;
          } else if (X3 === true && X6 === true && X9 === false && O9 === false && turn === 1) {
            document.getElementById("9").innerHTML = "O";
            O9 = true;
            turn--;
          } else if (X3 === true && X9 === true && X6 === false && O6 === false && turn === 1) {
            document.getElementById("6").innerHTML = "O";
            O6 = true;
            turn--;
          } else if (X6 === true && X9 === true && X3 === false && O3 === false && turn === 1) {
            document.getElementById("3").innerHTML = "O";
            O3 = true;
            turn--;
          } else if (O5 === false && X5 === false) {
            if (X1 === true || X2 === true || X3 === true || X4 === true || X5 === true || X6 === true || X7 === true || X8 === true || (X9 === true && turn === 1)) {
              document.getElementById("5").innerHTML = "O";
              O5 = true;
              turn--;
            }
          } else {
            compRandom();
          }
        }
      }

      function compRandom() {
        randomChoice = Math.floor(Math.random() * 9) + 1;
        if (randomChoice === 1 && X1 === false && O1 === false) {
          document.getElementById("1").innerHTML = "O";
          O1 = true;
          turn--;
        } else if (randomChoice === 2 && X2 === false && O2 === false) {
          document.getElementById("2").innerHTML = "O";
          O2 = true;
          turn--;
        } else if (randomChoice === 3 && X3 === false && O3 === false) {
          document.getElementById("3").innerHTML = "O";
          O3 = true;
          turn--;
        } else if (randomChoice === 4 && X4 === false && O4 === false) {
          document.getElementById("4").innerHTML = "O";
          O4 = true;
          turn--;
        } else if (randomChoice === 5 && X5 === false && O5 === false) {
          document.getElementById("5").innerHTML = "O";
          O5 = true;
          turn--;
        } else if (randomChoice === 6 && X6 === false && O6 === false) {
          document.getElementById("6").innerHTML = "O";
          O6 = true;
          turn--;
        } else if (randomChoice === 7 && X7 === false && O7 === false) {
          document.getElementById("7").innerHTML = "O";
          O7 = true;
          turn--;
        } else if (randomChoice === 8 && X8 === false && O8 === false) {
          document.getElementById("8").innerHTML = "O";
          O8 = true;
          turn--;
        } else if (randomChoice === 9 && X9 === false && O9 === false) {
          document.getElementById("9").innerHTML = "O";
          O9 = true;
          turn--;
        }
      }

 td {
        border: 1px solid black;
        height: 50px;
        width: 50px;
      }

<table>
      <tr>
        <td align="center"><button id="1" onclick="Xon1()">-</button></td>
        <td align="center"><button id="2" onclick="Xon2()">-</button></td>
        <td align="center"><button id="3" onclick="Xon3()">-</button></td>
      </tr>
      <tr>
        <td align="center"><button id="4" onclick="Xon4()">-</button></td>
        <td align="center"><button id="5" onclick="Xon5()">-</button></td>
        <td align="center"><button id="6" onclick="Xon6()">-</button></td>
      </tr>
      <tr>
        <td align="center"><button id="7" onclick="Xon7()">-</button></td>
        <td align="center"><button id="8" onclick="Xon8()">-</button></td>
        <td align="center"><button id="9" onclick="Xon9()">-</button></td>
      </tr>
    </table>

请使用循环数组和对象来创建简短的代码，而无需重复自己。这是带有井字游戏短代码的片段示例。

 const combination = [
         [0, 1, 2],
         [3, 4, 5],
         [6, 7, 8],
         [0, 3, 6],
         [1, 4, 7],
         [2, 5, 8],
         [0, 4, 8],
         [2, 4, 6],
       ];
       const fieldsObj = [
         { id: 0, content: "-" },
         { id: 1, content: "-" },
         { id: 2, content: "-" },
         { id: 3, content: "-" },
         { id: 4, content: "-" },
         { id: 5, content: "-" },
         { id: 6, content: "-" },
         { id: 7, content: "-" },
         { id: 8, content: "-" },
       ];
       const table = document.getElementById("table");
       function buttonHandler(event) {
         fieldsObj[event.target.id].content = "X";
         document.getElementById(event.target.id).innerHTML = "X";
         document.getElementById(event.target.id).disabled = true;
         table.style.zIndex = -1;
         checkWin();
         setTimeout(compMove, 1000);
       }

       function compMove() {
         table.style.zIndex = 1;

         for (let i = 0; i < combination.length; i++) {
           for (let j = 0; j < fieldsObj.length; j++) {
             if (
               (fieldsObj[combination[i][0]].content == "X" && fieldsObj[combination[i][1]].content == "X") ||
               (fieldsObj[combination[i][2]].content == "X" && fieldsObj[combination[i][1]].content == "X") ||
               (fieldsObj[combination[i][2]].content == "X" && fieldsObj[combination[i][0]].content == "X")
             ) {
               for (let k = 0; k < 3; k++) {
                 if (fieldsObj[combination[i][k]].content == "-") {
                   document.getElementById(fieldsObj[combination[i][k]].id).innerHTML = "O";
                   document.getElementById(fieldsObj[combination[i][k]].id).disabled = true;
                   fieldsObj[combination[i][k]].content = "O";
                   checkWin();
                   return;
                }
               }
             }
           }
         }
         let randomIndex = [];
         for (let i = 0; i < fieldsObj.length; i++) {
           if (fieldsObj[i].content === "-") {
             randomIndex.push(i);
           }
         }
         if (randomIndex.length <= 0) {
             document.getElementById("info").innerHTML = "End game";
           return;
         }
         let rnd = Math.floor(Math.random() * randomIndex.length);

         document.getElementById(fieldsObj[randomIndex[rnd]].id).innerHTML = "O";
         document.getElementById(fieldsObj[randomIndex[rnd]].id).disabled = true;
         fieldsObj[randomIndex[rnd]].content = "O";
         checkWin();
       }

      function checkWin() {
         for (let i = 0; i < combination.length; i++) {
           for (let j = 0; j < fieldsObj.length; j++) {
             if (
               fieldsObj[combination[i][0]].content == "X" && fieldsObj[combination[i][1]].content == "X" && fieldsObj[combination[i][2]].content == "X"
             ) {
                document.getElementById("info").innerHTML = "You Win!";
             }
            else if (
               fieldsObj[combination[i][0]].content == "O" && fieldsObj[combination[i][1]].content == "O" && fieldsObj[combination[i][2]].content == "O"
             ) {
                document.getElementById("info").innerHTML = "You Lose!";
             }
           }
         }
        }

  table {
        position: relative;
      }
      td {
        border: 1px solid black;
        height: 50px;
        width: 50px;
        align-content: center;
        font-weight: bold;
      }
      td button {
        display: flex;
        justify-content: center;
        margin: auto;
        width: 100%;
        height: 100%;
        align-items: center;
      }

<table id="table">
      <tr>
        <td><button id="0" onclick="buttonHandler(event)">-</button></td>
        <td><button id="1" onclick="buttonHandler(event)">-</button></td>
        <td><button id="2" onclick="buttonHandler(event)">-</button></td>
      </tr>
      <tr>
        <td><button id="3" onclick="buttonHandler(event)">-</button></td>
        <td><button id="4" onclick="buttonHandler(event)">-</button></td>
        <td><button id="5" onclick="buttonHandler(event)">-</button></td>
      </tr>
      <tr>
        <td><button id="6" onclick="buttonHandler(event)">-</button></td>
        <td><button id="7" onclick="buttonHandler(event)">-</button></td>
        <td><button id="8" onclick="buttonHandler(event)">-</button></td>
      </tr>
    </table>
     <div id="info"></div>