我正在尝试用纯 JavaScript 构建一个 tic-tac-toe 游戏。
我需要的是以下内容:我需要代码来检查每个方 block ，看看它是否填充了 X或O 。如果方 block 仍然可用，则无需发出警报，但如果所有方 block 都已填满，我需要它发出警报“不再移动!”。
我已经启动了功能checkEmpty .
这是我到目前为止得到的代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tic Tac Toe</title>
<style>
td {
border: 1px solid black;
height: 250px;
width: 250px;
font-family: sans-serif;
font-size: 150pt;
text-transform: uppercase;
}
</style>
</head>
<body>
<table>
<tr>
<td align="center" id="square1" onclick="displayMarker('square1');"></td>
<td align="center" id="square2" onclick="displayMarker('square2');"></td>
<td align="center" id="square3" onclick="displayMarker('square3');"></td>
</tr>
<tr>
<td align="center" id="square4" onclick="displayMarker('square4');"></td>
<td align="center" id="square5" onclick="displayMarker('square5');"></td>
<td align="center" id="square6" onclick="displayMarker('square6');"></td>
</tr>
<tr>
<td align="center" id="square7" onclick="displayMarker('square7');"></td>
<td align="center" id="square8" onclick="displayMarker('square8');"></td>
<td align="center" id="square9" onclick="displayMarker('square9');"></td>
</tr>
</table>
<script>
forLoop();
var cp1 = 1;
function displayMarker(allSquares) {
if (document.getElementById(allSquares).innerHTML != "") {
alert("Choose another square");
}
else {
if (cp1 == 1) {
document.getElementById(allSquares).innerHTML = "X";
cp1 = 2;
}
else {
document.getElementById(allSquares).innerHTML = "O";
cp1 = 1;
}
}
checkEmpty();
}
function checkEmpty() {
var checkForEmpty = false;
for (var i = false; i != true;)
</script>
</body>
</html>
最佳答案
试试这个:
var cp1 = 1;
function displayMarker(allSquares) {
if (document.getElementById(allSquares).innerHTML != "") {
alert("Choose another square");
}
else {
if (cp1 == 1) {
document.getElementById(allSquares).innerHTML = "X";
cp1 = 2;
}
else {
document.getElementById(allSquares).innerHTML = "O";
cp1 = 1;
}
}
if(checkEmpty()) alert ("Done");
}
function checkEmpty() {
var allFilled = true;
var elements = document.getElementsByTagName("td");
for (var i = 0; i < elements.length; i++) {
if (elements[i].innerHTML.length < 1) allFilled = false;
}
return allFilled;
}
它迭代所有 <td>并检查其内容长度。如果是< 1 ，它将设置 allEmpty = false 。您可以直接返回 false 和 true，而不需要额外的变量，尽管我认为这可能更容易理解。玩得开心!
关于javascript - 井字游戏 : Checking Empty Squares，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34644850/