javascript - 如何在 jquery 中创建玩家回合？

Question

我写这篇文章是为了获得有关使用 JQuery 在玩家之间传递的帮助。我目前正在设计一款有四名玩家的多米诺骨牌游戏。我当前的版本一直工作到最后，但最后四 block 变得非常滞后。我确定这是由于 playTurn 函数中的递归造成的。我尝试过使用事件，但这对我来说效果不佳。我的问题是您是否知道如何使用 JQuery 创建更好的游戏循环。我想使用 JQuery 完成这个游戏的基础知识，但任何有关更好路径的建议将不胜感激。代码如下。

附注游戏还远未完成，但我非常希望在继续之前解决这个问题。我也是 javascript 的初学者。感谢您的帮助。

编辑:在 stackover flow 用户的一些修补和帮助之后，我意识到我的 playTurn 函数中的 addDominoToBoard 函数是延迟的主要原因。关于如何更好地重画我的板的任何建议。再一次感谢你。

var makeBoard = function(){
    var totalkeys = [
                        [0,0],[0,1],[0,2],[0,3],[0,4],[0,5],[0,6],
                        [1,1],[1,2],[1,3],[1,4],[1,5],[1,6],
                        [2,2],[2,3],[2,4],[2,5],[2,6],
                        [3,3],[3,4],[3,5],[3,6],
                        [4,4],[4,5],[4,6],
                        [5,5],[5,6],
                        [6,6]
                    ];
    return totalkeys;
}

var randomInt = function(min,max)
{
    return Math.floor(Math.random()*(max-min)+min);
}

var makeHand = function(board){
    var hand = [];
    for(x = 0;x<7;x++){
        var ranInt = randomInt(0,board.length);
        var key = board[ranInt];
        hand.push(key);
        board.splice(ranInt,1);
    }
    return hand;
}

var hideItems = function(){
    if($("#player1").hasClass('first')){
        $("#player2").hide();
        $("#player3").hide();
        $("#player4").hide();
    }else if ($("#player2").hasClass('first')){
        $("#player1").hide();
        $("#player3").hide();
        $("#player4").hide();
    }else if($("#player3").hasClass('first')){
        $("#player2").hide();
        $("#player1").hide();
        $("#player4").hide();
    }else{
        $("#player2").hide();
        $("#player3").hide();
        $("#player1").hide();
    };  
}

var loadGame = function(){
    var board = makeBoard();
    var player1Hand = makeHand(board);
    var player2Hand = makeHand(board);
    var player3Hand = makeHand(board);
    var player4Hand = makeHand(board);
    createHands(player1Hand,player2Hand,player3Hand,player4Hand);
    hideItems()

}

var createHands = function(player1Hand,player2Hand,player3Hand,player4Hand){
    for(x = 0; x < player1Hand.length;x++){
        var domino = player1Hand[x].toString();
        if(domino == "6,6"){
            $("#player1").addClass("first")
        };
        var src = ' src =images/Dominos/['+domino+'].png>';
        $('#player1 #hand').append('<img class = "domino" id ='+domino+src);
    };
    for(x = 0; x < player2Hand.length;x++){
        var domino = player2Hand[x].toString();
        if(domino == "6,6"){
            $("#player2").addClass("first")
        };
        var src = ' src =images/Dominos/['+domino+'].png>';
        $('#player2 #hand').append('<img class = "domino" id ='+domino+src);
    };
    for(x = 0; x < player3Hand.length;x++){
        var domino = player3Hand[x].toString();
        if(domino == "6,6"){
            $("#player3").addClass("first")
        };
        var src = ' src =images/Dominos/['+domino+'].png>';
        $('#player3 #hand').append('<img id ='+domino+src);
    };
    for(x = 0; x < player4Hand.length;x++){
        var domino = player4Hand[x].toString();
        if(domino == "6,6"){
            $("#player4").addClass("first")
        };
        var src = ' src =images/Dominos/['+domino+'].png>';
        $('#player4 #hand').append('<img id ='+domino+src);
    };
}


var choseFirstPlayer = function(){
    //console.log("I def shouldnt be here");
    if($("#player1").hasClass('first')){
        return "player1";
    }else if ($("#player2").hasClass('first')){
        return "player2";
    }else if($("#player3").hasClass('first')){
        return "player3";
    }else{
        return "player4";
    };
}

var playTurn = function(player){
    player = choseNextPlayer(player);
    $('#'+player+" #hand img").click(function(){
        var dominoSrc = $(this).attr('src');
        var dominoNumber = $(this).attr('id');
        addDominoToBoard(dominoSrc,dominoNumber);
        $(this).remove();
        //console.log("This is the player after calling choseNextPlayer. This should be the same as the next player:"+player);
        playTurn(player);
    });

}

var choseNextPlayer = function(player){
    //console.log("This is the player at the beginning of choseNextPlayer:"+player);
    if(player == "player1"){
        //console.log("This is the previous player in choseNextPlayer. Should be the same as the player above:" + player);
        //console.log("This is the next player. Should follow the sequence" + "player2");
        $("#player1").hide();
        $("#player2").show();
        return "player2";
    }else if(player == "player2"){
        //console.log("This is the previous player in choseNextPlayer. Should be the same as the player above:" + player);
        //console.log("This is the next player. Should follow the sequence" + "player3");
        $("#player2").hide();
        $("#player3").show();
        return "player3";
    }else if(player == "player3"){
        //console.log("This is the previous player in choseNextPlayer. Should be the same as the player above:" + player);
        //console.log("This is the next player. Should follow the sequence" + "player4");
        $("#player3").hide();
        $("#player4").show();
        return "player4";
    }else{
        //console.log("This is the previous player in choseNextPlayer. Should be the same as the player above:" + player);
        //console.log("This is the next player. Should follow the sequence" + "player1");
        $("#player4").hide();
        $("#player1").show();
        return "player1";
    };
}

var checkGame = function(){
    return true;
}

var addDominoToBoard = function(dominoSrc,dominoNumber){
        $("#board #notPlaced").append("<img id =" + dominoNumber + " src ="+dominoSrc+">");
        drawDominoOnBoard(dominoNumber);
}

var drawDominoOnBoard = function(initalXposition,initalYposition,dominoNumber){
    var initalXposition = ($(window).width()/2) + "px";
    var initalYposition = ($(window).height()/2 -100) + "px";
    var domino = $("#board #notPlaced img");
    domino.css({"position": "absolute", "top": initalYposition, "left": initalXposition});
    var domino2 = domino.clone();
    $("#board #placed").append(domino2);
    domino.remove();
}

$(document).ready(function(){
    var windowWidth = $(window).width() - $(window).width()/10; 
    var windowHeight = $(window).height() - $(window).height()/6;
    var gameOn = true;
    $("#board img").css({"width":windowWidth.toString(),"height":windowHeight.toString()}).hide();
    $("#pressed").hide();
    $("#notPressed").hover(
        function(){
            $(this).hide();
            $("#pressed").show();
    });
    $("#pressed").click(function(){
        $(this).fadeOut("slow",function(){
            $("#board img").show("slow",function(){
                loadGame();
                //console.log("Here again");
                var player = choseFirstPlayer();
                $('#'+player+" #hand img").click(function(){
                    //console.log("I should not be here");
                    var dominoSrc = $(this).attr('src');
                    var dominoNumber = $(this).attr('id');
                    addDominoToBoard(dominoSrc,dominoNumber);
                    $(this).remove();
                    playTurn(player);
                });
            });
        });
    });

});

Answer 1

首先，我要感谢 KKetch 让我意识到我正在执行一堆不必要的 DOM 操作。在对 jQuery 进行了更多研究之后，我意识到声明变量比不断获取 HTML 元素要好得多。然而，这并没有解决我的滞后问题。我通过消除递归和使用事件处理程序解决了滞后问题。我的解决方案是依靠在屏幕上隐藏和显示双手。我的游戏循环是由用户在网页本身上暗示的。下面是任何感兴趣的人的解决方案，如果您想跟踪这个项目，这里是 github 页面的链接。再次感谢。

链接: https://github.com/aneurycasado/Dominos-Para-Los-Dominicanos

解决方案:

domino00 = new Image(); 
domino00.src = "images/Dominos/[0,0].png"
domino01 = new Image(); 
domino01.src = "images/Dominos/[0,1].png"
domino02 = new Image(); 
domino02.src = "images/Dominos/[0,2].png"
domino03 = new Image(); 
domino03.src = "images/Dominos/[0,3].png"
domino04 = new Image(); 
domino04.src = "images/Dominos/[0,4].png"
domino05 = new Image(); 
domino05.src = "images/Dominos/[0,5].png"
domino06 = new Image(); 
domino06.src = "images/Dominos/[0,6].png"
domino11 = new Image(); 
domino11.src = "images/Dominos/[1,1].png"
domino12 = new Image(); 
domino12.src = "images/Dominos/[1,2].png"
domino13 = new Image(); 
domino13.src = "images/Dominos/[1,3].png"
domino14 = new Image(); 
domino14.src = "images/Dominos/[1,4].png"
domino15 = new Image(); 
domino15.src = "images/Dominos/[1,5].png"
domino16 = new Image(); 
domino16.src = "images/Dominos/[1,6].png"
domino22 = new Image(); 
domino22.src = "images/Dominos/[2,2].png"
domino23 = new Image(); 
domino23.src = "images/Dominos/[2,3].png"
domino24 = new Image(); 
domino24.src = "images/Dominos/[2,4].png"
domino25 = new Image(); 
domino25.src = "images/Dominos/[2,5].png"
domino26 = new Image(); 
domino26.src = "images/Dominos/[2,6].png"
domino33 = new Image(); 
domino33.src = "images/Dominos/[3,3].png"
domino34 = new Image(); 
domino34.src = "images/Dominos/[3,4].png"
domino35 = new Image(); 
domino35.src = "images/Dominos/[3,5].png"
domino36 = new Image(); 
domino36.src = "images/Dominos/[3,6].png"
domino44 = new Image(); 
domino44.src = "images/Dominos/[4,4].png"
domino45 = new Image(); 
domino45.src = "images/Dominos/[4,5].png"
domino46 = new Image(); 
domino46.src = "images/Dominos/[4,6].png"
domino55 = new Image(); 
domino55.src = "images/Dominos/[5,5].png"
domino56 = new Image(); 
domino56.src = "images/Dominos/[5,6].png"
domino66 = new Image(); 
domino66.src = "images/Dominos/[6,6].png"

dominoImages = [ domino00,domino01,domino02,domino03,domino04,domino05,domino06,
                 domino11,domino12,domino13,domino14,domino15,domino16,
                 domino22,domino23,domino24,domino25,domino26,
                 domino33,domino34,domino35,domino36,
                 domino44,domino45,domino46,
                 domino55,domino56,
                 domino66
               ]


var drawDominoOnBoard = function(initalXposition,initalYposition,dominoNumber){
    var initalXposition = ($(window).width()/2) + "px";
    var initalYposition = ($(window).height()/2 -100) + "px";
    var domino = $("#board #notPlaced img");
    domino.css({"position": "absolute", "top": initalYposition, "left": initalXposition});
    var domino2 = domino.clone();
    $("#board #placed").append(domino2);
    domino.remove();
}

var playTurn = function(player,  player1, player2,
                        player3, player4, dominosPlaced){
    player = choseNextPlayer(player,player1,player2,player3,player4);
    $('#'+player+" #hand img").click(function(){
        var domino = $(this);
        addDominoToBoard(domino,dominosPlaced);
        $(this).remove();
        $(this).unbind("click");
        playTurn(player,player1,player2,player3,player4,dominosPlaced);
    }); 
}

