我写这篇文章是为了获得有关使用 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);
});
});
});
});
});
最佳答案
首先，我要感谢 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)
});
});
关于javascript - 如何在 jquery 中创建玩家回合？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27794960/