5

我正在尝试在我的游戏（使用 JavaScript、HTML5 Canvas 编写）中实现 A* Start 路径查找。A* Start 的库找到了这个 - 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;
}

但是使用此代码，我的播放器没有被绘制。（当我运行代码时，player.x 和 player.y 等于 0，当我用鼠标单击时，路径播放器会闪烁并消失）

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

我非常非常非常抱歉我的英语不好。:)

4

1 回答 1

5

我的工作小提琴

这是我目前使用的基于我的 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);
}​
于 2012-07-04T15:51:29.847 回答