Javascript画布碰撞事件块移动答案

【问题标题】：Javascript canvas collision event block movementJavascript画布碰撞事件块移动
【发布时间】：2012-01-19 18:13:10
【问题描述】：

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

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

效果很好，但我在弄清楚如何不让玩家走进建筑物/树/对象，但同时让他们仍然远离对象时遇到了很大的问题。

我可以通过在触摸时移动它们来使玩家滑过对象，并阻止它们从那个方向返回，但我不能阻止来自所有 4 个方向的移动....

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

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

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

【问题讨论】：

所以如果我理解正确的话，当玩家和一些障碍物部分重叠时就会出现问题。但如果你的算法是正确的，你应该永远不会达到这样的状态，对吧？
@Pumbaa80：听起来可能玩家的起始位置违反了重叠规则。因此，如果我是 user1108224，我会检查以确保您确实初始化了任何重叠的对象。
它只是检测它们何时重叠，我将它用于几十个对象来触发游戏内菜单、重新填充统计数据、打开商店菜单以购买/出售物品、通过碰到它们来拾取物品，这些都是在检测到碰撞时触发的。我遇到的问题是我无法阻止碰撞的发生，我想为建筑物和树木等一些物体做这件事。如果玩家从一个对象的左侧接近，当它到达对象时，我不希望玩家能够再向右移动，但仍然希望他们能够移动所有其他方向......跨度>

标签： html canvas controller character collision

【解决方案1】：

大概这个代码发生在玩家移动或试图移动的过程中。

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

如果没有，请停止移动。

换句话说，你有玩家的中心和物体的中心。这就是第 1 行。

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

现在如果第二条线比第一条线长，这意味着玩家正在远离相交对象，因此应该允许。也许他们正靠在他们右边的一个物体上，他们想向上或向左移动。这两个都使 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;

对于 line2，如果移动命令成功，我们需要知道玩家会在哪里，我们称之为newpx, newpy。

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

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

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

【讨论】：