私はjquery、javascript、およびコーディング全般に非常に慣れていません。ただし、simcity スタイルの JavaScript ゲームを作成するタスクを自分自身に設定しました。私は多くの問題を抱えていますが、最初のものはゲーム「ボード」を横切るgifの動きです.画像は、jqueryを使用してボードを横切ってこの画像を移動することにより、手押し車を持った男性のトップダウンビューです. css top と left の値 私は動きをまねたいと思っています。
これらの「労働者」の目的は、たとえば製材所から倉庫に資源を運び、別の荷物を積むために戻ることです。
画像の動きを制御する setinterval を使用して 50 ミリ秒ごとに実行される Animate_Int() という関数があります。For ループを使用して、画像を東西南北に 60 (ループごとに 1 ピクセル) ピクセル移動し、作成した単純なパス検索関数を呼び出して、次の方向を決定します。
これは、一度にページに「ワーカー」の画像が 1 つしかない場合でも完全に機能します。複雑な問題は、2 番目の製材所が建設されたときに発生します。最初の製材所の労働者は、倉庫への往復の旅を完璧に続けますが、2 番目の労働者は間違いなく最初の動きをしますが、最初の労働者の上に実体化し、彼の動きを追うように見えます。
Web サイトでは、ゲームの前にログインと以前のタスクを完了する必要があるため、例にリンクすることはできません (ただし、これが不可欠な場合は、ログイン システムの外に新しいページを作成できる場合があります)。
//更新 - 問題が何であるかを示すために、ログイン システムの外にページを準備することができました。http://www.tranquilityeden.co.uk/colony/example.php 問題を発生させるには、次のことを行う必要があります。
2- ゲーム ボードを表示しているときに、Ind タイルをクリックします。
3-次に、ウィンドウがポップアップしてオプションが表示されたら、製材所までスクロールします. アップグレードをクリックします（現在、製材所を構築するときにのみ発生します）
4-製材所を建設したら、小さな男が倉庫 (WH) への旅をするのを見てください。彼は家に帰り、プロセスを繰り返します。
5- 2 番目の製材所を建設し、クレイジーさを見てください!! ///
問題は this 関数にある可能性があると思われるため、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）。
ジョン