自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

Jscex模擬重力場與google蘋果logo的比較

作者：zhanglei
開發(fā) 前端
各種網(wǎng)絡(luò)游戲，不管是3D的還是第一視角的，或者橫版游戲(如冒險島)，模擬一個重力場是必須的。本節(jié)與大家分享JavaScript異步編程之Jscex模擬重力場與google蘋果logo的比較。

重力場：地球重力作用的空間。在該空間中，每一點都有惟一的一個重力矢量與之相對應(yīng)。

各種網(wǎng)絡(luò)游戲，不管是3D的還是***視角的，或者橫版游戲(如冒險島)，模擬一個重力場是必須的。

先回顧一下谷歌在牛頓誕辰，logo換成了自由落體的蘋果。

  1. <html> 
  2. <script language="javascript"> 
  3.     var h = 0, v = 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> 

也只有這樣的代碼才能調(diào)用以后的口語編程接口!那么怎么才能寫出這樣漂亮的代碼?

這個時候【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可以用來制作一些動畫效果，但僅限于勻速的直線運動，或者勻速的漸變，當然你可以用下面這種費解的方式去實現(xiàn)變速運動，而且要通過大量的計算才能減少與真實運動的差別。

  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】 ,你會陷入一大堆回調(diào)循環(huán)當中，痛不欲生!當然如果你覺得很爽，你能想明白，又不想讓別人看明白，那又是另外一回事了。

不過話說----代碼是寫給別人看的。

【代碼示例下載】

***的【jxcex】 庫，請上https://github.com/JeffreyZhao/jscex 或者http://www.sndacode.com/projects/jscex/wiki下載吧····

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

【編輯推薦】

  1. JavaScript異步編程之用Jscex畫圓
  2. 使用HTML 5和Javascript設(shè)計繪圖程序
  3. 使用Jscex改善JavaScript異步編程體驗
  4. 一個純JavaScript游戲:狙擊野鴨
  5. 16個優(yōu)秀的JavaScript教程和庫推薦
責(zé)任編輯：陳貽新 來源： zhanglei的博客
JavaScript
點贊
收藏

51CTO技術(shù)棧公眾號