Question

要检测画布上1张图像何时在另一张图像的范围内，我会这样做：

if (herohitboxX <= (villageMain.x + 200) && villageMain.x <= (herohitboxX) && herohitboxY <= (villageMain.y + 200) && villageMain.y <= (herohitboxY) ) { console.log('inside bldg') }

效果很好但是我有一个很大的问题，想知道如何不让玩家走进建筑物/树/物体，但让他们仍然离开物体。

我可以让玩家在触摸时移动它们滑过物体，并阻止它们从那个方向回来，但是我无法阻挡四个方向的移动.......

主要问题是它只能检测它们是否重叠，但它并不能告诉你玩家的方向。当他们在建筑物内部时，简单地否定玩家的移动方向是不起作用的（如果他们按下右边并触摸物体，则向左移动，否则如果他们没有触摸并向右按，则向右移动）。或者如果他们走路并触摸建筑物，请发送DOWN。不应该那样工作????

我唯一能想到的是做4个细长矩形/线条代表周边的每一边，然后就不允许从它面向的方向移动。但必须有一些更简单的方法！它是什么？

存储以前的位置并进行比较？现在没有真正的移动方向，如果在关键监听器中检测到UP，它会移动背景图像并调整玩家精灵位置。有小费吗？

Answer 1

据推测，这段代码发生在玩家移动或试图移动的过程中。

确定两个对象的中心。如果玩家的中心试图离开另一个物体的中心，即使它们相交也允许移动。

如果没有，请停止移动。

换句话说，你有球员的中锋和对象的中锋。这使得line1。

你有一个移动命令，可以为玩家的中心创造一个潜在的新位置（旧位置加上一些方向）。计算得到第2行。

现在，如果第二行比第一行长，那意味着玩家正在远离交叉对象，因此应该允许它。也许他们正在反对他们右边的一个物体，他们想要向上或向左移动。这两个都使line2比line1更长。

只有在玩家试图缩短线条时（通过直接朝向物体移动）才能阻止它。

行提示

假设玩家的中心位于px, py并假设对象的中心位于ox, oy。然后他们之间的距离是：

var dx = px - ox;
var dy = py - oy;
var dist = Math.sqrt(dx * dx + dy * dy);

但这里有一些有趣的东西。我们实际上并不需要知道距离，我们只需要将它与另一个距离进行比较。这意味着我们可以跳过（可能很慢）Math.sqrt调用，并将line1的平方距离与line2的平方距离进行比较。所以这里的第1行：

var dx = px - ox;
var dy = py - oy;
var line1 = dx * dx + dy * dy;

对于第2行，如果移动命令成功，我们需要知道玩家的位置，我们称之为newpx, newpy。

var dx2 = newpx - ox;
var dy2 = newpy - oy;
var line2 = dx2 * dx2 + dy2 * dy2;

所以，如果line2 > line1，请允许移动！否则，阻止发生移动。

注意，所有这一切都假设玩家一次只能在一个基本方向上移动（向上，向下，向左，向右）而不是向右移动。如果是这种情况，你必须要小心一点。

Javascript画布碰撞事件块移动

1 个答案: