logical/boolean 运算符如何在 if else if 语句中工作？

Question

我正在构建一个井字游戏，我正在尝试使用 if else if 语句来表示我的获胜条件。我已经为我的条件尝试了几种不同的方法。这是我的所有编码：

var Box1=document.getElementById("box1"); //getting the grid spots and putting them into variables
var Box2=document.getElementById("box2");
var Box3=document.getElementById("box3");
var Box4=document.getElementById("box4");
var Box5=document.getElementById("box5");
var Box6=document.getElementById("box6");
var Box7=document.getElementById("box7");
var Box8=document.getElementById("box8");
var Box9=document.getElementById("box9");
var a1=document.getElementById("box1").innerHTML; //getting the innerHTML of the grid spots to check for x or o later
var a2=document.getElementById("box2").innerHTML;
var a3=document.getElementById("box3").innerHTML;
var a4=document.getElementById("box4").innerHTML;
var a5=document.getElementById("box5").innerHTML;
var a6=document.getElementById("box6").innerHTML;
var a7=document.getElementById("box7").innerHTML;
var a8=document.getElementById("box8").innerHTML;
var a9=document.getElementById("box9").innerHTML;
var playerchar="x"; //setting the first player as x

Box1.addEventListener("click", box1); //adding click event for when grid spot 1, 1 is clicked
function box1() {
 Box1.innerHTML=playerchar; //Setting the innerHTML of the clicked grid spot 
 Box1.removeEventListener("click", box1);// removing click event
 checkwin(); // check for a win condition
 if(playerchar=="x") { // 
  playerchar="o"; //if the last turn was an x then change it to o.
 }
 else if(playerchar=="o") {
  playerchar="x"; //if the last turn was o then change it to x.
 }
}

Box2.addEventListener("click", box2);
function box2() {
 Box2.innerHTML=playerchar;
 Box2.removeEventListener("click", box2);
 checkwin();
 if(playerchar=="x") {
  playerchar="o";
 }
 else if(playerchar=="o") {
  playerchar="x";
 }
 
}

Box3.addEventListener("click", box3);
function box3() {
 Box3.innerHTML=playerchar;
 Box3.removeEventListener("click", box3);
 checkwin();
 if(playerchar=="x") {
  playerchar="o";
 }
 else if(playerchar=="o") {
  playerchar="x";
 }
}

Box4.addEventListener("click", box4);
function box4() {
 Box4.innerHTML=playerchar;
 Box4.removeEventListener("click", box4);
 checkwin();
 if(playerchar=="x") {
  playerchar="o";
 }
 else if(playerchar=="o") {
  playerchar="x";
 }
}

Box5.addEventListener("click", box5);
function box5() {
 Box5.innerHTML=playerchar;
 Box5.removeEventListener("click", box5);
 checkwin();
 if(playerchar=="x") {
  playerchar="o";
 }
 else if(playerchar=="o") {
  playerchar="x";
 }
}

Box6.addEventListener("click", box6);
function box6() {
 Box6.innerHTML=playerchar;
 checkwin();
 Box6.removeEventListener("click", box6)
 if(playerchar=="x") {
  playerchar="o";
 }
 else if(playerchar=="o") {
  playerchar="x";
 }
}

Box7.addEventListener("click", box7);
function box7() {
 Box7.innerHTML=playerchar;
 Box7.removeEventListener("click", box7);
 checkwin();
 if(playerchar=="x") {
  playerchar="o";
 }
 else if(playerchar=="o") {
  playerchar="x";
 }
}

Box8.addEventListener("click", box8);
function box8() {
 Box8.innerHTML=playerchar;
 Box8.removeEventListener("click", box8);
 checkwin();
 if(playerchar=="x") {
  playerchar="o";
 }
 else if(playerchar=="o") {
  playerchar="x";
 }
}

Box9.addEventListener("click", box9);
function box9() {
 Box9.innerHTML=playerchar;
 Box9.removeEventListener("click", box9);
 checkwin();
 if(playerchar=="x") {
  playerchar="o";
 }
 else if(playerchar=="o") {
  playerchar="x";
 }
}
function checkwin() {
 if(a1==a2 && a1==a3 && a1=="x" || a1=="o") { //check for win with top row
  quit(); //function for what happens when someone wins
 }
 else if(a4==a5 && a4==a6 && a4=="x" || a4=="o") { // check for win with second row
  quit();
 }
 else if(a7==a8 && a7==a9 && a7=="x" || a7=="o") { //check for win with third row
  quit();
 }
 else if(a1==a4 && a1==a7 && a1=="x" || a1=="o") {// check for win with first column
  quit();
 }
 else if(a2==a5 && a2==a8 && a2=="x" || a2=="o") {//check for win with second column
  quit();
 }
 else if(a3==a6 && a3==a9 && a3=="x" || a3=="o") { // check for win with third column
  quit();
 }
 else if((a1 == 'x' || a1 == 'o') && a1==a5 || a1==a9) { //check for win from top left to bottom right
      quit();
 }
 else if((a3==a5 && a3==a7) && (a3=="x" || a3=="o")) { // check for win from top right to bottom left
  quit();
 }
}
function quit() {
 alert("Someone won");
}

#container {
 cell-spacing: 0px;
 border-spacing: 0px;
 margin: 30px ;
 border-collapse: separate;
}
table tr td {
 width: 40px;
 height: 40px;
 border: 2px solid black;
 font-size: 35px;
 text-align: center;
 cursor: pointer;
}
#container tr:first-child td
    border-top: none
}

#container tr:last-child td
    border-bottom: none
}

#container tr td:first-child
    border-left: none;
}

#container tr td:last-child
    border-right: none;
}

 <title>TicTacToe</title>
</head>
<body>
 <h2> Player 1 is x</h2>
 <h2>Player 2 is o</h2>
 <div id="container">
  <table>
   <tr>
    <td id="box1"></td>
    <td id="box2"></td>
    <td id="box3"></td>
   </tr>
   <tr>
    <td id="box4"></td>
    <td id="box5"></td>
    <td id="box6"></td>
   </tr>
   <tr>
    <td id="box7"></td>
    <td id="box8"></td>
    <td id="box9"></td>
   </tr>
  </table>
 </div>
</body>
<script type="text/javascript" src="TicTacToe.js"></script>
</html>

因此，当玩家点击尚未点击的 td 之一时，它会获取玩家角色并将其放入 td 的 innerHTML 中。然后将玩家角色更改为相反的值。如何让 checkwin() 函数检查 x 或 o 的所有 8 个可能的获胜条件。

Answer 1

所以您想测试 A1、A5 和 A9 是否都包含相同的字符（"x" 或 "o"）并退出.否则，如果 A3、A5 和 A7 都包含相同的字符（"x" 或 "o"）然后退出？像您发布的代码之类的东西应该可以正常工作。

else if((a1 == 'x' || a1 == 'o') && a1==a5 && a1==a9) {
    quit();
}
else if((a3 == 'x' || a3 == 'o') && a3==a5 && a3==a7) {
    quit();
}

Answer 2

我发现我做错了什么。我的 a1-a9 变量在被点击之前得到了 innerHTML，所以我所有的获胜条件变量都是空的。只需将变量移至 checkwin() 函数即可刷新它们。

logical/boolean 运算符如何在 if else if 语句中工作？

How logical/boolean operators work in an if else if statement?

javascript

tic-tac-toe