如何测试两个<img/>是否相互接触

Question

我正在尝试制作这款迷你游戏，让你们互相争斗。我使用了两个<img>作为角色，我在两个<img>上都得到了移动但是，我希望在<img>触摸时你可以选择打它们。

我要问的是如何测试他们是否感动。我很确定我可以处理其他所有事情，如果不能，我可以查看任何内容。我已经尝试了数百次，但是他们中没有一个真正在谈论<img>只是像div一样。如果他们确实谈到<img>，那就非常混乱了。

Answer 1

检查两个<img>元素是否相互接触或重叠的一种方法是使用$.position()，$.height()和$.width()函数检索左上角每个元素的位置，高度和宽度。

使用这些功能，您可以计算图像元素的四个坐标，左上角，右上角，左下角和右下角。每个坐标应具有x坐标和y坐标。然后，您还必须实施overlap算法来检查图像元素＆＃39;坐标以确定它们是否相互接触或重叠。

您可以查看此fiddle。

• coordinates函数计算元素的四个坐标。
• 不完整 overlap函数检查两个元素的坐标。
• 您可以通过更改right css属性的值来水平滑动第二个图像。

就像我说的那样，overlap功能不完整;它只检查两个元素的顶部x坐标是否接触/重叠。 （不会为你做整件事： - ））

可能有其他更简单的方法可以做到这一点，但这适用于我建立的游戏。