getBoundingClientRect() 用于矩形碰撞检测最快但有陷阱：需手动校正 transform、scroll 和 iframe 偏移；圆形碰撞用 dxdx + dydy
矩形碰撞用
getBoundingClientRect()最快但有陷阱浏览器原生的
getBoundingClientRect()返回的是元素在视口中的绝对坐标，适合做轴对齐矩形（AABB）粗筛。它快、兼容性好，但容易忽略 transform、scroll、iframe 偏移带来的误差。常见错误是直接比对两个
getBoundingClientRect()的top/left值，结果在缩放页面或用了transform: scale(0.8)时完全失效——因为该方法返回的坐标不反映 CSS transform 的实际视觉位置。
- 必须先用
element.style.transform或getComputedStyle()提取缩放/位移，并手动校正坐标- 滚动容器内（如
overflow: scroll）要减去容器的scrollTop/scrollLeft- 跨 iframe 元素需调用目标 iframe 的
contentDocument上的方法，不能直接传入父页面的 element圆形碰撞靠距离公式，别用
Math.hypot()在老浏览器里翻车两个圆心距离小于半径和即为碰撞。核心就是
dx*dx + dy*dy —— 这个写法比调用 <code>Math.hypot(dx, dy)更安全、更快，且兼容 IE 和早期安卓 WebView。性能上，开方运算（
Math.sqrt或Math.hypot）比纯乘加慢 3–5 倍；逻辑上，比较平方距离完全等价，还省掉浮点误差风险。立即学习“前端免费学习笔记（深入）”；
- 避免写成
Math.hypot(x1-x2, y1-y2) ，尤其在每帧跑几十次的循环里- 如果圆心坐标来自
getBoundingClientRect()，注意它的width/height是渲染后尺寸，但圆半径可能是 CSS 设置值，二者单位可能不一致（比如用了vw或%）- 动画中元素被
scale()缩放时，半径也要同步缩放，不能只靠 DOM 尺寸像素级碰撞用
canvas.getContext('2d').getImageData()要防跨域当需要检测不规则形状（比如带透明边缘的角色图）是否真正“像素相触”，就得采样 canvas 图像数据。但一旦图片来自外域（CDN、用户上传），
getImageData()会直接抛SecurityError: The operation is insecure.，且无法捕获。这不是 bug，是浏览器强制的 canvas 污染策略。绕过方式只有服务端代理或提前用 CORS 请求加载图片。
- 加载图片时必须显式设置
img.crossOrigin = 'anonymous'，且服务端响应头含Access-Control-Allow-Origin- 不要在
img.onload里立刻读 canvas 数据——得等 canvas 绘制完成，最好加一层requestAnimationFrame确保渲染队列清空- 每次读取整块图像数据开销大，建议只读两物体包围盒交集区域，用
ctx.getImageData(x, y, width, height)限定范围物理引擎里用
Matter.js的CollisionStart事件要注意触发时机
Matter.js的碰撞事件不是逐帧轮询出来的，而是基于离散时间步的冲量计算。这意味着高速移动的小物体（比如子弹）可能“穿过”障碍物而不触发CollisionStart—— 它根本没在任一帧里与障碍物的 AABB 重叠。这不是配置问题，是算法限制。解决思路不是调高
timing.timeScale，而是改用连续碰撞检测（CCD），但 Matter 默认不开启，需手动启用并设body.collisionFilter.group配合。
- 给高速体设
isSensor: true可让它不产生物理响应，只发事件，降低误穿概率- 关键逻辑（如射击判定）别依赖单次
CollisionStart，应结合前一帧位置做线段投射（raycast）补检engine.world.bodies中 body 的position是世界坐标，但事件里的pair.bodyA.position可能滞后一帧，要用Body.getPosition(body)实时取真正在意精度时，没有“通用解”。矩形筛、圆形判、像素验、物理引擎补 —— 得按物体运动速度、形状复杂度、性能预算这几条线来回切。漏掉哪条，上线后就会在某个特定帧率/设备/缩放比例下静默失效。
碰撞检测怎么做_HTML5引擎中物体碰撞的检测方法【技巧】
陌浩大大_9222
发布时间：2026-02-09 16:06:51
|1083人浏览过
|来源于php中文网
原创
相关文章
如何在 HTML 中将图片置于文本右侧（使用 Flexbox 布局）
如何精准高亮当前标签组的父级过滤器（而非全局所有父级）
为什么 JavaScript 中 input 的值无法显示在页面上？
WordPress短代码中嵌入If-Else条件的正确写法与页面级条件渲染实践
如何在 HTML 中将图片放置在文本右侧（Flex 布局实现）
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
相关专题
php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法，还有更多js正则表达式的相关文章、相关下载、相关课程，供大家免费下载体验。
4596
2023.06.20
JS全称JavaScript，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言，主要用于Web，常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢？php中文网给大家带来了相关的教程以及文章，欢迎大家前来学习阅读。
1395
2023.07.28
js字符串转数组的方法：1、使用“split()”方法；2、使用“Array.from()”方法；3、使用for循环遍历；4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容，供大家免费下载体验。
1818
2023.08.03
JS是JavaScript的缩写，它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言，通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果，如表单验证、页面元素操作、动画效果、数据交互等。
10143
2023.08.17
js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。
1000
2023.09.01
js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容，供大家免费下载体验。
2864
2023.09.04
Js中concat和push的区别：1、concat用于将两个或多个数组合并成一个新数组，并返回这个新数组，而push用于向数组的末尾添加一个或多个元素，并返回修改后的数组的新长度；2、concat不会修改原始数组，是创建新的数组，而push会修改原数组，将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容，供大家免费下载体验。
1589
2023.09.14
JavaScript字符串截取方法，包括substring、slice、substr、charAt和split方法。这些方法可以根据具体需求，灵活地截取字符串的不同部分。在实际开发中，根据具体情况选择合适的方法进行字符串截取，能够提高代码的效率和可读性 。
4929
2023.09.21
Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章，帮助读者完成上线流程。
40
2026.10.28
热门下载
相关下载
精品课程
最新文章
