本文详解如何在基于 html5 canvas 的小球物理模拟中，实现在两球发生碰撞时各自切换为新的随机十六进制颜色，且仅影响参与碰撞的两个小球，不干扰其他球体。
本文详解如何在基于 html5 canvas 的小球物理模拟中，实现在两球发生碰撞时各自切换为新的随机十六进制颜色，且仅影响参与碰撞的两个小球，不干扰其他球体。
要在 Canvas 小球物理模拟中实现“碰撞变色”效果，关键在于将颜色状态纳入小球对象，并在碰撞逻辑执行完毕后立即更新双方颜色。整个流程需三步协同：初始化颜色、渲染时应用颜色、在 collide() 方法中触发颜色重置。
✅ 步骤一：为 Ball 实例添加 color 属性
在 Ball 构造函数中初始化随机颜色，确保每个新创建的小球自带唯一视觉标识：
function Ball(x, y, vx, vy, r = 45, m = 4 / 3 * Math.PI * (r ** 3)) {
this.r = r;
this.m = m;
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
// 新增：初始化随机颜色（十六进制格式）
this.color = "#" + Math.floor(Math.random() * 16777215).toString(16);
}
? 16777215 即 0xFFFFFF（24位真彩色最大值），toString(16) 将其转为不含前导零的十六进制字符串，拼接 "#" 后即为标准 CSS 颜色值（如 #a3f9c1）。
✅ 步骤二：在 draw() 中使用 color 渲染
修改 Ball.prototype.draw，显式设置 fillStyle 并调用 fill()（注意：原代码仅调用 arc() 未填充，需补全路径与填充逻辑）：
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
draw() {
ctx.fillStyle = this.color; // 关键：应用当前颜色
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, Math.TAU);
ctx.fill(); // 必须调用 fill() 才能显示颜色
}
⚠️ 注意：原代码中 ctx.moveTo() 和 ctx.arc() 后未调用 fill() 或 stroke()，会导致小球不可见或仅显示描边。此处必须使用 fill() 实现实心着色。
✅ 步骤三：在 collide() 中同步更新双球颜色
核心逻辑位于 Ball.prototype.collide 方法末尾——即动量交换完成、位置已回退校正后，立即为两个参与碰撞的小球分配新颜色：
collide(b, time) {
// ...（原有物理计算代码，保持不变）...
// ✅ 碰撞物理处理完成后，刷新双方颜色
const randomColor = Math.floor(Math.random() * 16777215).toString(16);
this.color = "#" + randomColor; // 当前球（a）
b.color = "#" + randomColor; // 相撞球（b）
}
该设计严格满足需求：
- ✅ 仅影响实际发生碰撞的两个 Ball 实例；
- ✅ 每次碰撞均生成全新独立随机色（即使两球同色也属巧合）；
- ✅ 不依赖全局变量或外部状态，完全封装在对象行为内。
? 补充说明与最佳实践
- 性能考虑：Math.random() 开销极小，无需缓存或优化；颜色生成发生在稀疏的碰撞事件中，对帧率无实质影响。
- 可扩展性：若需差异化配色（如避免同色），可在 collide() 中添加循环重试逻辑，但当前需求下无需复杂化。
- 调试提示：可在 collide() 中加入 console.log("Collision! →", this.color, b.color) 辅助验证颜色更新时机。
- 边界注意：确保 resolveCollisions() 中的碰撞检测逻辑（interceptBallTime）准确触发 collide()，否则颜色不会更新——本例中该逻辑已完备。
通过以上三处精准修改，即可让物理模拟兼具真实性与视觉反馈：每一次弹性碰撞不仅改变速度矢量，更以色彩跃动强化交互感知，显著提升用户体验与代码表现力。
