我对 jquery、javascript 和编码很陌生。然而，我为自己设定了制作模拟城市风格的 javascript 游戏的任务。我有很多问题，但第一个是 gif 在游戏“棋盘”上的移动图像是一个手推车男人的自上而下的视图，通过使用 jquery 在棋盘上移动这个图像来改变css top 和 left 值我希望模仿运动。
这些“工人”的目标是例如将锯木厂的资源带到仓库，然后再返回装载。
我有一个名为 Animate_Int() 的函数，它使用控制图像移动的 setinterval 每 50 毫秒运行一次。使用 For 循环，我将图像向北、南、东或西移动 60 个像素（每次通过循环 1 个像素），然后调用我编写的简单路径查找函数来确定下一个方向。
当页面上任何时候只有一个“工人”的图像时，这非常有效。当建造第二个锯木厂时，就会出现复杂情况。第一个锯木厂的工人将完美地继续往返于仓库，但第二个工人将毫无错误地迈出第一步，但随后似乎会出现在第一个工人的顶部以跟随他的动作。
该网站需要在游戏之前完成登录和以前的任务，因此无法链接到示例（尽管如果这是必要的，我可以在登录系统之外创建一个新页面）。
//更新 - 我已经设法在登录系统之外准备了一个页面，以向您展示问题所在。http://www.tranquilityeden.co.uk/colony/example.php 要使问题发生，您必须执行以下操作： 1- 使用 FF，因为它目前似乎不适用于任何其他浏览器（单独的问题！）
2-查看游戏板时，单击 Ind 磁贴
3-然后当弹出带有选项的窗口时向下滚动到锯木厂。点击升级（目前只有在建造锯木厂时才会发生）
4-当你建好锯木厂后，看着小人去仓库（WH），他会回家，然后重复这个过程。
5-建造第二个锯木厂并观看疯狂！//
我已经为 Animate_Int() 函数包含了下面的代码，因为我认为问题可能出在这个函数中，尽管我不能确定。
function Animate_Int()
{
if(pause ==1) //stops animation of images if game is paused
{return;}
else if(Active_Workers.length !=0) //Stops animation if no sawmills have been built
{
for(var i=0;i<=Active_Workers.length;i++)
{
var x;
var y;
var index = Active_Workers[i]; //An array that holds the ids of each active worker
var Image = Animate_Image[index]; //Worker ID
var Current_Coord = Animate_Current_Coord[index];
//An array that holds the imagescurrent coordinate on board
var pos = $(Image).position();
// Finds the exact pixel position of the image
var Current_X = pos.left;
var Current_Y = pos.top;
var Target_Coord = Animate_Target_Coord[index];
//Array holding the Target Coordiante
var Target_X = xArray[Target_Coord]-15;
//Finds the pixel location for the center of the table cell
var Target_Y = yArray[Target_Coord];
var End_Coord;
//This is the destination of the worker for example the warehouse or back to the sawmill
var End_X= xArray[End_Coord]-15;
var End_Y = yArray[End_Coord]; //pixel location of destination
if(Animate_Delivered[index]==0)
//works out if worker is on his way, or on his way back from warehouse
{End_Coord = Animate_End_Coord[index];}
else
{End_Coord = index;}
//Now using the varibles set above I use some if and else statements to tell the browser what to do in each situation.
if((Current_X == End_X)&&(Current_Y == End_Y))
//Event: when the image has reached its destination
{
Current_Coord = Animate_Current_Coord[index];
var bearing_next_coord;
if(End_Coord == index){Animate_Delivered[index]=0;}
else{Animate_Delivered[index]=1;}
bearing_next_coord=Direction(Current_Coord,End);
//calls the pathfinding function to find next direction to take.
var bearing = bearing_next_coord[0];
//bearing is "n" (north),"e" (east) etc
var next_coord = parseInt(bearing_next_coord.substring(1));
//Gives the new coordinate
Animate_Target_Coord[index]=next_coord;
//changes the target array
}
else if((Current_X == Target_X)&&(Current_Y == Target_Y))
//'Event: has reached the center of the next cell in the route
{
Current_Coord=Animate_Target_Coord[index];
var bearing_next_coord = Direction(Current_Coord,End_Coord);
//gets next direction to take
var bearing = bearing_next_coord[0];
var next_coord = parseInt(bearing_next_coord.substring(1));
switch(bearing) //switch to choose the image based on travel direction
{
case "n":
$(Image).attr("src", "images/animations/sawmill_dude_n.gif");
break;
case "e":
$(Image).attr("src", "images/animations/sawmill_dude_e.gif");
break;
case "s":
$(Image).attr("src", "images/animations/sawmill_dude_s.gif");
break;
case "w":
$(Image).attr("src", "images/animations/sawmill_dude_w.gif");
break;
}
Animate_Target_Coord[index]=next_coord; //update target array
}
if(Current_X !=Target_X)
//Event: image is in between coordinates and needs to be moved.
{
y= Current_Y;
if(Current_X < Target_X)
{x= Current_X+1;}
if(Current_X > Target_X)
{x= Current_X-1;}
}
if(Current_Y !=Target_Y)
{
x= Current_X;
if(Current_Y < Target_Y)
{y= Current_Y+1;}
if(Current_Y > Target_Y)
{y= Current_Y-1;}
}
//Now to actuall move the image.
$(Image).queue(function () {
$(this).css({left:x,top:y});
$(this).dequeue();});
}
}
}
我在您的优秀网站上注意到以下链接，jQuery 中的队列是什么？，在底部附近有一个移动多个图像的示例。我认为这就是我所追求的，但我真的很难理解代码。
如果有人代码帮助我了解如何将此代码应用于我的场景，我将非常感激。代码可以在这里找到：http: //jsfiddle.net/enf644/6bX28/2/
我可以看到代码如何与 html 和 css 匹配，但我真的不明白如何订购（或命名）队列，或者真的不明白 dequeue 命令的作用。同样在上面的示例中，它在代码中提到了“下一个”（以蓝色显示）我看不到这个变量的定义位置......简而言之，我需要有人向 jquery 假人解释队列系统:)
抱歉，如果我以错误的格式提供了代码，但正如我所说，我对所有这些东西都很陌生！
感谢您的帮助，如果我没有说清楚，请随时问我任何问题（尽管我可能不知道答案：D）。
约翰