Question

我试图在点击冒险游戏中复制该功能，其中角色需要在某个路径内行走而不会超出路径的边界。

就像一个例子：我有这个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();

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

让我走的任何帮助和榜样？谢谢！

Answer 1

您可以使用几种算法来检查给定点（播放器）是否在多边形内： Raycasting 和绕线数，它们是两者都在wikipedia article中描述。

更新：它看起来像canvas API has this implemented for you，请参阅上面的标记

Javascript Canvas中的简单寻路 - 想想冒险游戏

1 个答案: