Geek asks and answers

A * Start search path in HTML5 Canvas

I am trying to implement A * Start finding a path in my games (which are written using JavaScript, HTML5 Canvas). The library for A * The beginning found this - http://46dogs.blogspot.com/2009/10/star-pathroute-finding-javascript-code.html , and now I use this library to find paths. And with this library I am trying to write a simple test, but am stuck with one problem. Now I am done when in HTML5 the canvas screen clicks on the mouse screen to mouse.x and mouse.y. Here is a screenshot:

Screenshot

(Pink square: player, orange squares: path to my mouse.x / mouse.y) Code, how do I draw orange squares until my 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);
}

My problem is that I do not understand how to move the player to the goal of the goal. I tried:

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

. ( , player.x player.y 0, , ) p >

, - , ?

.:)

+5
1

, , *. . 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);
}​
+5

More articles:


All Articles