如何使用 Javascript 创建重力效果？

Posted 2023-05-08

【中文标题】如何使用 Javascript 创建重力效果？

【英文标题】：How to create a gravity effect with Javascript?

【发布时间】：2012-02-08 04:15:55

【问题描述】：

Google gravity 和 gravity script 是两个不错的演示。 但没有可用的源代码或教程。而且原始的JS文件很大。 如何在某个元素上通过拖放创建重力效果（特别是“Throwable”和“rotatable”，如谷歌重力）？

【问题讨论】：

查看您的第二个链接，代码绝对可用——位于gravityscript.googlecode.com/svn/trunk/gravityscript.js。它很大，但那是因为它包含几个库，包括 jQuery 和 Box2D。除此之外，它实际上是相当可读的。只需跳过缩小 JS 的大块到实际的格式化代码即可。

其实看重力脚本code.google.com/p/gravityscript/source/browse/trunk/…的src代码，只有jQuery的src代码被混淆了，而重力的代码没有。应该不难弄清楚。

类似于***.com/questions/2185850/…

建立重力效果很容易。但我最需要的是用于使“谷歌重力”元素“可投掷”的算法。它不仅仅是移动和释放。它也是“可旋转的”，这一点非常重要。

@Towhid：通过将鼠标视为您握住它的枢轴点（带有一些摩擦力），可旋转对象似乎（从玩它）。这种“算法”后来被称为牛顿力学。

【参考方案1】：

您需要从物理引擎开始，Google Gravity 使用的引擎是 Box2Djs，它是 Box2D 的 javascript 端口。您可以阅读 Box2D 的手册以了解如何使用它，尽管手册本身指出，如果没有一些刚体物理知识（力、冲量、扭矩等），您将几乎不知道自己在做什么，尽管这些示例可能帮助您入门。

如果您想自己编写物理引擎，您至少必须实现 2D 刚体动力学和碰撞检测，才能使其看起来像您提供的示例。这样做的教程将被称为计算机模拟课程，并且具有线性代数和物理 I 的先决条件，这不是一项简单的任务。

之后，您将不得不学习 javascript 动画技术。我建议了解window.requestAnimationFrame。使用setInterval(stepFunction, time) 会起作用，但它不会像在现代浏览器中那样高效。

【讨论】：

谢谢，它的 JS 版本在 @box2d-js.sourceforge.net/index2.html 可用。但我想在实际的 HTML 元素上创建这种效果。例如，我有一些社交按钮，当页面被激活时会掉下来，用户可以扔掉它们并玩主题:)。 Box2dJS 非常适合基于 Web 的游戏开发，但我认为它基于“convas”而不是 HTML 元素。

【参考方案2】：

在 github 上查看这个 jquery 插件JQuery.throwable 只要做$("Selector").throwable()，物体就会受到重力影响