我正在尝试在点击式冒险游戏中复制该功能,其中 Angular 色需要在特定路径内行走而不超出路径边界。
举个例子:我有这个 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();
我见过使用图 block 等的示例。但我希望它位于多边形本身内。或者,如果更容易,我什至愿意将解决方案视为走出多边形的一种方式,只要玩家的脚不接触多边形即可。不确定哪个更好,哪个更容易。
有任何帮助和示例可以帮助我前进吗?谢谢!
最佳答案
有几种算法可以用来检查给定点(玩家)是否在多边形内:光线转换和绕数,它们是均在 wikipedia article 中描述.
更新:它看起来像 canvas API has this implemented for you ,请参阅上面 markE 的评论
关于javascript - Javascript Canvas 中的简单寻路 - 思考冒险游戏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32094841/