var choseNextPlayer = function(player,player1,player2,player3,player4){
    //console.log("This is the player at the beginning of choseNextPlayer:"+player);
    if(player == "player1"){
        //console.log("This is the previous player in choseNextPlayer. Should be the same as the player above:" + player);
        //console.log("This is the next player. Should follow the sequence" + "player2");
        player1.hide();
        player2.show();
        return "player2";
    }else if(player == "player2"){
        //console.log("This is the previous player in choseNextPlayer. Should be the same as the player above:" + player);
        //console.log("This is the next player. Should follow the sequence" + "player3");
        player2.hide();
        player3.show();
        return "player3";
    }else if(player == "player3"){
        //console.log("This is the previous player in choseNextPlayer. Should be the same as the player above:" + player);
        //console.log("This is the next player. Should follow the sequence" + "player4");
        player3.hide();
        player4.show();
        return "player4";
    }else{
        //console.log("This is the previous player in choseNextPlayer. Should be the same as the player above:" + player);
        //console.log("This is the next player. Should follow the sequence" + "player1");
        player4.hide();
        player1.show();
        return "player1";
    };
}

var addDominoToBoard = function(domino,dominoPlaced){
    var dominoClone = domino.clone();
    dominoPlaced.append(dominoClone);
    drawDominoOnBoard(dominoPlaced);
}

var choseFirstPlayer = function(player1,player2,player3,player4){
    //console.log("I def shouldnt be here");
    if(player1.find("#hand").hasClass('first')){
        player1.show();
        return "player1";
    }else if (player2.find("#hand").hasClass('first')){
        player2.show();
        return "player2";
    }else if(player3.find("#hand").hasClass('first')){
        player3.show();
        return "player3";
    }else{
        player4.show();
        return "player4";
    };
}

var hideHands = function(player1,player2,player3,player4){
    player1.hide();
    player2.hide();
    player3.hide();
    player4.hide();
}

var randomInt = function(number){
    return Math.floor(Math.random()*number);
}

var makeHand = function(player){
    var hand = [];
    var player = $(player);
    var src = domino66.src
    for(x = 0;x<7;x++){
        var ranInt = randomInt(dominoImages.length);
        var domino = dominoImages[ranInt];
        if(domino.src == src){
            player.addClass("first");
        }
        player.append(domino);
        dominoImages.splice(ranInt,1);
    }
    return hand;
}

var hideHands = function(player1,player2,player3,player4){
    player1.hide();
    player2.hide();
    player3.hide();
    player4.hide();
}

var loadGame = function(){
    makeHand("#player1 #hand");
    makeHand("#player2 #hand");
    makeHand("#player3 #hand");
    makeHand("#player4 #hand");
}

$(document).ready(function(){
    loadGame();
    var windowWidth = $(window).width() - $(window).width()/10; 
    var windowHeight = $(window).height() - $(window).height()/6;
    var gameOn = true;
    var boardImg = $("#board img");
    var dominosPlaced = $("#board #placed");
    var pressed = $("#pressed");
    var notPressed = $("#notPressed");
    var player1 = $("#player1");
    var player2 = $("#player2");
    var player3 = $("#player3");
    var player4 = $("#player4");
    hideHands(player1,player2,player3,player4);
    var player = ""
    boardImg.css({"width":windowWidth.toString(),"height":windowHeight.toString()}).hide();
    pressed.hide();
    notPressed.hover(function(){
        $(this).hide();
        pressed.show();
    });
    pressed.click(function(){
        $(this).fadeOut("slow",function(){
            boardImg.show("slow",function(){            
                player = choseFirstPlayer(player1,player2,player3,player4);
            });
        });
    });
    $("#player1 #hand img").click(function(){
                    var domino = $(this);
                    addDominoToBoard(domino,dominosPlaced);
                    $(this).remove();
                    player = choseNextPlayer(player,player1,player2,player3,player4)
    }); 
    $("#player2 #hand img").click(function(){
                    var domino = $(this);
                    addDominoToBoard(domino,dominosPlaced);
                    $(this).remove();
                    player = choseNextPlayer(player,player1,player2,player3,player4)
    }); 
    $("#player3 #hand img").click(function(){
                    var domino = $(this);
                    addDominoToBoard(domino,dominosPlaced);
                    $(this).remove();
                    player = choseNextPlayer(player,player1,player2,player3,player4)
    }); 
    $("#player4 #hand img").click(function(){
                    var domino = $(this);
                    addDominoToBoard(domino,dominosPlaced);
                    $(this).remove();
                    player = choseNextPlayer(player,player1,player2,player3,player4)
    }); 
});