如何检查两张图片是否接触

在JavaScript中，我们可以通过计算两个元素的坐标来检查它们是否接触。如果两张图片的坐标重叠，则它们是接触的。

以下是一个示例函数，用于检查两个元素是否接触：

function isOverlap(element1, element2) {
  const rect1 = element1.getBoundingClientRect();
  const rect2 = element2.getBoundingClientRect();

  return !(
    rect1.bottom < rect2.top ||
    rect1.top > rect2.bottom ||
    rect1.right < rect2.left ||
    rect1.left > rect2.right
  );
}

此函数接受两个参数，即要检查是否接触的两个元素。它使用 getBoundingClientRect() 方法来获取每个元素的矩形信息，然后计算它们是否重叠。如果元素重叠，则返回 true，否则返回 false。

我们可以在网页中创建两张图片元素，然后调用此函数以检查它们是否接触。以下是一个示例：

<img id="image1" src="image1.png">
<img id="image2" src="image2.png">

<script>
const image1 = document.getElementById('image1');
const image2 = document.getElementById('image2');

if (isOverlap(image1, image2)) {
  console.log('The images are overlapping!');
} else {
  console.log('The images are not overlapping.');
}
</script>

在此示例中，我们获取了两个图片元素的引用，并将它们作为参数传递给 isOverlap() 函数。如果图片重叠，则在控制台中打印消息。

注意，此函数只能检查两个元素是否重叠，而不能检查它们是否完全重合。如果您需要检查两个元素是否完全重合，则需要使用其他技术，例如比较它们的像素值。

希望这个示例能够帮助你检查两张图片是否接触。