如果两个<img>彼此接触

How do I test if two <img> are touching each other

本文关键字：gt img 接触 lt 两个 如果      更新时间：2023-09-26

我正在尝试创建一个迷你游戏，在这个游戏中你们可以互相战斗。我用了两个<img>作为字符，我在两个<img>上都向下移动了，但是，我想这样做，当<img>接触时，你可以选择击打它们。

我所问的只是如何测试它们是否接触。我很确定我能处理其他一切，如果不能，我可以查任何东西。我试着查了几百次，但没有一个像div一样真正谈论<img>。如果他们真的谈论<img>，那就非常令人困惑。

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

使用这些函数，您可以计算图像元素的四个坐标，左上、右上、左下和右下。每个坐标应该有一个x坐标和一个y坐标。然后，您还必须实现overlap算法来检查图像元素的坐标，以查看它们是否相互接触或重叠。

你可以看看这把小提琴。

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

正如我所说，overlap函数是不完整的；它仅检查两个元素的顶部x坐标是否接触/重叠。（不会为你做所有的事情：-）

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

相关文章：