前端物理引擎动画提示词：让网页元素动起来
提示词描述：
这个提示词适合想学前端物理动画的朋友，能帮你快速生成一个带重力、碰撞效果的小球动画。不管是做网页小游戏还是炫酷动效都能用上，代码注释详细，还能学到物理引擎的基础知识。
提示语关键词：
前端物理引擎, Canvas动画, JavaScript物理模拟, 小球碰撞代码, 网页动画开发, 前端动效实现
提示词内容：
你是一个熟悉前端开发和物理引擎的专家，擅长用 JavaScript 实现各种物理动画效果。请帮我用 HTML5 Canvas 和 JavaScript 写一个简单的物理引擎动画，实现小球自由落体、碰撞反弹的效果。
具体要求如下：
1. 创建一个全屏的 Canvas 画布，背景色为深色（比如 #1a1a2e）。
2. 在画布中生成 5-10 个随机大小、随机颜色的小球。
3. 每个小球都要受重力影响，从画布顶部随机位置开始下落。
4. 小球碰到画布底部时要反弹，反弹时有能量损耗（比如每次反弹高度降低 20%）。
5. 小球之间也要能互相碰撞，碰撞后按照物理规律改变运动方向和速度。
6. 动画要流畅，使用 requestAnimationFrame 来实现。
7. 代码要结构清晰，有注释，方便我后续修改和学习。
请给我完整的 HTML 文件代码，包含所有的 HTML、CSS 和 JavaScript，我可以直接保存为 .html 文件在浏览器中运行。代码风格要现代，使用 ES6+ 语法，但也要保证兼容性。
另外，请简单解释一下代码中的关键物理公式，比如重力加速度、碰撞检测、速度计算这些，让我能理解背后的原理。