Javascript Canvas 中的简单寻路 - 思考冒险游戏答案

【问题标题】：Simple Pathfinding in Javascript Canvas - Think Adventure gameJavascript Canvas 中的简单寻路 - 思考冒险游戏
【发布时间】：2015-08-19 11:56:39
【问题描述】：

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

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

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

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

【问题讨论】：

让您开始： (1) 画布上的任何移动都是通过清除画布并在新位置重新绘制所有内容（poly+playerImage）来实现的。 (2) 您可以通过监听mousemove 事件并重绘您的场景（多边形）然后将您的播放器图像移动自上次鼠标移动后鼠标移动的距离，让您的播放器移动他们导入的图像。（3）您可以通过测试图像的左下角和右下角是否在多边形内来测试图像的底部是否在多边形内。您可以使用.isPointInPath 来测试这两个点。

标签： javascript canvas polygon path-finding adventure

【解决方案1】：

您可以使用几种算法来检查给定点（玩家）是否在多边形内：Raycasting 和 Winding Number，它们是两者都在wikipedia article 中描述。

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

【讨论】：

是的，但是这种方法在 iOS 中不起作用。如果我使用 phonegap 编译到 iOS，它不会使用所有参数。对吗？
我从来没有用过phonegap所以我不知道，但是如果内置版本不起作用，我相信你可以自己实现算法。