我对jquery，javascript和编码很新。然而，我已经设定了制作一个simcity风格的javascript游戏的任务。我遇到了很多问题，但第一个问题是游戏“板子”中的gif移动图像是一个带手推车的人的自上而下的视角，通过使用jquery移动这个图像来改变css顶部和左侧值我希望imatate运动。
这些“工人”的目的是将资源从锯木厂运到仓库，然后返回另一个负荷。
我有一个名为Animate_Int（）的函数，它使用一个控制图像移动的setinterval每50毫秒运行一次。使用For循环我将图像60（每次通过循环1个像素）像素移动到北，南，东或西，然后调用我编写的简单路径查找功能来确定下一个方向。
这种方法非常有效，而在任何时候页面上只有一个“工人”的图像。当第二个锯木厂建成时，就会出现复杂情况。来自第一个锯木厂的工人将继续完美地进出仓库，但第二个工人将毫无过错地完成他的第一次行动，但似乎实现了第一个跟随他的运动的工人。
网站要求在游戏之前完成登录和之前的任务，因此无法链接到示例（尽管如果这是必要的，我可以在登录系统之外创建新页面。）
//更新 - 我已设法在登录系统之外预先填写页面，以向您显示问题所在。 http://www.tranquilityeden.co.uk/colony/example.php 要解决问题，您必须执行以下操作： 1-使用FF，因为它似乎当前不适用于任何其他浏览器（单独的问题！）
2-查看游戏板时点击Ind tile
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();});
}
}
}
我注意到您的优秀网站What are queues in jQuery?上有以下链接，靠近底部有一个移动多个图片的示例。我认为这就是我所追求的，但我真的很难理解代码。
如果有人代码帮助我理解如何将此代码应用于我的场景，我会非常感激。 代码可以在这里找到：http://jsfiddle.net/enf644/6bX28/2/
我可以看到代码如何与html和css匹配，但我真的不明白如何订购（或命名）队列，或者真正理解dequeue命令的滚动。同样在上面的例子中，它提到代码中的“next”（以蓝色显示）我没有看到这个变量的定义...简而言之我需要有人将队列系统解释为jquery dummey：）
道歉如果我提供了错误格式的代码，但正如我所说，我对所有这些内容都很陌生！
感谢您的帮助，如果我没有说清楚，我可以随时问我任何问题（虽然我可能不知道答案：D）。
约翰
答案 0 :(得分：0)
Animate_Int中的内容是传统上称为20Hz（50毫秒）的封装。这可以起作用，但是它是一种相当古老的编码方法（我从20世纪70年代/ 80年代的项目中认识到它），它不会发挥javascript，尤其是jQuery的优势。
因此，我建议您放弃固定间隔包的概念。
不幸的是，替代方案需要完全不同的思维方式和完全不同的代码。
好消息是替代代码的重量远远小于Animate_Int，主要由jQuery的.animate()方法促进，该方法可以处理从点到点的所有移动。
您需要采用的心态可以称为“面向对象的行为”，通过该行为，您可以根据需要为每种类型的对象（在本例中为工作者）提供行为。因此，您可以从高级监督（游戏）代码中分离出低级代码（在电路板上移动）。
例如，您可以编写一个通用.walkTo()方法，该方法将附加到Worker对象（以及需要在板上进行动画处理的任何其他类型的对象）。然后你可以调用（从适当的地方）thisWorker.walkTo(somePos)，其中somePos定义目标板坐标。计算中间路点/方向/图标变体将在.walkTo()代码中执行。
正如我已经说过的，这需要一种完全不同的思维方式，但是值得花时间学习，因为它会导致本身不那么庞大的代码，而且代码在应用程序中更容易重用（因此进一步减少）。在我看来，另一个优点是帮助将更容易获得，因为有经验的javascript / jQuery程序员将识别代码的整体模式。