Javascript HTML5画布中的*开始路径查找

我正在尝试在我的游戏（使用JavaScript、HTML5画布编写）中实现*开始路径查找。用于*开始的库找到了这个-现在我正在使用这个库进行路径查找。 有了这个库，我试着编写一个简单的测试，但遇到了一个问题。 我现在已经完成了，在HTML5画布屏幕上用鼠标点击显示路径，直到我的mouse.x和mouse.y。以下是一个屏幕截图：

（粉色方块：播放器，橙色方块：我的鼠标.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（变量i=0；i

我的问题是我不知道如何移动我的球员，直到路径目标。 我试过：

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

for（变量i=0；i

但使用此代码，我的播放器不会被画出来。（当我运行代码时，player.x和player.y等于0，当我用鼠标单击时，我会看到路径player闪烁并消失）

也许有人知道如何解决这个问题

我为我糟糕的英语语言感到非常抱歉

这是我目前使用的基于我的a*。但概念应该是相同的。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);
}​

---

很好的例子！有一个小错误，在鼠标处理代码中，您应该使用

Math.floor

，而不是

Math.round

！否则，单击单元格的右半部分将其放入下一个单元格作为替代，您可以使用此HTML5画布库：（这是我使用的库）。它提供了简单的例子。