A * Iniciar búsqueda de ruta en HTML5 Canvas

Question

Estoy intentando implementar A * Iniciar la búsqueda de ruta en mis juegos (que están escritos con JavaScript, HTML5 Canvas). La biblioteca de A * Start encontró esto: http://46dogs.blogspot.com/2009/10/star-pathroute-finding-javascript-code.html y ahora estoy usando esta biblioteca para buscar rutas. Y con esta biblioteca, intento escribir una prueba simple, pero me quedo con un problema. Ya finalicé cuando en la pantalla de canvas HTML5 haga clic con mouse show path hasta mi mouse.x y mouse.y. Aquí está una captura de pantalla:

(cuadrados Rosa: cuadrados, Reproductor de Orange: camino hasta mi mouse.x/mouse.y) Código cómo estoy dibujando los cuadrados naranja hasta que mi mouse.x/mouse.y es:

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

Mi problema es que no entiendo cómo mover mi jugador hasta el objetivo del camino. He intentado:.

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

Pero con este código de mi reproductor no está dibujado Beung (Al ejecutar el código, y player.x player.y son iguales a 0 y al hacer clic con el ratón I hacer que el jugador del camino parpadee y desaparezca)

¿Alguien sabe cómo resolver este problema?

Y lo siento mucho por mi mala lengua inglesa. :)

Answer 1

My Working Fiddle

Esto es lo que yo uso actualmente que se basa fuera de mi un *. El concepto debería ser el mismo sin embargo. La función a * debe devolver la ruta como una matriz, luego solo necesita iterar a través de la ruta en cada actualización de jugador y moverlos.

// 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); 
}​