js判断两图片是否触碰

在JavaScript中，如果你要在两个图片之间判断是否发生碰撞（即触碰），通常可以利用HTML的Canvas API和一些数学计算。下面是一个基本的示例，假设我们有两个圆形图片对象，每个都有各自的x、y坐标以及宽度和高度（这里假定它们都是正方形）：

// 假设我们有两个正方形图片
const img1 = { x: 100, y: 100, width: 50, height: 50 };
const img2 = { x: 200, y: 200, width: 50, height: 50 };

// 计算边界矩形
function getBoundingRect(img) {
  return { x: img.x, y: img.y, width: img.width, height: img.height };
}

// 判断两个矩形是否相交
function doOverlap(rectA, rectB) {
  return !(
    rectA.x + rectA.width < rectB.x ||   // A 的右边缘在 B 的左边缘左侧
    rectB.x + rectB.width < rectA.x ||   // B 的右边缘在 A 的左边缘左侧
    rectA.y + rectA.height < rectB.y ||  // A 的下边缘在 B 的上边缘上方
    rectB.y + rectB.height < rectA.y  // B 的下边缘在 A 的上边缘上方
  );
}

// 判断图片1和图片2是否触碰
if (doOverlap(getBoundingRect(img1), getBoundingRect(img2))) {
  console.log('Images touch each other.');
} else {
  console.log('Images don\'t touch.');
}

这个示例首先获取每个图片的边界矩形，然后比较这两个矩形的边界，如果任何一边交叉，那么就认为两个图片有触碰。