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

JS異步編程二：自由落體

作者：當(dāng)耐特磚家
開發(fā) 前端
各種網(wǎng)絡(luò)游戲，不管是3D的還是第一視角的，或者橫版游戲（如冒險(xiǎn)島），模擬一個(gè)重力場是必須的。先回顧一下谷歌在牛頓誕辰，logo換成了自由落體的蘋果。

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

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

先回顧一下谷歌在牛頓誕辰，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！不去仔細(xì)琢磨邏輯，光從代碼語意上，是非常令人費(fèi)解的。

在沒有口語編程之前，我非常想把代碼寫成這樣：

  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)用以后的口語編程接口！那么怎么才能寫出這樣漂亮的代碼？

這個(gè)時(shí)候【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.     </script> 
  56. </head> 
  57. <body> 
  58.     <div id="dropBox" style="position: absolute; top: 20;"> 
  59.         <img id="heart" src="heart.gif" alt="" /> 
  60.     </div> 
  61.     <script type="text/javascript"> 
  62.         executeAsync().start();  
  63.     </script> 
  64. </body> 
  65. </html> 

Jquery的animate可以用來制作一些動(dòng)畫效果，但僅限于勻速的直線運(yùn)動(dòng)，或者勻速的漸變，當(dāng)然你可以用下面這種費(fèi)解的方式去實(shí)現(xiàn)變速運(yùn)動(dòng)，而且要通過大量的計(jì)算才能減少與真實(shí)運(yùn)動(dòng)的差別。

  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.         } 

如果是拋物線呢？對(duì)于這種變速運(yùn)動(dòng)Jquery的animate真是力不從心啊！

如果不用【jxcex】 ,你會(huì)陷入一大堆回調(diào)循環(huán)當(dāng)中，痛不欲生！當(dāng)然如果你覺得很爽，你能想明白，又不想讓別人看明白，那又是另外一回事了。

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

代碼下載

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

【編輯推薦】

  1. JS異步編程一：用Jscex畫圓
  2. JS異步編程三：Jscex無創(chuàng)痕切入jQUI
  3. JS異步編程四：Jscex+jQ打造游戲力度條
  4. JS異步編程五：Jscex制作憤怒的小鳥
  5. 看JavaScript如何實(shí)現(xiàn)頁面自適

 

責(zé)任編輯：張偉 來源： 當(dāng)耐特磚家的博客
JavaScript
相關(guān)推薦

2011-02-22 09:09:21

.NETAsync CTP異步

2021-10-21 09:01:18

Python條件語句Python基礎(chǔ)

2015-10-09 10:30:38

TIOBE編程語言排行榜

2015-06-08 14:41:30

編程語言排行榜

2012-06-14 13:40:04

JavaScript

2019-01-17 10:58:52

JS異步編程前端

2013-04-01 15:38:54

異步編程異步編程模型

2021-02-05 14:44:59

區(qū)塊鏈銀行技術(shù)

2012-06-14 14:03:19

JavaScript

2012-06-14 14:42:42

JavaScript

2021-03-23 07:56:54

JS基礎(chǔ)同步異步編程EventLoop底層

2013-04-01 15:25:41

異步編程異步EMP

2020-10-15 13:29:57

javascript

2011-02-22 08:49:16

.NET同步異步

2012-06-14 14:09:58

JavaScript

2017-06-29 11:00:49

2014-05-23 10:12:20

Javascript異步編程

2015-04-22 10:50:18

JavascriptJavascript異

2016-09-07 20:43:36

Javascript異步編程

2017-07-13 12:12:19

前端JavaScript異步編程
點(diǎn)贊
收藏

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