5

ゲーム (JavaScript、HTML5 Canvas で記述) に A* Start パス検索を実装しようとしています。A* Start のライブラリはこれを見つけました - http://46dogs.blogspot.com/2009/10/star-pathroute-finding-javascript-code.htmlそして今、私はこのライブラリをパス検索に使用しています。そして、このライブラリを使って簡単なテストを書こうとしていますが、1 つの問題に行き詰まりました。HTML5 キャンバス画面で、mouse.x と mouse.y までマウスでパスを表示すると、これで完了です。スクリーンショットは次のとおりです。

スクリーンショット。

(ピンク色の四角: Player、オレンジ色の四角: mouse.x/mouse.y までのパス)

for(var i = 0; i < path.length; i++) {
    context.fillStyle = 'orange';
    context.fillRect(path[i].x * 16, path[i].y * 16, 16, 16);
}

私の問題は、パス ゴールまでプレーヤーを移動する方法がわからないことです。私はもう試した：

for(var i = 0; i < path.length; i++) {
    player.x += path[i].x;
    player.y += path[i].y;
}

しかし、このコードでは、プレーヤーは描画されません (コードを実行すると、player.x と player.y は 0 に等しくなり、マウスでクリックすると、パス プレーヤーが点滅して消えます)。

たぶん、この問題を解決する方法を知っている人はいますか？

そして、私の英語が下手で申し訳ありません。:)

4

1 に答える 1

5

私のワーキングフィドル

これは私が現在使用しているもので、私のa*に基づいています。ただし、概念は同じである必要があります。a *関数はパスを配列として返す必要があります。その後、各プレーヤーの更新でパスを反復処理して移動する必要があります。

// data holds the array of points returned by the a* alg, step is the current point you're on.
function movePlayer(data, step){
    step++;
    if(step >= data.length){
        return false;   
    }

    // set the player to the next point in the data array
    playerObj.x = data[step].x;
    playerObj.y = data[step].y; 

    // fill the rect that the player is on
    ctx.fillStyle = "rgb(200,0,0)";
    ctx.fillRect(playerObj.x*tileSize, playerObj.y*tileSize, tileSize, tileSize);

    // do it again
    setTimeout(function(){movePlayer(data,step)},10);
}​
于 2012-07-04T15:51:29.847 に答える