题 如何用Javascript创建重力效果?


谷歌重力 和 重力脚本 是两个很好的示威游行。 但是没有可用的源代码或教程。而原始的JS文件非常大。 如何通过拖放创建重力效果(特别是“扔了“和”可旋转“像谷歌引力”对某个元素?


12
2018-01-11 19:35


起源


看看你的第二个链接,代码绝对可用 - 它就在 gravityscript.googlecode.com/svn/trunk/gravityscript.js。它很大,但那是因为它包含了几个库,包括jQuery和Box2D。除此之外,它实际上是相当可读的。只需跳过跳过缩小的JS的大块到实际的格式化代码。 - Ian Clelland
实际上,如果你看一下重力脚本的src代码 code.google.com/p/gravityscript/source/browse/trunk/...,只有jQuery src代码被混淆,但重力的代码却没有。要弄清楚这一点应该不难。 - Grace Shao
如同 stackoverflow.com/questions/2185850/... - j08691
建立重力效应很容易。但我最需要的是用于使“谷歌引力”元素“投掷能力”的算法。它不只是移动和释放。它也是“可旋转的”,这非常重要。 - Towhid
@Towhid:旋转似乎是(从玩它),将鼠标视为你握住它的枢轴点(带有一定的摩擦力)。然后,“算法”被称为牛顿力学。 - derobert


答案:


您将需要从物理引擎开始,Google Gravity使用的是物理引擎 Box2Djs 这是一个javascript端口 Box2D的。你可以阅读Box2D的手册来学习如何使用它,虽然手册本身表明你不知道你在做什么而没有刚体物理(力,冲动,扭矩等)的知识,尽管这些例子可能帮助您入门。

如果你想自己编写物理引擎,你必须至少实现2D刚体动力学和碰撞检测,看起来就像你给出的例子。这样做的教程将被称为计算机模拟类,并且具有线性代数和物理I先决条件,这不是一项微不足道的任务。

之后,您将不得不学习javascript动画技术。我建议学习一下 window.requestAnimationFrame。运用 setInterval(stepFunction, time) 会有效,但它不会像现代浏览器那样高效。


8
2018-01-12 20:32



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


在github上查看这个jquery插件 JQuery.throwable 做就是了 $("Selector").throwable() 并且物体将受到重力作用


5
2018-03-20 22:25