turn_counter 不重置 jquery

Question

我正在尝试构建一个 jQuery 井字游戏。我将粘贴整个内容，因此您只需使用 1 个文件。我遇到的问题是，在每个 win/tie 之后，clearboard() 函数需要重置棋盘以及上一个游戏中分配的所有类。现在它在技术上是正确的，但只有 1 轮，一旦第 2 轮到来，整个程序开始出现故障，它开始增加 2，然后开始新游戏类已经添加并且计数器已经增加.

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8" />
        <title>jQuery Tic-Tac-Toe</title>
        <meta name="description" content="Simple Tic-Tac-Toe game built using HTML5, JavaScript, jQuery, and CSS." />
        <meta name="keywords" content="tic-tac-toe, game, html5, javascript, jquery, css" />
        <meta name="viewport" content="width = device-width" />
        <style type="text/css">
        body {
            font-size: 1.5em;
            font-family: Helvetica, Arial;
            text-align: center;
            font-weight: italic;
        }
        @media screen and (max-width: 800px) {
            body {
                font-size: 1.3em;
            }
        }
        @media screen and (max-width: 700px) {
            body {
                font-size: 1.1em;
            }
        }
        @media screen and (max-width: 550px) {
            body {
                font-size: 0.8em;
            }
        }
        table {
            margin: 0 auto;
            cursor: default;
            border-spacing: 0;
            width: 23em;
            height: 30em;
        }
        td {
            padding: 0;
            width: 33.3%;
            height: 33.3%;
            font-size: 8em;
            text-align: center;
        }
        table, td { /* by giving both a 1px border, everything gets a 2px border on all sides */
            border: 1px solid red;
        }
        body, td:hover {
            cursor: pointer;
            background-color: gray;
        }
        body, td.taken:hover {
            cursor: default;
            background-color: inherit;
        }
        td.win {
            background-color: blue;
        }
        </style>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script type="text/javascript">
            // JQuery starts here.......
            $(document).ready(function(){
                var turn_counter = 0;
                var xWins = 0;
                var oWins = 0;
                var ties = 0;
                clearBoard();

                function move(){
                    $(this).off('click');

                    if(turn_counter % 2 == 0) 
                    {
                        $(this).text("x");
                        $(this).addClass("x");
                    } else if(turn_counter % 2 != 0)
                    {
                        $(this).text("o");
                        $(this).addClass("o");
                    };

                    check_board();
                    showScores();
                    turn_counter++;
                    console.log(turn_counter);
                }

                function showScores(){
                    $('#xWins').text(xWins);
                    $('#oWins').text(oWins);
                    $('#ties').text(ties);
                }

                function check_board(){
                    if(turn_counter === 9){
                        alert("It's a TIE!!!");
                        ties++;
                        turn_counter = 0;
                        clearBoard();
                    } else if (
                        $('#1').hasClass('x') && $('#2').hasClass('x') && $('#3').hasClass('x') ||
                        $('#4').hasClass('x') && $('#5').hasClass('x') && $('#6').hasClass('x') ||
                        $('#7').hasClass('x') && $('#8').hasClass('x') && $('#9').hasClass('x') ||
                        $('#1').hasClass('x') && $('#4').hasClass('x') && $('#7').hasClass('x') ||
                        $('#2').hasClass('x') && $('#5').hasClass('x') && $('#8').hasClass('x') ||
                        $('#3').hasClass('x') && $('#6').hasClass('x') && $('#9').hasClass('x') ||
                        $('#1').hasClass('x') && $('#5').hasClass('x') && $('#9').hasClass('x') ||
                        $('#3').hasClass('x') && $('#5').hasClass('x') && $('#7').hasClass('x'))
                    {
                            alert("Player X has won!!!");
                            xWins++;
                            turn_counter = 0;
                            clearBoard();
                    } else if (
                        $('#1').hasClass('o') && $('#2').hasClass('o') && $('#3').hasClass('o') ||
                        $('#4').hasClass('o') && $('#5').hasClass('o') && $('#6').hasClass('o') ||
                        $('#7').hasClass('o') && $('#8').hasClass('o') && $('#9').hasClass('o') ||
                        $('#1').hasClass('o') && $('#4').hasClass('o') && $('#7').hasClass('o') ||
                        $('#2').hasClass('o') && $('#5').hasClass('o') && $('#8').hasClass('o') ||
                        $('#3').hasClass('o') && $('#6').hasClass('o') && $('#9').hasClass('o') ||
                        $('#1').hasClass('o') && $('#5').hasClass('o') && $('#9').hasClass('o') ||
                        $('#3').hasClass('o') && $('#5').hasClass('o') && $('#7').hasClass('o'))
                    {
                            alert("Player O has won!!!");
                            oWins++;
                            turn_counter = 0;
                            clearBoard();
                    }
                }

                function clearBoard(){
                    showScores();
                    $("td").text('')
                    $("td").removeAttr('class');
                    $("td").on('click', move);
                    turn_counter = 0;
                }
            });
        </script>
    </head>
    <body>
        <h1>Welcome!!!!</h1>
        <h2>jQuery Tic-Tac-Toe</h2>
        <p>Score: <span id="xWins"></span> - <span id="oWins"></span><br>Tie Count: <span id="ties"></span></p>
        <table>
            <caption>Match Arena</caption>
            <tr>
                <td id="1"></td>
                <td id="2"></td>
                <td id="3"></td>
            </tr>
            <tr>
                <td id="4"></td>
                <td id="5"></td>
                <td id="6"></td>
            </tr>
            <tr>
                <td id="7"></td>
                <td id="8"></td>
                <td id="9"></td>
            </tr>
        </table>
    </body>
</html>

Answer 1

问题是 move 函数中函数调用的顺序。如果一个玩家赢了，你从 check_board 调用 clearBoard 然后直接通过 move 中的 turn_counter++ 增加 turn_counter 即使没有新的移动发生了。

此外，某些字段可能具有双击处理程序，因为您只是在单击的字段上删除它们。如果在上一轮中未单击某个字段，则它会附加两个处理程序。您可以通过在 clearBoard 中调用 off 来防止这种情况像那样：$("td").off('click').on('click', move);.

我做了一个 fiddle 并试图解决这些问题：http://jsfiddle.net/qpfc455w/

turn_counter 不重置 jquery

turn_counter does not reset jquery

javascript

jquery

increment