javascript - TicTacToe 中的重置和领带功能问题

Question

我构建了一个简单的井字游戏并且运行良好。我想实现一个重置按钮和一个领带功能，但我似乎无法围绕它包装我的代码。

我知道使用 location.reload 重置很容易，但我不知道在我的 jquery 中将它包装在哪里。

我也对在我的函数中返回领带感到困惑。这是我的代码

<div id = "gameboard">
  <div class= "row">
    <div class = "square bottom right sq1"></div>
    <div class = "square bottom right sq2"></div>
    <div class = "square bottom sq3"></div>
  </div>
  <div class= "row">
    <div class = "square bottom right sq4"></div>
    <div class = "square bottom right sq5"></div>
    <div class = "square bottom sq6"></div>
  </div>
  <div class= "row">
    <div class = "square right sq7"></div>
    <div class = "square right sq8"></div>
    <div class = "square sq9"></div>
  </div>
  <button type ="reset">reset</button>
</div>

</body>

<script>
//use doc.ready to wrap functions after page loads
$(document).ready(function(){
    //create a player 1 to test
    var player = 1;

    //make a click event for the class sqaures
    $('.square').on("click", function(event){

        //store the square class into $(this)
        var squareSelected = $(this);
        //make an if else statenent that adds the class "x" || "o" to your html to show it has been selected
        if(squareSelected.hasClass("fa fa-times fa-4x") || squareSelected.hasClass("fa fa-circle-o fa-4x")){
            alert("you have clicked here already!")
        } else {
            //when square has been selected by player 1 set the player to 2;vice versa
            if(player===1){
                squareSelected.addClass("fa fa-times fa-4x");
                if (checkWin("fa fa-times fa-4x")){
                    alert("Congrats! Player " + player + " has WON!")
                } else {
                player = 2;
                }
            } else {
                squareSelected.addClass("fa fa-circle-o fa-4x");
                if (checkWin("fa fa-circle-o fa-4x")){
                    alert("Congrats! Player " + player + " has WON!")
                } else {
                player = 1;

                }
            }
        }
    });

    //check if player won
    //if player has 3 across,3 up/down, or 3 diagnal they win
    function checkWin(symbol){
        if($(".sq1").hasClass(symbol) && $(".sq2").hasClass(symbol) && $(".sq3").hasClass(symbol)){
            return true
        } else if($(".sq4").hasClass(symbol) && $(".sq5").hasClass(symbol) && $(".sq6").hasClass(symbol)){
            return true
        } else if($(".sq7").hasClass(symbol) && $(".sq8").hasClass(symbol) && $(".sq9").hasClass(symbol)){
            return true
        } else if($(".sq1").hasClass(symbol) && $(".sq4").hasClass(symbol) && $(".sq7").hasClass(symbol)){
            return true
        } else if($(".sq2").hasClass(symbol) && $(".sq5").hasClass(symbol) && $(".sq8").hasClass(symbol)){
            return true
        } else if($(".sq3").hasClass(symbol) && $(".sq6").hasClass(symbol) && $(".sq9").hasClass(symbol)){
            return true
        } else if($(".sq1").hasClass(symbol) && $(".sq5").hasClass(symbol) && $(".sq9").hasClass(symbol)){
            return true
        } else if($(".sq3").hasClass(symbol) && $(".sq5").hasClass(symbol) && $(".sq7").hasClass(symbol)){
            return true
        } else {
            return false;
        }
    }
</script>

Answer 1

您可以通过此测试检查平局:

$(".fa-times, .fa-circle-o").length == 9

在 if (checkWin(...)) 语句的 else block 中执行该测试。

清理棋盘:

$(".square").removeClass("fa-times fa-circle fa fa-4x");

您可以将其放入“重置”按钮的点击处理程序中。

还有一些其他的改进可以应用于您的代码:

• 避免在玩家为 1 或 2 的情况下重复代码:为要添加的类使用变量，并将 player 值切换为 player = 3 - player
• 通过使用 return 在没有更多事情发生时退出函数来扁平化您的代码
• 从一开始(在 HTML 中)就将 fa 和 fa-4x 应用到每个方 block ，因此您无需再在您的代码。
• 删除 sq1、sq2... 类，因为您可以使用 $('.square').get( i) jQuery 方法
• 使用 .is() 在一次调用中检查多个类
• 使用 some 和 every 数组方法来缩短代码以测试是否获胜。
• 添加测试，以便用户在游戏已经获胜后无法继续点击。

这是应用这些更改后的代码。请注意，我已经为这个片段缩小了网格(通过更改 square 的 CSS，并使用 fa-2x 而不是 fa-4x ):

// In HTML: already assign classes fa and fa-4x, so you don't need to manage
//          those anymore.
$(document).ready(function(){
    var player = 1;
    // Define the classes that are used for the two symbols
    var symbols = ['fa-times', 'fa-circle-o'];
    // Get collection of the 9 squares
    var $squares = $(".square");
    // Set the filter to be used to identify occupied square(s)
    var occupied = "." + symbols.join(", .");

    $('.square').on("click", function(event){
        // Add a test to avoid play continues after game already ended
        if (!player) {
            alert("Game is already over. Click reset to start a new game.")
            return;
        }
        var squareSelected = $(this);
        // Use .is() for shorter syntax, only testing two classes
        if(squareSelected.is(occupied)){
            alert("you have clicked here already!");
            return; // Exit, to make rest of code more flat
        }
        // Get name of class to use:
        var symbol = symbols[player-1];
        squareSelected.addClass(symbol);
        if (checkWin(symbol)){
            alert("Congrats! Player " + player + " has WON!");
            player = 0; // Avoid that play continues in this state.
            return; // Exit, to make rest of code more flat
        }
        // Test for a tie
        if ($squares.filter(occupied).length == 9) {
            alert("Game over. It is a tie.");
            player = 0; // Avoid that play continues in this state.
            return;
        }
        // Toggle player between 1 and 2:
        player = 3 - player;
    });

    function checkWin(symbol){
        // Use more generic & functional code to test for 3-in-a-row 
        var lines = [
            [0, 1, 2], [3, 4, 5], [6, 7, 8],
            [0, 3, 6], [1, 4, 7], [2, 5, 8],
            [0, 4, 8], [2, 4, 6]
        ];
        // Return whether some of the lines have the symbol in every cell 
        return lines.some(function (line) {
            return line.every(function (i) {
                return $squares.eq(i).hasClass(symbol);
            });
        });
    }
    
    $('#reset').click(function reset() {
        player = 1;
        // Remove all symbols
        $(".square").removeClass(symbols.join(" "));
    });
});

@import url("https://fonts.googleapis.com/css?family=Lobster");
body {
    background-color: #21c6be;
}

h1 {
    font-family: "Lobster", cursive;
    text-align: center;
    color: #c621b3;
    background-color: #236d72;
}

#gameboard {
    width: 360px;
    margin: 20px auto 0 auto;
}

.row {
    clear: both;
    overflow: hidden;
}

.square {
    float: left;
    width: 60px;
    height: 40px;
    cursor: crosshair;
    text-align: center;
    padding-top: 20px;
}

.bottom {
    border-bottom: 1px solid black;
}

.right {
    border-right: 1px solid black;
}

button {
    color: #c621b3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/703129f3e9.js"></script>

<!--<h1>Tic-Tac-Toe</h1>-->
<div id = "gameboard">
  <div class= "row">
    <div class = "square fa fa-2x bottom right"></div>
    <div class = "square fa fa-2x bottom right"></div>
    <div class = "square fa fa-2x bottom"></div>
  </div>
  <div class= "row">
    <div class = "square fa fa-2x bottom right"></div>
    <div class = "square fa fa-2x bottom right"></div>
    <div class = "square fa fa-2x bottom"></div>
  </div>
  <div class= "row">
    <div class = "square fa fa-2x right"></div>
    <div class = "square fa fa-2x right"></div>
    <div class = "square fa fa-2x"></div>
  </div>
  <button id ="reset" type ="reset">reset</button>
</div>