canvas 2d 渲染必须用 requestanimationframe 而非 setinterval，因其能自动适配刷新率与页面可见性；游戏主循环应递归调用，结合 Δt 物理计算，并采用扫掠检测或点到矩形边距离校验替代朴素 aabb，防止穿模。
Canvas 2D 渲染循环必须用 requestAnimationFrame，别用 setInterval
用 setInterval 控制游戏帧率会导致时间漂移、卡顿明显，尤其在页面切到后台再切回时容易堆叠定时器。浏览器对 requestAnimationFrame 有原生节流和暂停感知，能自动适配屏幕刷新率（60Hz/120Hz）和页面可见性。
实操建议：
- 主循环写成递归调用：
function gameLoop() { update(); render(); requestAnimationFrame(gameLoop); } - 别在
requestAnimationFrame回调里做耗时计算（如遍历全部砖块做碰撞检测前先粗筛） - 记录上一帧时间戳（
performance.now()），用 Δt 做物理位移，避免帧率波动导致球速不一致
球与挡板/砖块的碰撞检测不能只靠矩形包围盒（AABB）
球是圆形，挡板和砖块是矩形，直接用 rect intersects circle 的朴素判断会漏判边缘碰撞，尤其球速快时出现“穿模”——球从砖块缝隙穿过却不触发销毁。
正确做法是实现“移动扫掠检测”或至少做两步校验：
立即学习“前端免费学习笔记（深入）”；
- 先用 AABB 快速排除完全不相交的情况
- 再对可能相交的砖块，计算球心到矩形四条边的最短距离，判断是否 ≤ 球半径
- 挡板碰撞需额外处理：球横向速度反向后，要限制其 y 方向速度不能为 0（否则球会贴着挡板滑行）
示例关键逻辑：const distToEdge = distanceFromPointToRectEdge(ball.x, ball.y, brick.x, brick.y, brick.width, brick.height); if (distToEdge
