Question

我正在努力用简单的香草Javascript构建一个井字游戏，所以我希望我们能够保持它的香草。

我需要的是：如果一个正方形已经被“X”或“O”点击/占用，则该正方形无法被覆盖并出现警告/弹出窗口并表示选择另一个正方形

感谢您的帮助和时间！

这是我到目前为止的代码：

<!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>
        var cp1 = 1;

        function displayMarker(allSquares) {

            if (cp1==1) {
                document.getElementById(allSquares).innerHTML = "X";
                cp1 = 2;
            }

            else {
                document.getElementById(allSquares).innerHTML = "O";
                cp1 = 1;
            }

    }
    </script>
</body>
</html>

Answer 1

检查方块的值（innerHTML）是否为空。在这种情况下，从功能发出警报并返回。

function displayMarker(allSquares) {
    var square = document.getElementById(allSquares);
    if (square.innerHTML.trim() != "") {
        return alert("Choose another square");
    }
    // ...

Tic-Tac-Toe：Sqaure不能被覆盖

1 个答案: