A * HTML5 Canvas에서 경로 찾기 시작

Question

자바 스크립트, HTML5 캔버스로 작성된 내 게임에서 경로 찾기를 구현하려고합니다. A * 시작을위한 라이브러리가 이것을 찾았습니다 - http://46dogs.blogspot.com/2009/10/star-pathroute-finding-javascript-code.html 그리고 지금 나는이 라이브러리를 경로 찾기에 사용하고 있습니다. 그리고이 라이브러리를 사용하면 간단한 테스트를 작성하려고하지만 한 가지 문제가 있습니다. 이제 HTML5 캔버스 화면에서 마우스를 클릭하여 경로를 마우스로 클릭하면 mouse.x와 mouse.y가 표시됩니다.

: 여기 스크린 샷입니다 (핑크 광장 : 플레이어, 오렌지 사각형 : 경로까지 내 mouse.x/mouse.y) 코드가 어떻게 내 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; 
} 

그러나

이 코드 내 플레이어가 그려 beung되지 않는다 (I 코드, player.x를 실행하고 player.y 때 0으로 동일하고 나는 마우스 I로 클릭 할 때 경로 플레이어가 깜박 거리고 사라짐)

어쩌면 누구든지이 문제를 해결하는 방법을 알고있을 것입니다.

그리고 나쁜 영어로 매우 유감스럽게 생각합니다. :)

Answer 1

My Working Fiddle

이 내가 현재 * 내의 기반으로하는 사용하는 것입니다. 개념은 동일해야합니다. 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); 
}​