Jscex模拟重力场与google苹果logo的比较


重力场:地球重力作用的空间。在该空间中,每一点都有惟一的一个重力矢量与之相对应。


各种网络游戏,不管是3D的还是第一视角的,或者横版游戏(如冒险岛),模拟一个重力场是必须的。


先回顾一下谷歌在牛顿诞辰,logo换成了自由落体的苹果。


  1. <html> 
  2. <script language="javascript"> 
  3.     var h = 0v = 1;  
  4.     window.setTimeout(aa, 2000);  
  5.     function aa() {  
  6.         var i = self.setInterval("bb()", 25);  
  7.     }  
  8.     function bb() {  
  9.         var f = document.getElementById('fall');  
  10.         var r = parseInt(f.style.right) + h;  
  11.         var b = parseInt(f.style.bottom) - v;  
  12.         f.style.right = r + 'px';  
  13.         f.style.bottom = b + 'px';  
  14.         if (b > -210) {  
  15.             v += 2;  
  16.         } else {  
  17.             h = (v > 9) ? v * 0.1 : 0;  
  18.             v *= (v > 9) ? -0.3 : 0;  
  19.         }  
  20.     }  
  21. </script> 
  22. <body> 
  23.     <div id="fall" style="position: relative; right: -300px; bottom: -46px"> 
  24.        apple  
  25.     </div> 
  26. </body> 
  27. </html> 

可以看到setTimeout和setInterval!不去仔细琢磨逻辑,光从代码语意上,是非常令人费解的。


在没有口语编程之前,我非常想把代码写成这样:


  1. <html> 
  2. <script language="javascript"> 
  3.         function drop() {  
  4.              //自由落体  
  5.              code  here  
  6.              //撞击地面之后  
  7.              code  here  
  8.              //苹果摔烂  
  9.              code  here  
  10.         }  
  11.         </script> 
  12. <body> 
  13.     <div id="fall" style="position: relative; right: -300px; bottom: -46px"> 
  14.        apple  
  15.     </div> 
  16. <script language="javascript"> 
  17. drop();  
  18. </script> 
  19. </body> 
  20. </html> 

也只有这样的代码才能调用以后的口语编程接口!那么怎么才能写出这样漂亮的代码?


这个时候【jxcex】 闪亮登场!


  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
  2. <html> 
  3. <head> 
  4.     <title>Jscex Animation</title> 
  5.     <script language="javascript" type="text/javascript" src="lib/uglifyjs-parser.js"></script> 
  6.     <script language="javascript" type="text/javascript" src="src/jscex.js"></script> 
  7.     <script language="javascript" type="text/javascript" src="src/jscex.builderBase.js"></script> 
  8.     <script language="javascript" type="text/javascript" src="src/jscex.async.js"></script> 
  9.     <!--[if IE]> 
  10.     <script language="javascript" type="text/javascript" src="http://www.cnblogs.com/lib/json2.js"></script> 
  11.     <script language="javascript"> 
  12.         Jscex.config.codeGenerator = function (code) { return "false || " + code; }  
  13.     </script> 
  14.     <![endif]--> 
  15.     <script type="text/javascript"> 
  16.         var dropAsync = eval(Jscex.compile("async", function (e, startPos, speedY, duration) {  
  17.             $await(Jscex.Async.sleep(2000));  
  18.             //e.style.left = startPos.x;  
  19.             //重力加速度  
  20.             var g = 50;  
  21.             var time = 0;  
  22.             var tag = 0;  
  23.             while (time < duration) {  
  24.                 $await(Jscex.Async.sleep(25));  
  25.                 if (time < 800) {  
  26.                     //自由落体  
  27.                     timetime = time + 50;  
  28.                     speedYspeedY = speedY + g;  
  29.                     startPos.y += speedY * 0.05;  
  30.                     e.style.top = startPos.y;  
  31.                 }  
  32.                 else {  
  33.                     //撞击地面                   
  34.                     if (speedY > 0 && tag == 0) {  
  35.                         tag = 1;  
  36.                         speedY = -speedY;  
  37.                         speedYspeedY = speedY / 3;  
  38.                     }  
  39.                     timetime = time + 50;  
  40.                     speedYspeedY = speedY + g;  
  41.                     startPos.y += speedY * 0.05;  
  42.                     e.style.top = startPos.y;  
  43.                 }  
  44.             }  
  45.         }));  
  46.         var changeImageAsync = eval(Jscex.compile("async", function () {  
  47.             document.getElementById("heart").src = "grieve.gif";  
  48.         }));  
  49.         var executeAsync = eval(Jscex.compile("async", function () {  
  50.             //自由落体并撞击地面  
  51.             $await(dropAsync(document.getElementById("dropBox"), { x: 0, y: 20 }, 0, 1350));  
  52.             //❤碎  
  53.             $await(changeImageAsync());  
  54.         }));  
  55.         
  56.     </script> 
  57. </head> 
  58. <body> 
  59.     <div id="dropBox" style="position: absolute; top: 20;"> 
  60.         <img id="heart" src="heart.gif" alt="" /> 
  61.     </div> 
  62.     <script type="text/javascript"> 
  63.         executeAsync().start();  
  64.     </script> 
  65. </body> 
  66. </html> 

Jquery的animate可以用来制作一些动画效果,但仅限于匀速的直线运动,或者匀速的渐变,当然你可以用下面这种费解的方式去实现变速运动,而且要通过大量的计算才能减少与真实运动的差别。


  1. var i =0 ;  
  2.         var time = 0;  
  3.         var z = 100;  
  4.         function drop() {  
  5.             if (time <7000) {  
  6.                 i += 5;  
  7.                 z -=1;  
  8.                 $(".block").animate({ top: i }, z);  
  9.                 time += 50;  
  10.                 drop();  
  11.             }  
  12.         } 

如果是抛物线呢?对于这种变速运动Jquery的animate真是力不从心啊!


如果不用【jxcex】 ,你会陷入一大堆回调循环当中,痛不欲生!当然如果你觉得很爽,你能想明白,又不想让别人看明白,那又是另外一回事了。


不过话说----代码是写给别人看的。


【代码示例下载】


最新的【jxcex】 库,请上https://github.com/JeffreyZhao/jscex 或者http://www.sndacode.com/projects/jscex/wiki下载吧····


原文:http://www.cnblogs.com/iamzhanglei/archive/2011/08/19/2145239.html




标签:

友情链接
轻松育儿世界奇观
苏ICP备16066217号-2