我正在尝试创建类似于《寿司猫》游戏的HTML5游戏。我遵循了Emanuele Feronato博客文章中的类似教程，然后提出了像这张图中的图片a一样的结构，其中灰色轨道可以相互穿透，红线是distantConstraint。
但问题是，当斑点从高处落下(或撞到角落)时，它会变成图片B中的样子。
我试着使用弹簧，不同的约束力，较小的轨道，但它们不能正常工作。
我的问题：
-
解决方案是什么？或者在哪里可以在网上找到解决方案？
-
有没有其他js物理引擎有特定的功能来完成这项任务？
移除对称
只需向这些点添加一些附加约束即可。目前形状的对称性意味着圆形和对折都是有效和宽松的配置。
径向约束
使用从中心到外部的一条线作为参考，给每个轮辐一个与该线的偏移角度。
然后，每个外部点将按如下方式移动。
获取参考线的角度。
var ang = Math.atan2(refLine.p2.y - refLine.p1.y, refLine.p2.x - refLine.p1.x);
然后，对于每条线，将端点移向其所需的相对角度位置。
// line is a spoke line with a property angle that is the angle from the
// reference line
var x = refLine.p1.x; // get center point
var y = refLine.p2.y;
// get position relative to ref ang
line.x = Math.cos(line.angle + ang) * line.length + x;
line.y = Math.sin(line.angle + ang) * line.length + y;
对每条轮辐线执行此操作，并在应用线长度约束后应用它。
根据你给出的图像，从中心到12点钟的线是参考线，那么其他辐条线的角度将受到如下限制。
- 1点钟距参考30度
- 2点钟是60
- 3是90，因此在180度时为6
和另一个方向
- 11点钟距参考线-30度
- 10点钟是-60，依此类推
您将能够忽略6点钟线，以防给它一个约束会使对象想要向右滚动。
只有一个
这意味着，对于可能的状态，只有一个解决方案，而不是你所拥有的许多。
斑点折叠成自己的原因是重力会挤压斑点点，并且距离关节会找到新的有效配置。距离关节的工作只是在两点之间保持给定的距离，它并不能真正防止自折叠。
另一种方法是使用棱镜关节(也称为"滑块关节")。对于棱柱关节，外部斑点圆将从斑点中心沿径向轴滑动。为了使斑点有弹性，你可以在斑点中心和圆之间添加一些弹簧。如果斑点仍然自折叠，则可以对棱柱关节添加限制，使圆只能滑动一定距离。
这段视频使用RUBE物理编辑器(使用引擎盖下的box2d)以类似的方式演示了棱柱关节。
使用p2.js物理引擎制作了一个类似的场景，点击此处阅读更多。(直接链接到演示)。p2.js演示中构造棱镜关节的代码部分是：
// Constrain the capsule body to the center body.
// A prismatic constraint lets it move radially from the center body along one axis
var prismatic = new p2.PrismaticConstraint(wheelBody, body, {
localAnchorA : [0, 0],
localAnchorB : [0, 0],
localAxisA : [Math.cos(angle), Math.sin(angle)],
disableRotationalLock: true, // Let the capsule rotate around its own axis
collideConnected: true
});
在JavaScript中，有几个可用的Box2D端口具有Prismatic Joint。p2.js具有PrismaticConstraint。
定容节理可能就是您想要的。正如它的名字所暗示的，它试图保持它在创作时的体积，尽管有来自外部的冲动，就像一个水气球。这是一个演示。
Box2dweb的一个工作示例可以在这里找到。
如果你有兴趣通过创造性地应用更多标准关节来创建斑点，我会想到这篇文章。