一堆div的JavaScript爆炸物理

我不知道该怎么做

形势 我有一堆div，它们都是相对于document.body绝对定位的。我知道每个部门的大小和位置。我还有爆炸原点的位置

目标 我想做的是在爆炸原点模拟一次爆炸，让所有的潜水艇飞离爆炸，但最终停下来。i、 e.模拟爆炸

他们是不是有什么物理公式大师可以告诉我需要使用什么公式？我的猜测类似于给爆炸点一些质量，然后用它来计算div的速度

我想把这个做好，所以我对任何会产生不太现实效果的捷径公式都不感兴趣

如果有任何高效、轻量级的JavaScript物理库可以使这项任务变得更容易，那么这将是非常好的选择。虽然我不想要任何基于jQuery的东西，但我需要尽可能地保持它的轻量级。而且没有一个库有一个完整的代码库来处理canvas元素，因为这只会添加大量不需要的代码

阿里，先谢谢你

与上述问题无关的背景故事，请随意忽略 我之所以实现这一点，是因为我认为这对于一些史诗般的页面转换效果是很好的。所以我想通过分解所有主要可见div来进行转换

到目前为止，我已经实现了一些代码，用一堆准备爆炸的小div替换视口中的一个大div

这是我到目前为止的实现。您将看到对非JavaScript本机函数的引用，这是因为我使用的是闭包库，要显示所有内容将非常困难

/**
 * @constructor
  */
 pwd.fx.Explode = function (div) {
     this.element_ = div;
 }


 /**
  * @public
  */
 pwd.fx.Explode.prototype.play = function () {
     this.viewportOffset = goog.style.getViewportPageOffset(document);
     this.size = goog.style.getBounds(this.element_);
     this.position = goog.style.getClientPosition(this.element_);
     this.backgroundColour = goog.style.getBackgroundColor(this.element_);

     // Set the explosion centre
     // relative to the viewport
     this.explosionEpicentre = new goog.math.Coordinate(
         this.position.x + Math.floor(this.size.width / 2),
         this.position.y + Math.floor(this.size.height / 2)
     );

     this.seperate();
 }

 /**
  * @private
  * Seperates the current div into loads of little divs
  */
 pwd.fx.Explode.prototype.seperate = function () {
     var idealSize = new goog.math.Size(35, 35);
     var widths = pwd.math.algorithms.getExactFit(idealSize.width, this.size.width);
     var heights = pwd.math.algorithms.getExactFit(idealSize.height, this.size.height);

     // Remove the node as it will be replaced by blocks
     goog.dom.removeNode(this.element_);

     var cumulativeHeight = 0;
     for (var i = 0; i < heights.length; i++) {
         var cumulativeWidth = 0;
         for (var j = 0; j < widths.length; j++) {
             var blockSize = new goog.math.Size(widths[j], heights[i]);
             var blockRelativePosition = new goog.math.Coordinate(cumulativeWidth, cumulativeHeight);
             cumulativeWidth += widths[j];
             var blockPosition = new goog.math.Coordinate.sum(this.position, blockRelativePosition);
             // Add the block
             this.addBlock(blockSize, blockPosition, this.backgroundColour);
         }
         cumulativeHeight += heights[i];
     }
 }

 /**
  * Add a block
  * All positions are relative to the viewport
  * @private
  */
 pwd.fx.Explode.prototype.addBlock = function (blockSize, blockPosition, backgroundColour) {
     var block = document.createElement("div");

     // Height and width
     block.style.width = blockSize.width + "px";
     block.style.height = blockSize.height + "px";

     // Positioning
     block.style.position = "absolute";
     block.style.left = this.viewportOffset.x + blockPosition.x + "px";
     block.style.top = this.viewportOffset.y + blockPosition.y + "px";

     // Styling
     block.style.backgroundColor = backgroundColour;

     // Add to document relative to viewport
     document.body.appendChild(block);

     // Explode block
     // TODO...?
 }

/**
*@constructor
*/
pwd.fx.Explode=函数（div）{
this.element=div；
}
/**
*@公众
*/
pwd.fx.Explode.prototype.play=函数（）{
this.viewportOffset=goog.style.getViewportPageOffset（文档）；
this.size=goog.style.getBounds（this.element_）；
this.position=goog.style.getClientPosition（this.element_）；
this.backgroundcolor=goog.style.getBackgroundColor（this.element）；
//设置爆炸中心
//相对于视口
this.explosionEpicentre=new goog.math.Coordinate(
此.position.x+数学地板（此.size.width/2），
this.position.y+数学地板（this.size.height/2）
);
这个；
}
/**
*@私人
*将当前div分为多个小div
*/
pwd.fx.Explode.prototype.separate=函数（）{
var idealSize=新的谷歌数学尺寸（35,35）；
var widths=pwd.math.algorithms.getExactFit（idealSize.width，this.size.width）；
var heights=pwd.math.algorithms.getExactFit（idealSize.height，this.size.height）；
//删除节点，因为它将被块替换
goog.dom.removeNode（this.element）；
var累积权重=0；
对于（变量i=0；i

你最好在物理论坛上提问。你只需要知道牛顿力学的基础知识。给你的物体一个质量。计算在任何一个时间点作用在每个物体上的净力。（爆炸和重力）。给定该力，计算任意一个时间点的加速度。给定加速度，如果随时间t保持不变，它将改变速度v。如果你让它们停下来，它会变得更复杂，这会带来反弹和摩擦。反弹非常简单-如果速度为v，反弹系数为a，那么反弹时，速度变为-va。要计算摩擦力施加的力，它与将物体推到一起的力成正比。摩擦力=一对表面的摩擦系数x将它们推到一起的力。（这与它们的表面积无关——信不信由你——大多数情况下都是这样。）要在2D中进行这些计算，你需要将力、加速度、速度等分解为两个分量，x和y。如果你知道如何绕过直角三角形，这很容易。（正弦、余弦、棕褐色、毕达哥拉斯）。最后，如果你想让你的div互相碰撞，你需要知道动量守恒，可能还有能量守恒，我记不起这些是怎么回事了

---

我猜你不想让你的div旋转。角速度和动量，所有这些都比较复杂。

你最好在物理论坛上提问。你只需要知道纽托的基本知识