Question

我正在尝试为一个项目制作一个简单的井字游戏。我的问题是我不明白如何重置游戏才能玩新游戏。我可以使用按钮成功清除棋盘，我想使用此按钮重置游戏。该按钮与“btnClear”的输入 ID 相关联。提前致谢。

$(function(){

    var o = "<img src='o.png'/>";
    var x = "<img src='x.png'/>";
    var player = 1;
    var p1Arr = new Array();
    var p2Arr = new Array();

    function win(currentPlayer){
        currentPlayer = currentPlayer.sort();
        

        if(currentPlayer.includes("td0") && currentPlayer.includes("td1") && currentPlayer.includes("td2")){

            alert("Player " + player + " is the winner!!")
            $("td").unbind("click");
            $("#td3").empty();
            $("#td4").empty();
            $("#td5").empty();
            $("#td6").empty();
            $("#td7").empty();
            $("#td8").empty();

        } else if(currentPlayer.includes("td0") && currentPlayer.includes("td3") && currentPlayer.includes("td6")){

            alert("Player " + player + " is the winner!!")
            $("td").unbind("click");
            $("#td1").empty();
            $("#td2").empty();
            $("#td4").empty();
            $("#td5").empty();
            $("#td7").empty();
            $("#td8").empty();

        } else if(currentPlayer.includes("td0") && currentPlayer.includes("td4") && currentPlayer.includes("td8")){

            alert("Player " + player + " is the winner!!")
            $("td").unbind("click");
            $("#td1").empty();
            $("#td2").empty();
            $("#td3").empty();
            $("#td5").empty();
            $("#td6").empty();
            $("#td7").empty();
            
        } else if(currentPlayer.includes("td3") && currentPlayer.includes("td4") && currentPlayer.includes("td5")){

            alert("Player " + player + " is the winner!!")
            $("td").unbind("click");
            $("#td0").empty();
            $("#td1").empty();
            $("#td2").empty();
            $("#td6").empty();
            $("#td7").empty();
            $("#td8").empty();
            
        } else if(currentPlayer.includes("td6") && currentPlayer.includes("td7") && currentPlayer.includes("td8")){

            alert("Player " + player + " is the winner!!")
            $("td").unbind("click");
            $("#td0").empty();
            $("#td1").empty();
            $("#td2").empty();
            $("#td3").empty();
            $("#td4").empty();
            $("#td5").empty();
            
        } else if(currentPlayer.includes("td1") && currentPlayer.includes("td4") && currentPlayer.includes("td7")){

            alert("Player " + player + " is the winner!!")
            $("td").unbind("click");
            $("#td0").empty();
            $("#td2").empty();
            $("#td3").empty();
            $("#td5").empty();
            $("#td6").empty();
            $("#td8").empty();
            
        } else if(currentPlayer.includes("td2") && currentPlayer.includes("td5") && currentPlayer.includes("td8")){

            alert("Player " + player + " is the winner!!")
            $("td").unbind("click");
            $("#td0").empty();
            $("#td1").empty();
            $("#td3").empty();
            $("#td4").empty();
            $("#td6").empty();
            $("#td7").empty();
            
        } else if(currentPlayer.includes("td2") && currentPlayer.includes("td4") && currentPlayer.includes("td6")){

            alert("Player " + player + " is the winner!!")
            $("td").unbind("click");
            $("#td0").empty();
            $("#td1").empty();
            $("#td3").empty();
            $("#td5").empty();
            $("#td7").empty();
            $("#td8").empty();
            
        }

    }

    $("td").click(function(){
        
        if(player == 1){
            $(this).html(x);
            $(this).unbind("click");
            p1Arr.push(this.id);
            win(p1Arr);
            player = 2;
        } else {
            $(this).html(o);
            $(this).unbind("click");
            p2Arr.push(this.id);
            win(p2Arr);
            player = 1;
        }
    })

        $("#btnClear").click(function(){
        
            $("#td0").empty();
            $("#td1").empty();
            $("#td2").empty();
            $("#td3").empty();
            $("#td4").empty();
            $("#td5").empty();
            $("#td6").empty();
            $("#td7").empty();
            $("#td8").empty();

        });
    
})

Answer 1

当您点击按钮时，您会重置电路板而不是变量。您需要做的就是将变量设置为其原始值，然后再次将 onclick 函数绑定到按钮。顺便说一句，代码肯定可以写得更好（例如复制 onclick 函数 - 我相信你可以只调用一个预定义的函数）但是我对 jQuery 的了解不是那么好，我不想误导你。

$("td").click(() => {
    if (player == 1){
        $(this).html(x);
        $(this).unbind("click");
        p1Arr.push(this.id);
        win(p1Arr);
        player = 2;
    } else {
        $(this).html(o);
        $(this).unbind("click");
        p2Arr.push(this.id);
        win(p2Arr);
        player = 1;
    }
});

$("#btnClear").click(function() {
    for (let i = 0; i < 9; i++)
        $("#td" + i).empty();

    $("td").click(() => {
        if (player == 1){
            $(this).html(x);
            $(this).unbind("click");
            p1Arr.push(this.id);
            win(p1Arr);
            player = 2;
        } else {
            $(this).html(o);
            $(this).unbind("click");
            p2Arr.push(this.id);
            win(p2Arr);
            player = 1;
        }
    });

    player = 1;
    p1Arr = new Array();
    p2Arr = new Array();
});

Answer 2

在我提交第一个答案后，我想到您可以再次调用该函数。我想让这个答案简短一些，因此您必须将不带 #btnClear onclick 函数的函数的原始代码粘贴到单行注释所在的位置。

function game() {
    // Paste your original function code here but with this #btnClear onclick function:
    $("#btnClear").click(function() {
        for (let i = 0; i < 9; i++)
            $("#td" + i).empty();

        return game();
    });
}

$(function() { game(); });

在 Javascript 中重置井字游戏

2 个答案: