Vue3 碰撞检测：如何判断两个 div 元素是否发生碰撞？

在 Vue3 中，可以使用 Intersection Observer API 来检测两个 div 元素是否发生碰撞。以下是一个示例代码：

在 Vue 组件中，使用 ref 来引用需要检测碰撞的 div 元素：

<template>
  <div>
    <div ref='div1'>Div 1</div>
    <div ref='div2'>Div 2</div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const div1 = ref(null);
    const div2 = ref(null);

    onMounted(() => {
      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            console.log('Div 1 and Div 2 are colliding');
            // 这里可以执行相应的操作
          }
        });
      });

      observer.observe(div1.value);
      observer.observe(div2.value);
    });

    return {
      div1,
      div2,
    };
  },
};
</script>

在onMounted 钩子函数中，创建一个新的 Intersection Observer 实例，并使用observe 方法观察 div1 和 div2 元素。
在观察器的回调函数中，通过isIntersecting 属性判断两个 div 元素是否发生碰撞。

请注意，在此示例中，我们只检测了是否发生了碰撞，如果需要检测碰撞的方向，可以使用intersectionRatio 属性来判断碰撞的位置，例如：

if (entry.intersectionRatio > 0) {
  // 说明发生了碰撞，可以根据 entry.boundingClientRect 和 entry.rootBounds 来判断碰撞的方向
}

希望对你有帮助！