两个 div vanillaJS 之间的碰撞没有检测到 - Javascript

简介

本文将介绍如何使用纯 vanilla JavaScript 检测两个 div 元素之间的碰撞。碰撞检测是在游戏开发和交互式网页设计中非常常见的任务，通过检测碰撞可以触发特定的事件或者改变元素的行为。

我们将使用 JavaScript 来计算和比较两个 div 元素的位置和尺寸，以判断它们是否发生碰撞。本文将提供一个完整的例子，演示如何检测碰撞并执行相应的操作。

碰撞检测算法

在开始编写代码之前，我们需要了解一种常用的碰撞检测算法——矩形碰撞检测。这个算法基于简化的假设，即我们只关心元素的包围盒（矩形区域），而不考虑元素的形状。

矩形碰撞检测算法的基本思想是比较两个矩形的左侧、右侧、上方和下方边界的位置关系。如果两个矩形的边界有交叉或者重叠，那么就认为它们发生了碰撞。

代码实现

function detectCollision(elem1, elem2) {
  const rect1 = elem1.getBoundingClientRect();
  const rect2 = elem2.getBoundingClientRect();

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

// 示例用法
const div1 = document.getElementById('div1');
const div2 = document.getElementById('div2');

if (detectCollision(div1, div2)) {
  // 两个 div 发生了碰撞
  // 执行相应的操作
} else {
  // 两个 div 未发生碰撞
  // 执行其他操作
}

在上述代码中，我们定义了一个名为 detectCollision 的函数，它接受两个参数 elem1 和 elem2，表示要进行碰撞检测的两个 div 元素。

首先，我们使用 getBoundingClientRect 方法获取每个元素的位置和尺寸信息，存储在 rect1 和 rect2 变量中。

接下来，我们使用矩形碰撞检测算法进行比较。通过比较两个矩形的边界位置关系，判断是否发生了碰撞。如果两个矩形的边界有交叉或者重叠，detectCollision 函数将返回 true，表示发生了碰撞；否则返回 false，表示未发生碰撞。

在示例用法部分，我们获取了两个需要进行碰撞检测的 div 元素，并将它们传递给 detectCollision 函数进行检测。根据检测结果，我们可以执行相应的操作。

总结

本文介绍了如何使用纯 vanilla JavaScript 进行两个 div 元素之间的碰撞检测。我们使用了矩形碰撞检测算法，通过比较元素的包围盒（矩形区域）来判断是否发生碰撞。

通过编写 detectCollision 函数，我们可以灵活地检测不同元素之间的碰撞，并根据检测结果执行不同的操作。

希望本文对你理解碰撞检测和使用 vanilla JavaScript 进行相关开发有所帮助！