A * HTML5 Canvas中的开始path查找

我正在尝试实现A *在我的游戏中开始path查找(使用JavaScript,HTML5 Canvas编写)。 A *开始图书馆发现这个 – http://46dogs.blogspot.com/2009/10/star-pathroute-finding-javascript-code.html现在我正在使用这个库进行path查找。 有了这个库,我正在尝试写一个简单的testing,但是遇到了一个问题。 我现在完成时,在HTML5canvas屏幕点击鼠标显示path,直到我的mouse.x和mouse.y。 这是一个截图 – http://img.ufgame.com/javascript/14qxrl.jpg (粉红色方块:播放器,橙色方块:path,直到我的mouse.x / mouse.y)代码如何绘制橙色方块,直到我的鼠标.x / mouse.y是:'http://pastebin.com/bfq74ybc(对不起,我不明白如何在我的文章中上传代码)

我的问题是我不明白如何移动我的球员,直到path目标。 我试过了:'http://pastebin.com/nVW3mhUM

但是有了这个代码,我的玩家就不会被Beung绘制(当我运行代码时,player.x和player.y等于0,当我用鼠标点击的时候,我会让path玩家闪烁并消失)

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

我非常非常非常抱歉我的英语不好。 🙂

我可以看到你的代码有两个问题:

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

你正在使用+= ,这意味着你join到当前位置,如果玩家在0,0 (假设path是{(1,1),(1,2),(2,3)} ),玩家的位置将是(1,1),(2,3),(4,6) ,这可能不是你想要的(也可能是为什么它正在消失)。你应该使用player.x = path[i].x;

其次, for循环完全在一个tick中执行,所以在显示在屏幕上或者允许更多的玩家input之前,你的方块已经处于最后的位置。 既然你使用javascript,我假设你有一个setInterval / setTimeout / requestAnimationFrame,在你有任何代码你应该做这样的事情:

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

这不是简单的复制和粘贴寿,所以如果你想要一个更合适的答案,张贴更多的代码。