*在HTML5 Canvas中開始路徑查找

我正在嘗試實現A *在我的遊戲中開始路徑查找（使用JavaScript，HTML5 Canvas編寫）。 A * Start的圖書館發現了這個 - http://46dogs.blogspot.com/2009/10/star-pathroute-finding-javascript-code.html，現在我正在使用這個庫來尋找路徑。和這個庫，我想寫一個簡單的測試，但堅持一個問題。我現在完成時，在HTML5畫布屏幕點擊鼠標顯示路徑，直到我的mouse.x和mouse.y。下面是截圖：*在HTML5 Canvas中開始路徑查找

Screenshot.

（粉紅色方形：球員，橙色方塊：路徑，直到我的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; 
}

但有了這個代碼，我的球員沒有beung拉（當我運行代碼，player.x和player.y都等於0，當我用鼠標點擊我讓路徑播放器閃爍並消失）

也許任何人都知道如何解決這個問題？

而且我非常非常非常非常抱歉我的英語語言不好。 :)

來源

2012-07-04 gyhgowvi

作爲替代方案，您可以使用這個HTML5畫布庫：https：//github.com/Zombitch/CellAStar（它是我使用的）。它提供了簡單的例子。 – Ashbay

My Working Fiddle

這是我目前使用的是基於關閉*我一個。這個概念應該是相同的。 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-04 15:51:29 Loktar

很好的例子！有一個小錯誤，在你的鼠標處理代碼中你應該使用'Math.floor'，而不是'Math.round'！否則點擊一個單元格的右半部分將它放在下一個單元格 –

@SimonSarris好點啊！ – Loktar

非常感謝！ :) – gyhgowvi

*在HTML5 Canvas中開始路徑查找

回答

相關問題