HTML5 Canvas弹性碰撞沙盒的核心是构建可预测、可调节、可扩展的物理系统，通过向量运算实现牛顿力学建模，用requestAnimationFrame驱动稳定更新，并解耦Ball、PhysicsWorld与CanvasRenderer三类对象。
在HTML5中用Canvas模拟弹性碰撞物理沙盒，关键不是堆砌动画，而是构建可预测、可调节、可扩展的物理行为系统。核心在于把牛顿力学简化为可计算的向量操作，并通过requestAnimationFrame驱动稳定帧率更新。
物理建模：从球体属性到动量守恒
每个小球需携带位置（x, y）、速度（vx, vy）、质量（mass）、半径（radius）和恢复系数（restitution，通常0.7–0.99）。质量影响碰撞后的速度分配；恢复系数决定能量保留比例——值越接近1，反弹越“完全弹性”。
两个球发生碰撞时，按以下步骤响应：
- 计算两球中心连线方向的单位法向量（normal）
- 将各自速度投影到法向与切向，仅法向分量参与动量交换
- 套用一维弹性碰撞公式更新法向速度：
v1′ = v1 − (1 + e) ⋅ m2/(m1 + m2) ⋅ (v1 − v2) ⋅ normal
v2′ = v2 − (1 + e) ⋅ m1/(m1 + m2) ⋅ (v2 − v1) ⋅ normal - 重新合成速度向量，保留原切向分量不变
碰撞检测：避免穿透，支持多体实时判断
不能等球“重叠”才响应，否则视觉穿模明显。采用“预测性检测”：每帧检查球心距离是否 ≤ 半径之和，并记录上一帧未碰撞、本帧进入临界距离的事件。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
为提升效率：
- 对圆形物体，用距离平方比较替代开方运算（dx² + dy² < (r₁ + r₂)²）
- 引入空间分区（如网格划分或四叉树），跳过远距离球对的检测
- 边界碰撞单独处理：当球心距左/右/上/下边缘 ≤ 半径时，直接反转对应速度分量并乘以恢复系数
系统架构：分离关注点，便于调试与扩展
不把绘制、物理、输入混写在一起。推荐三类对象解耦：
- Ball类：只管自身状态（位置、速度、质量）和更新逻辑（受重力、阻尼、碰撞影响）
- PhysicsWorld类：统一管理所有球体，执行全局碰撞检测、动量交换、重力加速度（可设为0模拟失重）和能量衰减（如每帧乘0.999）
- CanvasRenderer类：仅负责清屏、描边、填充、抗锯齿设置，不参与任何计算
主循环结构清晰：
function gameLoop() {
world.update(timeStep); // 物理步进
renderer.draw(world.balls); // 渲染当前状态
requestAnimationFrame(gameLoop);
}
交互与可调性：让沙盒真正“可实验”
一个合格的物理沙盒必须支持即时干预：
- 鼠标拖拽生成新球（松手即赋予初速度）
- 滑块实时调节重力大小、空气阻力、全局恢复系数
- 按键切换模式：自由落体 / 水平抛射 / 静电斥力（可选扩展）
- 显示辅助信息：速度矢量箭头、动能数值、碰撞计数器
所有参数暴露为全局变量或配置对象，方便教学演示或学生修改验证理论。
