使用 Jquery 同时向不同方向移动多个图像

我对jquery，javascript和编码非常陌生。然而，我给自己设定了制作模拟城市风格的JavaScript游戏的任务。我遇到了许多问题，但第一个问题是 gif 在游戏"棋盘"上的移动 这些图像是一个拿着独轮车的男人的自上而下的面纱，通过使用 jquery 将这张图像全线移动来更改 css 顶部和左侧值，我希望模仿运动。

这些"工人"的目的是将资源从锯木厂带到仓库，然后返回另一次装载。

我有一个名为 Animate_Int（） 的函数，它每 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 匹配，但我真的不明白如何排序（或命名）队列，或者真正理解取消队列命令的滚动。同样在上面的示例中，它提到了代码中的"下一个"（以蓝色找到）我没有看到这个变量的定义在哪里......简而言之，我需要有人向jquery笨蛋解释队列系统:)

抱歉，如果我以错误的格式提供了代码，但正如我所说，我对所有这些东西都很陌生！

感谢您的任何帮助，如果我没有说清楚，请随时问我任何问题（尽管我可能不知道答案:D）。

John