在Javascript畫布中簡單尋路 - 想想冒險遊戲

我想在一個點複製功能，然後單擊冒險遊戲，角色需要在特定路徑內行走而不會超出路徑邊界。在Javascript畫布中簡單尋路 - 想想冒險遊戲

就像一個例子：我有這個JS小提琴：http://jsfiddle.net/1ztzz6an/1/繪製一個多邊形。我想要的只是字符的腳（導入圖像的底部）只能保持在多邊形內。這裏是代碼：

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 

var triangle = [{ 
    x: 71, 
    y: 247 
}, { 
    x: 299, 
    y: 313 
}, { 
    x: 520, 
    y: 215 
}, { 
    x: 587, 
    y: 49 
}, { 
    x: 468, 
    y: 154 
}, { 
    x: 420, 
    y: 36 
}]; 



// define the polygon 
function define(polygon) { 
    ctx.beginPath(); 
    ctx.moveTo(polygon[0].x, polygon[0].y); 
    for (var i = 1; i < polygon.length; i++) { 
     ctx.lineTo(polygon[i].x, polygon[i].y); 
    } 
    ctx.closePath(); 
} 
define(triangle); 
ctx.fill();

我看過使用瓷磚等的例子。但我希望它在多邊形內。或者，如果更容易，只要玩家腳不碰多邊形，我甚至願意將解決方案看作是走出多邊形的一種方式。不知道哪個更好，哪個更容易。

任何幫助和示例讓我走？謝謝！

來源

2015-08-19 user1924218

**爲了讓你開始：**（1）在畫布上的任何運動通過清除畫布和重繪一切實現（聚+ playerImage）在他們的新職位。（2）您可以通過偵聽mousemove事件並重新繪製場景（多邊形），然後將播放器圖像移動距離鼠標自上次移動鼠標以來的距離來移動其導入的圖像。（3）通過測試圖像的左下角和右下角是否在多邊形內，可以測試圖像底部是否在多邊形內。您可以使用'.isPointInPath'來測試這2點。 – markE

有一對夫婦的算法可以用來檢查一個給定的點（玩家）是多邊形或不裏：和匝數，它們都在wikipedia article描述光線投射。

更新：它看起來像canvas API has this implemented for you，見上面坊間的評論

來源

2015-08-19 12:11:29 codebox

是的，但是這種方法在iOS中不起作用。如果我使用phonegap編譯到iOS，它不會使用所有參數。那是對的嗎？ – user1924218

我從來沒有使用phonegap，所以我不知道，但我相信你可以自己實現算法，如果內置版本將無法正常工作。 – codebox

在Javascript畫布中簡單尋路 - 想想冒險遊戲

回答

相關問題