如何在 javascript 中检测两个图像之间的冲突

How to detect collision between two images in javascript?

本文关键字：两个 图像 之间 冲突 javascript 检测      更新时间：2023-09-26

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

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";
    }

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

"（A 的右侧 X 边缘是否包含在 B 中，或者 A 的

左侧 X 边缘包含在 B 中），并且，（A 的底部 Y 边缘是否包含在 B 中，或者是否是 A 的顶部 Y 边缘包含在 B 中）"

而且，详细地说，"包含在"意味着："这个数字是介于 B 的 X/Y 值和 B 的 X/Y 值加上其宽度之间的数字"

很有可能最终，if条款会变得相当大。

当前方程的主要问题是所有语句都与"&&"相连。我不确定所有子句是否有可能同时为真，除非其中一个以确切的方式适合另一个。

如果您仍然无法将其写出来，可能会有一些关于"轴对齐边界框碰撞"的教程可以帮助您 - 他们也可以提供视觉样本，以帮助您在脑海中了解它的空间概念。

相关文章：