Question

我正在尝试用简单的香草Javascript构建一个井字游戏，所以我希望我们能够保持简单的Javascript界限。不要优化代码，试着努力学习！

我需要的是：在填满所有方格后，会出现一个警告框“所有方块都已填满！” ＆lt; - 这部分已经完成。用户单击“确定”框后，会在电路板底部显示一个重置按钮。此重置按钮将重置电路板，以便再次播放游戏。单击重置按钮后，电路板应重置，重置按钮应消失。

我已经启动了名为'function resetButton'的函数。如果您需要进一步说明，请告知。

谢谢！

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

<!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 (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 anyEmpty = false;
            for (var i = 1; i <= 9; i++) {
                if (document.getElementById('square' + i).innerHTML == "") {
                   anyEmpty = true;
                }
            }

            if (!anyEmpty)
                alert("All squares filled!");

             resetButton();
        }

        function resetButton() {

            var button = document.createElement("button");
            button.innerHTML = "Reset";



            button.addEventListener("click", function () {
                alert("Board Reset");
            });
        }
    </script>
</body>
</html>

Answer 1

尝试这样的事情......

button.addEventListener("click", function () {
    var tds = document.getElementsByTagName('td');
    for(var i = 0; i < tds.length; i++) {
        tds[i].innerHTML = ''
    }
});

在Tic-Tac-Toe上重置板

1 个答案: