Tic-Tac Toe:检查空方

Tic-Tac-Toe: Checking Empty Squares

本文关键字：检查 Toe Tic-Tac      更新时间：2023-09-26

我正在尝试用简单的JavaScript构建一个井字游戏。

我需要的是以下内容：我需要检查每个正方形的代码，看看它是用X还是O填充的。如果方块仍然可用，不需要提醒，但如果所有方块都已填充，我需要提醒"不再移动！"。

我已经启动了函数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，而不需要额外的变量，尽管我认为这可能更容易理解。玩得高兴

我花了一些时间改进了您的代码。这是我的结果：

<!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" class="square" onclick="setMarker(0);"></td>
            <td align="center" class="square" onclick="setMarker(1);"></td>
            <td align="center" class="square" onclick="setMarker(2);"></td>
        </tr>
        <tr>
            <td align="center" class="square" onclick="setMarker(3);"></td>
            <td align="center" class="square" onclick="setMarker(4);"></td>
            <td align="center" class="square" onclick="setMarker(5);"></td>
        </tr>
        <tr>
            <td align="center" class="square" onclick="setMarker(6);"></td>
            <td align="center" class="square" onclick="setMarker(7);"></td>
            <td align="center" class="square" onclick="setMarker(8);"></td>
        </tr>
    </table>
    <script>
        var currentPlayer = true; // Only 2 Players, so boolean will do
        var fields = document.getElementsByClassName ("square"); // Get all fields
        function setMarker (fieldIndex) {
            // Grab the clicked field by it's index
            var clickedField = fields[fieldIndex];
            // Does the fields textContent have a length? -> It has a value
            if (clickedField.textContent.length > 0) {
                alert ("Choose another square");
                return;
            }
            // Decide based on the currentPlayer value if O or X is set. This construct is called ternary operator
            clickedField.textContent = (currentPlayer) ? "O" : "X";   
            // Switch the boolean
            currentPlayer = !currentPlayer;
            // Check the fields
            if(allFieldsSet ()) alert ("Game is done");
        }
        function allFieldsSet () {
            // Iterate through fields, return false if we find an empty value
            for (var i = 0; i < fields.length; i++) if (fields[i].textContent.length == 0) return false;        
            // Not returned yet, therefore we did not find an empty value -> return true
            return true;
       }
    </script>
</body>
</html>
相关文章：