A * Начать поиск пути в HTML5 Canvas

Question

Я пытаюсь реализовать A * Начать поиск пути в моих играх (которые написаны с помощью JavaScript, HTML5 Canvas). Библиотека для 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 is:

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 обращается (Когда я запускаю код, player.x и player.y являются равно 0, и когда я нажимаю с I мыши get the path player мигает и исчезает)

Возможно, кто-нибудь знает, как решить эту проблему?

И мне очень очень жаль моего плохого английского языка. :)

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