如何在javascript中检测两个图像之间的碰撞？答案

【问题标题】：How to detect collision between two images in javascript?如何在javascript中检测两个图像之间的碰撞？
【发布时间】：2016-02-22 16:18:02
【问题描述】：

我正在实现一个简单的游戏，我的汽车（图像）必须躲避圆形障碍物（图像）。现在我在为汽车和圆圈制定碰撞检测方法时遇到问题。我希望汽车一撞到圆圈就消失。现在我正在使用一个名为“y”的 id 来显示汽车是否与 bluecircle 发生碰撞。如果是这样，我的 HTML 代码部分中的 <p> 标记使用了 id，它应该显示文本说“碰撞”，但即使它们相交....什么也没有发生...：/

function Intersect(ax ,ay , aw , ah , bx , by , bw , bh){
            return ax < bx + bw && bx < ax + aw && ay < by + bh && by < ay + ah;
    }
if (Intersect(this.x,this.y,this.w,this.h,bluecircleArray[0].x,bluecircleArray[0].y,bluecircleArray[0].width,bluecircleArray[0].height)){
                     document.getElementById("y").innerHTML = "COLLISION";
    }

【问题讨论】：

它不起作用通常需要比这更多的细节。我能假设的最好的情况是，无论汽车去哪里，Y 元素（我假设您的文档中只有一个称为 Y 的元素）永远不会显示“碰撞”？
ax bx - bw
@Katana314 这不是我编写代码的方式，我刚刚展示了函数和 if 条件不起作用...让我上传完整代码
@Adil.R 你展示的细节数量没有问题，但是“它不起作用”尤其是一个有点烦人的短语，因为通常我们想要一个稍微详细一点的帐户，例如：“我希望当我单击此按钮时，我的图像会改变颜色，但什么都没有发生。”或“...但是，图像消失了。”了解当前症状对于准确地确定什么非常重要。
@Adil.R 好吧，足够接近了。我正在考虑的确切文本类似于“它应该显示文本说“碰撞”，但即使它们相交，也不会发生任何事情”。我会对此进行尝试。

标签： javascript image collision detection

【解决方案1】：

我觉得你为Intersect 写的实际上是一个“IsContainedIn”函数。 Intersect 的自然表达应该是这样，加上括号以帮助操作顺序：

"（A的右侧X边是否包含在B中，OR是A的左侧X边包含在B中），AND，（A的底边Y边是否包含在B中，OR是包含在 B) 中的 A 的顶部 Y 边"

而且，详细地说，“包含在”中意味着： "这个数字在 B 的 X/Y 值和 B 的 X/Y 值加上它的宽度之间吗？"

很有可能到最后，if 子句会变得很大。

您当前等式的主要问题是所有语句都用“&&”连接。我不确定是否所有子句都可能同时为真，除非其中一个可能以精确的方式适合另一个。

如果您仍然无法将其写出来，可能会有一些关于“Axis-Aligned Bounding Box Collision”的教程可以帮助您 - 他们也可以提供视觉样本来帮助您获得空间概念在你的脑海里。

【讨论】：

谢谢！我实际上是 javascript 以及 HTML 中的画布的新手，这就是我在此处发布此内容的唯一原因：p