用requestAnimationFrame驱动弹球游戏更流畅省资源，通过矩形/圆形碰撞检测实现自然物理效果；初始化画布与小球状态，设置位置、速度、半径、颜色及重力；每帧更新位置、应用重力、边界碰撞检测并修正位置与速度，最后清空并重绘小球。
用 requestAnimationFrame 驱动弹球游戏，比 setInterval 更流畅、更省资源，再配上基础的矩形/圆形碰撞检测，就能做出响应及时、物理感自然的小游戏。
初始化画布与小球状态
先获取 上下文，定义小球的初始位置、速度、半径和颜色。注意：小球本质是带速度的圆，边界碰撞只需反向速度分量，无需复杂物理引擎。
- 设置
canvas.width和canvas.height（别只靠 CSS 缩放，否则坐标会错） - 小球对象至少包含：
x,y,vx,vy,r（半径） - 给
vy初始值（比如-2），让球一开始向上飞；加点重力可设gravity = 0.1
在动画循环中更新与绘制
把逻辑更新和渲染放在同一个 requestAnimationFrame 回调里，确保每帧只执行一次，且与屏幕刷新率同步。
- 每次帧开始时，先更新小球位置：
x += vx; y += vy; - 加上重力影响：
vy += gravity; - 接着做碰撞检测——重点在“检测后立即修正位置+翻转速度”，避免卡墙或穿模
- 最后清空画布并重绘小球：
ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill();
实现边界碰撞（左右/上下墙壁）
这是最常用的碰撞类型。检测小球圆心到画布边缘的距离是否小于半径，成立则反弹。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 右墙碰撞：
if (x + r > canvas.width) { x = canvas.width - r; vx *= -0.95; }（-0.95 是能量衰减，模拟阻力） - 左墙：
if (x - r - 下墙（地面）：
if (y + r > canvas.height) { y = canvas.height - r; vy *= -0.85; }（地面摩擦通常更大） - 上墙：
if (y - r
注意：赋值 x = canvas.width - r 等是关键，防止因浮点误差导致下一帧仍触发碰撞而抖动。
加入一个静止方块作为障碍物（矩形-圆形碰撞）
判断小球是否撞到矩形障碍，核心是「找圆心到矩形的最近点」，再测该点到圆心距离是否 ≤ 半径。
- 假设方块位置为
bx, by，宽bw，高bh - 计算最近点：
closestX = clamp(x, bx, bx + bw); closestY = clamp(y, by, by + bh);（clamp是取区间内值的函数） - 算距离：
dx = x - closestX; dy = y - closestY;，若dx*dx + dy*dy 就发生碰撞 - 反弹策略：简单做法是根据最近点方位反向对应速度分量（如最近点在左边，就
vx *= -0.9；在上方，就vy *= -0.9）
const clamp = (v, min, max) => Math.max(min, Math.min(max, v));不复杂但容易忽略：所有位置更新和碰撞修正必须在单次帧逻辑中完成，不能拆到多个 setTimeout 或事件里；requestAnimationFrame 自动递归调用，记得在回调末尾再调一次它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
