Question

我正在努力用简单的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>

Answer 1

试试这个：

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，而不需要额外的变量，尽管我认为这可能更容易理解。玩得开心！

Answer 2

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

<!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>

Tic-Tac-Toe：检查空方块

2 个答案: