体验：http://mrdoob.com/projects/chromeexperiments/google_gravity/

1. var canvas;
3. var delta = [0,0];
4. var stage = [window.screenX,window.screenY,window.innerWidth,window.innerHeight];
5. getBrowserDimensions();
7. var isRunning = false;
8. var isMouseDown = false;
10. var worldAABB;
11. var world;
12. var iterations = 1;
13. var timeStep = 1/25; 
15. var walls = new Array();
16. var wall_thickness = 200;
17. var wallsSetted = false;
19. var mouseJoint;
20. var mouseX = 0;
21. var mouseY = 0;
23. var mouseOnClick = new Array();
25. var timer = 0;
27. var elements = new Array();
28. var bodies = new Array();
29. var properties = new Array();
31. var gWebSearch;
32. var imFeelingLuckyMode = false;
33. var resultBodies = new Array();
35. var orientation = { x: 0, y: 1 };
37. init();
39. if (location.search != "")
40. {
41.         var params = location.search.substr(1).split("&")
43.         for (var i = 0; i < params.length; i++)
44.         {
45.                 var param = params[i].split("=");
47.                 if (param[0] == "q")
48.                 {
49.                         document.getElementById(‘q’).value = param[1];
50.                         run();
51.                         break;
52.                 }
53.         }
54. }
56. // GOOGLE API
58. function onLoad()
59. {
60.         gWebSearch = new GwebSearch();
61.         gWebSearch.setResultSetSize(GSearch.SMALL_RESULTSET);
62.         gWebSearch.setSearchCompleteCallback(null, onWebSearch);
64.         if (document.getElementById(‘q’).value != ”)
65.                 search();
66. }
68. function onWebSearch()
69. {
70.         if(imFeelingLuckyMode)
71.         {
72.                 location.href = gWebSearch.results[0].unescapedUrl;
73.                 return;
74.         }
75.         
76.         for (var i = 0; i < gWebSearch.results.length; i++)
77.                 addResult(gWebSearch.results[i]);
78. }
80. //
82. function init()
83. {
84.         canvas = document.getElementById(‘canvas’);
85.         
86.         document.onmousedown = onDocumentMouseDown;
87.         document.onmouseup = onDocumentMouseUp;
88.         document.onmousemove = onDocumentMouseMove;
89.         document.ondblclick = onDocumentDoubleClick;
90.         
91.         document.onkeypress = onDocumentKeyPress;
94.         document.addEventListener(‘touchstart’, onDocumentTouchStart, false);
95.         document.addEventListener(‘touchmove’, onDocumentTouchMove, false);
96.         document.addEventListener(‘touchend’, onDocumentTouchEnd, false);
98.         window.addEventListener( ‘deviceorientation’, onWindowDeviceOrientation, false );
100.         // init box2d
101.         
102.         worldAABB = new b2AABB();
103.         worldAABB.minVertex.Set(-200, -200);
104.         worldAABB.maxVertex.Set( screen.width + 200, screen.height + 200);
106.         world = new b2World(worldAABB, new b2Vec2(0, 0), true);
107.         
108.         // walls        
109.         setWalls();
111.         // Get box2d elements
112.         
113.         elements = getElementsByClass("box2d");
114.                 
115.         for (i = 0; i < elements.length; i++) {
117.                 var element = elements[i];
118.                 properties[i] = findPos(element);
119.                 properties[i][2] = element.offsetWidth;
120.                 properties[i][3] = element.offsetHeight;
121.         }
122.         
123.         for (i = 0; i < elements.length; i++) {
124.                 var element = elements[i];
125.                 element.style.position = ‘absolute’;
126.                 element.style.left = properties[i][0] + ‘px’;
127.                 element.style.top = properties[i][1] + ‘px’;
128.                 // element.style.backgroundColor = ‘#ffff00’;
129.                 element.onmousedown = onElementMouseDown;
130.                 element.onmouseup = onElementMouseUp;
131.                 element.onclick = onElementClick;
132.                 
133.                 bodies[i] = createBox(world, properties[i][0] + (properties[i][2] >> 1), properties[i][1] + (properties[i][3] >> 1), properties[i][2] / 2, properties[i][3] / 2, false);                
134.         }
135. }
137. function run() {
139.         isRunning = true;
140.         setInterval(loop, 25);        
141. }
143. //
145. function onDocumentMouseDown() {
147.         isMouseDown = true;
148.         return false;
149. }
151. function onDocumentMouseUp() {
153.         isMouseDown = false;
154.         return false;
155. }
157. function onDocumentMouseMove() {
159.         if (!isRunning)
160.                 run();
162.         mouseX = window.event.clientX;
163.         mouseY = window.event.clientY;
164. }
166. function onDocumentDoubleClick() {
168.         reset();
169. }
171. function onDocumentKeyPress(event) {
173.         if (event.charCode == 13)
174.                 search();
175. }
177. function onDocumentTouchStart( event ) {
179.         if(event.touches.length == 1) {
181.                 event.preventDefault();
183.                 if (!isRunning)
184.                         run();
186.                 // Faking double click for touch devices
188.                 var now = new Date().getTime();
190.                 if (now – timeOfLastTouch  < 250) {
192.                         reset();
193.                         return;
194.                 }
196.                 timeOfLastTouch = now;
198.                 mouseX = event.touches[0].pageX;
199.                 mouseY = event.touches[0].pageY;
200.                 isMouseDown = true;
201.         }
202. }
204. function onDocumentTouchMove( event ) {
206.         if(event.touches.length == 1) {
208.                 event.preventDefault();
210.                 mouseX = event.touches[0].pageX;
211.                 mouseY = event.touches[0].pageY;
212.         }
213. }
215. function onDocumentTouchEnd( event ) {
217.         if(event.touches.length == 0) {
219.                 event.preventDefault();
220.                 isMouseDown = false;
221.         }
222. }
224. function onWindowDeviceOrientation( event ) {
226.         if ( event.beta ) {
228.                 orientation.x = Math.sin( event.gamma * Math.PI / 180 );
229.                 orientation.y = Math.sin( ( Math.PI / 4 ) + event.beta * Math.PI / 180 );
231.         }
233. }
235. //
237. function onElementMouseDown() {
239.         mouseOnClick[0] = window.event.clientX;
240.         mouseOnClick[1] = window.event.clientY;        
241.         return false;
242. }
244. function onElementMouseUp() {
246.         return false;
247. }
249. function onElementClick() {
251.         var range = 5;
252.         
253.         if (mouseOnClick[0] > window.event.clientX + range || mouseOnClick[0] < window.event.clientX – range && mouseOnClick[1] > window.event.clientY + range || mouseOnClick[1] < window.event.clientY – range)
254.                 return false;
255.         
256.         if (this == document.getElementById(‘btnG’)) search();
257.         if (this == document.getElementById(‘btnI’)) imFeelingLucky();
258.         if (this == document.getElementById(‘q’)) document.f.q.focus();
259. }
261. // API STUFF
263. function search() {
265.         if (!isRunning)
266.                 run();
267.         
268.         onDocumentDoubleClick(); // clean
269.         gWebSearch.execute(document.getElementById(‘q’).value);
270.         return false;
271. }
273. function imFeelingLucky() {
275.         imFeelingLuckyMode = true;
276.         gWebSearch.execute(document.getElementById(‘q’).value);
277.         return false;        
278. }
280. function addResult(data) {
282.         var element = document.createElement(‘div’);
283.         element.innerHTML = ‘<div><h3 class=r><a href="’ + data.unescapedUrl + ‘" class=l onmousedown="return clk(this.href,\’\’,\’\’,\’res\’,\’1\’,\’&amp;sig2=3Ti89FTuSYfE6a-5k1jjKQ\’)">’ + data.title + ‘</a></h3><span style=display:inline-block><button class=w10 title="Promote"></button><button class=w20 title="Remove"></button></span><div class="s">’ + data.content + ‘<br><cite>’ + data.visibleUrl + ‘</cite></div>’;
284.         
285.         canvas.appendChild(element);
286.         properties.push([Math.random() * (window.innerWidth / 2),-200,600,element.offsetHeight]);
287.         
288.         var i = properties.length – 1;
290.         element.style.position = ‘absolute’;
291.         element.style.left = 0 + ‘px’;
292.         element.style.top = -100 + ‘px’;
293.         element.style.backgroundColor = ‘#ffffff’;
294.         element.onmousedown = onElementMouseDown;
295.         element.onmouseup = onElementMouseUp;
296.         element.onclick = onElementClick;
298.         elements[i] = element;
300.         resultBodies.push( bodies[i] = createBox(world, properties[i][0] + (properties[i][2] >> 1), properties[i][1] + (properties[i][3] >> 1), properties[i][2] / 2, properties[i][3] / 2, false, element) );
301.         
302. }
304. function reset() {
306.         for (i = 0; i < resultBodies.length; i++) {
308.                 var body = resultBodies[i]
309.                 canvas.removeChild( body.GetUserData().element );
310.                 world.DestroyBody(body);
311.                 body = null;
312.         }
313.         
314.         resultBodies = new Array();
315. }
317. //
319. function loop() {
321.         if (getBrowserDimensions())
322.                 setWalls();
324.         delta[0] += (0 – delta[0]) * .5;
325.         delta[1] += (0 – delta[1]) * .5;
326.         
327.         world.m_gravity.x = orientation.x * 350 + delta[0];
328.         world.m_gravity.y = orientation.y * 350 + delta[1];
330.         mouseDrag();
331.         world.Step(timeStep, iterations);        
332.         
333.         for (i = 0; i < elements.length; i++) {
335.                 var body = bodies[i];
336.                 var element = elements[i];
337.                 
338.                 element.style.left = (body.m_position0.x – (properties[i][2] >> 1)) + ‘px’;
339.                 element.style.top = (body.m_position0.y – (properties[i][3] >> 1)) + ‘px’;
341.                 var rotationStyle = ‘rotate(‘ + (body.m_rotation0 * 57.2957795) + ‘deg)’;
343.                 element.style.WebkitTransform = rotationStyle;
344.                 element.style.MozTransform = rotationStyle;
345.                 element.style.OTransform = rotationStyle;
346.         }
347. }
350. // .. BOX2D UTILS
352. function createBox(world, x, y, width, height, fixed, element) {
354.         if (typeof(fixed) == ‘undefined’)
355.                 fixed = true;
357.         var boxSd = new b2BoxDef();
359.         if (!fixed)
360.                 boxSd.density = 1.0;
362.         boxSd.extents.Set(width, height);
364.         var boxBd = new b2BodyDef();
365.         boxBd.AddShape(boxSd);
366.         boxBd.position.Set(x,y);
367.         boxBd.userData = {element: element};
369.         return world.CreateBody(boxBd)
370. }
372. function mouseDrag() {
374.         // mouse press
375.         if (isMouseDown && !mouseJoint) {
377.                 var body = getBodyAtMouse();
378.                 
379.                 if (body) {
381.                         var md = new b2MouseJointDef();
382.                         md.body1 = world.m_groundBody;
383.                         md.body2 = body;
384.                         md.target.Set(mouseX, mouseY);
385.                         md.maxForce = 30000.0 * body.m_mass;
386.                         md.timeStep = timeStep;
387.                         mouseJoint = world.CreateJoint(md);
388.                         body.WakeUp();
389.                 }
390.         }
391.         
392.         // mouse release
393.         if (!isMouseDown) {
395.                 if (mouseJoint) {
397.                         world.DestroyJoint(mouseJoint);
398.                         mouseJoint = null;
399.                 }
400.         }
401.         
402.         // mouse move
403.         if (mouseJoint) {
405.                 var p2 = new b2Vec2(mouseX, mouseY);
406.                 mouseJoint.SetTarget(p2);
407.         }
408. }
410. function getBodyAtMouse() {
412.         // Make a small box.
413.         var mousePVec = new b2Vec2();
414.         mousePVec.Set(mouseX, mouseY);
415.         
416.         var aabb = new b2AABB();
417.         aabb.minVertex.Set(mouseX – 1, mouseY – 1);
418.         aabb.maxVertex.Set(mouseX + 1, mouseY + 1);
420.         // Query the world for overlapping shapes.
421.         var k_maxCount = 10;
422.         var shapes = new Array();
423.         var count = world.Query(aabb, shapes, k_maxCount);
424.         var body = null;
425.         
426.         for (var i = 0; i < count; ++i) {
428.                 if (shapes[i].m_body.IsStatic() == false) {
430.                         if ( shapes[i].TestPoint(mousePVec) ) {
432.                                 body = shapes[i].m_body;
433.                                 break;
434.                         }
435.                 }
436.         }
438.         return body;
439. }
441. function setWalls() {
443.         if (wallsSetted) {
445.                 world.DestroyBody(walls[0]);
446.                 world.DestroyBody(walls[1]);
447.                 world.DestroyBody(walls[2]);
448.                 world.DestroyBody(walls[3]);
449.                 
450.                 walls[0] = null; 
451.                 walls[1] = null;
452.                 walls[2] = null;
453.                 walls[3] = null;
454.         }
455.         
456.         walls[0] = createBox(world, stage[2] / 2, – wall_thickness, stage[2], wall_thickness);
457.         walls[1] = createBox(world, stage[2] / 2, stage[3] + wall_thickness, stage[2], wall_thickness);
458.         walls[2] = createBox(world, – wall_thickness, stage[3] / 2, wall_thickness, stage[3]);
459.         walls[3] = createBox(world, stage[2] + wall_thickness, stage[3] / 2, wall_thickness, stage[3]);        
460.         
461.         wallsSetted = true;
462. }
464. // .. UTILS
466. function getElementsByClass( searchClass ) {
468.         var classElements = new Array();
469.         var els = document.getElementsByTagName(‘*’);
470.         var elsLen = els.length
472.         for (i = 0, j = 0; i < elsLen; i++) {
474.                 var classes = els[i].className.split(‘ ‘);
475.                 for (k = 0; k < classes.length; k++)
476.                         if ( classes[k] == searchClass )
477.                                 classElements[j++] = els[i];
478.         }
480.         return classElements;
481. }
483. function findPos(obj) {
485.         var curleft = curtop = 0;
487.         if (obj.offsetParent) {
489.                 do {
491.                         curleft += obj.offsetLeft;
492.                         curtop += obj.offsetTop;
494.                 } while (obj = obj.offsetParent);
495.         }
497.         return [curleft,curtop];
498. }
500. function getBrowserDimensions() {
502.         var changed = false;
503.                 
504.         if (stage[0] != window.screenX) {
506.                 delta[0] = (window.screenX – stage[0]) * 50;
507.                 stage[0] = window.screenX;
508.                 changed = true;
509.         }
510.         
511.         if (stage[1] != window.screenY) {
513.                 delta[1] = (window.screenY – stage[1]) * 50;
514.                 stage[1] = window.screenY;
515.                 changed = true;
516.         }
517.         
518.         if (stage[2] != window.innerWidth) {
520.                 stage[2] = window.innerWidth;
521.                 changed = true;
522.         }
523.         
524.         if (stage[3] != window.innerHeight) {
526.                 stage[3] = window.innerHeight;
527.                 changed = true;
528.         }
529.         
530.         return changed;
531. }

复制代码 直接地址：
http://mrdoob.com/projects/chrom … _gravity/js/Main.js