Question

我正在构建井字游戏，我试图使用if if 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，所以我所有的获胜条件变量都是null。只需将变量移到checkwin（）函数即可刷新它们。

逻辑/布尔运算符如何在if else if语句中工作？

2 个答案: