2

我正在尝试在点击式冒险游戏中复制该功能,其中角色需要在特定路径内行走而不超出路径边界。

举个例子:我有这个 JS Fiddle: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();

我见过使用瓷砖等的例子。但我希望它在多边形本身内。或者,如果它更容易,我什至愿意将解决方案视为一种在多边形之外行走的方式,只要玩家的脚不接触多边形。不确定哪个更好,哪个更容易。

有什么帮助和例子让我继续前进吗?谢谢!

4

1 回答 1

1

您可以使用几种算法来检查给定点(玩家)是否在多边形内:RaycastingWinding Number,它们都在维基百科文章中进行了描述。

更新:看起来画布 API 已经为你实现了这个,见上面 markE 的评论

于 2015-08-19T12:11:29.270 回答