Javascript画布碰撞事件块移动

Question

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

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

这很有效，但我在弄清楚如何不让玩家走进建筑物/树/物体的同时又让他们仍然存在一个巨大的问题远离该物体。

我可以通过在触摸时移动它们来让玩家滑过物体，并阻止它们从第 1 个方向返回，但我无法阻止所有 4 个侧面的移动......

主要问题是它只检测它们是否重叠，但它不会告诉您玩家来自哪个方向。当玩家在建筑物内时，简单地否定玩家的移动方向是行不通的（如果他们按下右侧并触摸物体，则向左走，否则如果他们没有触摸并按下右侧，则向右走）。或者，如果他们向上走并触摸建筑物，请向下发送。不应该这样吗？

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

存储以前的位置并进行比较？现在并没有真正需要注意的移动方向，如果在关键侦听器中检测到您向上，它会移动背景图像并调整玩家精灵位置。有什么建议吗？

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，允许移动！否则，阻止移动发生。

请注意，所有这些都假设玩家一次只能沿一个基本方向移动（上、下、左、右），而不是右上。如果是这种情况，你就必须更加小心了。