有没有一个能够与HTML元素（如div）一起使用而不是在画布中运行的JavaScript物理库？

Question

我正在为一个游戏设计一个简单的堆栈，玩家可以移动编号的方块来跟踪他们收集胜利手牌的进度。目前我选择了jQuery UI的可拖放组件，它很容易上手，但只能一次移动一个方块：http://cssdeck.com/labs/cowmmudd/4。

我想将方块的移动外包给一个真正的JavaScript物理库，而不是使用jQuery UI。（这样当你把上排的蓝色4向左移动到底时，它会强制将该行上的所有方块聚集在一起。）

我希望继续使用普通的HTML元素来表示我的方块，因为这样更容易进行样式和推理。（我看过的所有JavaScript物理库都使用canvas，但我想实现与Google曾经做过的相同效果：http://mrdoob.com/projects/chromeexperiments/google-gravity/）

有人能够提供一个最简单的示例来控制普通的非画布HTML元素的放置和碰撞，使用他们所知道的最好的JavaScript物理库吗？

- Cetin Sert

---

你确定使用额外的外部库是正确的方法吗？如果下落时只检查相同高度的瓦片，并且如果它们可以向左移动，则将它们动画化到那里，这样怎么样？ - Benjamin Gruenbaum

@BenjaminGruenbaum 我不想写很多难以维护的代码，因为我对物理、数学和几何一窍不通。我希望声明游戏对象的属性，并由一个适当的库来处理碰撞和放置。 - Cetin Sert

Box2d的JS版本有一个使用canvas的调试渲染器，但那只是默认设置。你可以按照自己的方式渲染对象——模拟和绘制是相互独立的。 - Stefan Haustein

Answer 1

到目前为止我找到的最简单的例子是：http://bl.ocks.org/3411189 更新: 到我的代码片段的一个简单适应: http://cssdeck.com/labs/fe3z2cfx/6

- Cetin Sert

---

这些链接是否会不经警告就被删除，还是它们是永久的固定装置？在大多数情况下，您最好将实际代码粘贴到您的答案中，并引用该链接。否则，如果资源突然消失，您的答案就变得无用了。另请参见http://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers。 - Robert Harvey

@RobertHarvey：你说得对，我会按照你的建议编辑cssdeck！ - Cetin Sert

@RobertHarvey：我更新了我的答案，包含了两个短的JS代码片段，并添加了它们原始来源的引用。 - Cetin Sert

这是另一个看起来很有前途的有趣项目：http://wellcaffeinated.net/PhysicsJS/ - Divey