A* Start path finding in HTML5 Canvas

Question

I'm trying implement A* Start path finding in my games(which are written with JavaScript, HTML5 Canvas). Library for A* Start found this - http://46dogs.blogspot.com/2009/10/star-pathroute-finding-javascript-code.html and now I'm using this library for path finding. And with this library, I'm trying write a simple test, but stuck with one problem. I'm now done when in HTML5 canvas screen click with mouse show path until my mouse.x and mouse.y. Here is a screenshot:

(Pink square: Player, Orange squares: path until my mouse.x/mouse.y)

Code how I'm drawing the orange squares until my mouse.x/mouse.y is: http://pastebin.com/bfq74ybc (Sorry I do not understand how upload code in my post)

My problem is I do not understand how to move my player until path goal. I've tried: 'http://pastebin.com/nVW3mhUM

But with this code my player is not beung drawn.(When I run the code, player.x and player.y are equals to 0 and when I click with the mouse I get the path player blink and disappear)

Maybe anyone know how to solve this problem?

And I'm very very very sorry for my bad English language. :)

Answer 1

I can see two problems with your code:

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

you're using +=, which means you're adding to the current position, if the player is at 0,0 (and let's say the path is {(1,1),(1,2),(2,3)}), the player position will be (1,1),(2,3),(4,6) , which is probably not what you want (and probably why it's disappearing.) You should use player.x = path[i].x;.

Second, a for loop is executed entirely in one tick, so before showing on the screen or allowing for more player input, your square will already be at its final position. Since you're using javascript I assume you have a setInterval/setTimeout/requestAnimationFrame, inside of whatever code you have you should do something like this:

var currentFrame = 0;
var lastFrame = 0;
var i = 0;
setInterval(function(){
    currentFrame++;
    if(currentFrame-lastFrame >= 10){
        lastFrame = currentFrame;
        player.x = path[i].x; player.y = path[i].y;
        i++
        if(i > path.lenght) i = 0;
    }
},33);

this is not simply copy and paste tho, so if you want a more suited answer, post more of your code.