2012-01-11 105 views
12

Google gravity和​​是两个很好的示范。 ,但没有可用的源代码或教程。和原始的JS文件非常大。 如何创建一个重力效果与拖动&下降(特别是“投掷”和“旋转”像谷歌的重力)在某一元素?如何用Javascript创建重力效果?

+7

看你的第二个链接,代码绝对可用 - 它在http://gravityscript.googlecode.com /svn/trunk/gravityscript.js。它很大,但那是因为它包含了几个库,包括jQuery和Box2D。除此之外,它实际上是相当可读的。只需跳过跳过大块缩小的JS到实际格式化的代码。 – 2012-01-11 19:47:56

+0

实际上,如果您查看引力脚本http://code.google.com/p/gravityscript/source/browse/trunk/gravityscript.js的src代码,只会对jQuery src代码进行模糊处理,但代码重力不是。应该不难弄清楚。 – 2012-01-11 19:49:40

+1

类似于http://stackoverflow.com/questions/2185850/drag-elements-around-with-gravity-effect – j08691 2012-01-11 20:33:46

回答

8

你会希望从物理引擎开始,Google Gravity使用的是Box2Djs这是一个JavaScript端口Box2D。您可以阅读Box2D手册以了解如何使用它,虽然手册本身声明,如果您不了解刚体物理(力,冲量,扭矩等),您将不知道自己在做什么,尽管这些示例可能帮助你开始。

如果你想自己编写物理引擎,你必须至少实现二维刚体动力学和碰撞检测才能看起来像你给的例子。这样做的教程将被称为计算机模拟类,并且将具有线性代数和物理前提条件,这不是一项简单的任务。

之后,您将不得不学习JavaScript动画技巧。我建议学习window.requestAnimationFrame。使用setInterval(stepFunction, time)可以工作,但不会像现代浏览器中那样高效。

+1

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

5

看在github上一本jQuery插件JQuery.throwable 只是做$("Selector").throwable()和对象会在重力作用下