Vue3 TypeScript 碰撞检测: 如何判断和获取碰撞方向

在 Vue3 TypeScript 中，可以使用getBoundingClientRect()方法来获取元素的位置和尺寸信息，然后通过比较两个元素的位置信息来判断是否发生碰撞，并获取碰撞方向。\n\n首先，需要在<script>标签中导入ref和onMounted方法，并创建一个ref来引用要检测碰撞的div元素：\n\ntypescript\nimport { ref, onMounted } from 'vue';\n\nexport default {\n setup() {\n const targetRef = ref(null);\n\n onMounted(() => {\n // 在mounted生命周期中获取targetRef的位置信息\n const target = targetRef.value;\n const targetRect = target.getBoundingClientRect();\n\n // 获取其他相同class的div元素\n const otherDivs = document.getElementsByClassName(target.className);\n\n // 遍历其他div元素，并判断是否与目标元素发生碰撞\n for (let i = 0; i < otherDivs.length; i++) {\n const otherDivRect = otherDivs[i].getBoundingClientRect();\n\n // 判断碰撞方向\n if (\n targetRect.right >= otherDivRect.left &&\n targetRect.left <= otherDivRect.right &&\n targetRect.bottom >= otherDivRect.top &&\n targetRect.top <= otherDivRect.bottom\n ) {\n // 发生碰撞，根据位置信息判断碰撞方向\n const collisionDirection = {\n top: targetRect.bottom <= otherDivRect.top,\n right: targetRect.left >= otherDivRect.right,\n bottom: targetRect.top >= otherDivRect.bottom,\n left: targetRect.right <= otherDivRect.left,\n };\n\n console.log('发生碰撞，碰撞方向：', collisionDirection);\n }\n }\n });\n\n return {\n targetRef,\n };\n },\n};\n\n\n接下来，在模板中将targetRef绑定到要检测碰撞的div元素上：\n\nhtml\n<template>\n <div ref="targetRef" class="collision-div"></div>\n</template>\n\n\n注意，上述代码中的collision-div是要检测碰撞的div元素的class名称，需要根据实际情况进行修改。\n\n当div元素发生碰撞时，会在控制台输出碰撞方向的信息。你可以根据实际需求，将碰撞方向的信息用于其他操作。