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

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

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

编辑：经过stackover flow用户的一些修补和帮助，我意识到playTurn函数中的AddDominoBoard函数是造成延迟的主要原因。关于如何更好地重新绘制我的董事会的任何建议。再次感谢你

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);
                });
            });
        });
    });

});

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]
];
返回totalkey；
}
var randomInt=函数（最小值、最大值）
{
返回Math.floor（Math.random（）*（max-min）+min）；
}
var makeHand=功能（板）{
var-hand=[]；
对于（x=0；x首先，我要感谢KKetch让我意识到我在做一系列不必要的DOM操作。在对jQuery做了更多的研究之后，我意识到声明变量比不断获取HTML元素要好得多。但是，这并没有解决我的滞后问题。我通过消除rec解决了滞后问题ursion和使用事件处理程序。我的解决方案是依靠在屏幕上隐藏和显示手。我的游戏循环是由用户在网页上自己暗示的。下面的解决方案供任何感兴趣的人使用，如果你想跟踪此项目，这里是指向github页面的链接。再次感谢

链接：

解决方案：

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)
    }); 
});

domino00=新图像（）；
domino00.src=“images/Dominos/[0,0].png”
domino01=新图像（）；
domino01.src=“images/Dominos/[0,1].png”
domino02=新图像（）；
domino02.src=“images/Dominos/[0,2].png”
domino03=新图像（）；
domino03.src=“images/Dominos/[0,3].png”
domino04=新图像（）；
domino04.src=“images/Dominos/[0,4].png”
domino05=新图像（）；
domino05.src=“images/Dominos/[0,5].png”
domino06=新图像（）；
domino06.src=“images/Dominos/[0,6].png”
domino11=新图像（）；
domino11.src=“images/Dominos/[1,1].png”
domino12=新图像（）；
domino12.src=“images/Dominos/[1,2].png”
domino13=新图像（）；
domino13.src=“images/Dominos/[1,3].png”
domino14=新图像（）；
domino14.src=“images/Dominos/[1,4].png”
domino15=新图像（）；
domino15.src=“images/Dominos/[1,5].png”
domino16=新图像（）；
domino16.src=“images/Dominos/[1,6].png”
domino22=新图像（）；
domino22.src=“images/Dominos/[2,2].png”
domino23=新图像（）；
domino23.src=“images/Dominos/[2,3].png”
domino24=新图像（）；
domino24.src=“images/Dominos/[2,4].png”
domino25=新图像（）；
domino25.src=“images/Dominos/[2,5].png”
domino26=新图像（）；
domino26.src=“images/Dominos/[2,6].png”
domino33=新图像（）；
domino33.src=“images/Dominos/[3,3].png”
domino34=新图像（）；
domino34.src=“images/Dominos/[3,4].png”
domino35=新图像（）；
domino35.src=“images/Dominos/[3,5].png”
domino36=新图像（）；
domino36.src=“images/Dominos/[3,6].png”
domino44=新图像（）；
domino44.src=“images/Dominos/[4,4].png”
domino45=新图像（）；
domino45.src=“images/Dominos/[4,5].png”
domino46=新图像（）；
domino46.src=“images/Dominos/[4,6].png”
domino55=新图像（）；
domino55.src=“images/Dominos/[5,5].png”
domino56=新图像（）；
domino56.src=“images/Dominos/[5,6].png”
domino66=新图像（）；
domino66.src=“images/Dominos/[6,6].png”
多米诺影像=[多米诺00，多米诺01，多米诺02，多米诺03，多米诺04，多米诺05，多米诺06，
多明诺11，多明诺12，多明诺13，多明诺14，多明诺15，多明诺16，
多明诺22号，多明诺23号，多明诺24号，多明诺25号，多明诺26号，
多明诺33号，多明诺34号，多明诺35号，多明诺36号，
多明诺44号，45号，46号，
多明诺55号，多明诺56号，
多米诺66
]
var drawDominonboard=函数（initalXposition、initalYposition、dominonNumber）{
var initalXposition=（$（window.width（）/2）+“px”；
var initalYposition=（$（窗口）.height（）/2-100）+“px”；
var domino=$（“#board#notPlaced img”）；
css（{“position”：“absolute”，“top”：initalYposition，“left”：initalXposition}）；
var domino2=domino.clone（）；
美元（“#板#放置”）。追加（多米诺2）；
domino.remove（）；
}
var playTurn=功能（播放器、播放器1、播放器2、，
播放机3、播放机4、多米诺宫）{
player=choseNextPlayer（player，player1，player2，player3，player4）；
$（“#”+player+“#hand img”）。单击（函数（）{
var domino=$（这个）；
添加多米诺骨牌（多米诺骨牌，多米诺骨牌）；
$（this.remove（）；
$（此）。解除绑定（“单击”）；
玩家轮换（玩家、玩家1、玩家2、玩家3、玩家4、多米诺放置）；
}); 
}
var choseNextPlayer=函数（player、player1、player2、player3、player4）{
//log（“这是choseNextPlayer:+player开头的播放器）；
如果（玩家==“玩家1”）{
//log（“这是choseNextPlayer中的前一个播放器。应该与上面的播放器相同：“+player”）；
//log（“这是下一个播放器。应该按照“+”player2”的顺序）；
player1.hide（）；
player2.show（）；
返回“player2”；