完美世界,听中国有声小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

JS異步編程二：自由落體

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

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到欒川網(wǎng)站設(shè)計(jì)與欒川網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋欒川地區(qū)。

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

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

 
 
   
  
     
  
     
  
      var h = 0, v = 1;    
  
      window.setTimeout(aa, 2000);    
  
      function aa() {    
  
          var i = self.setInterval("bb()", 25);    
  
      }    
  
      function bb() {    
  
          var f = document.getElementById('fall');    
  
          var r = parseInt(f.style.right) + h;    
  
          var b = parseInt(f.style.bottom) - v;    
  
          f.style.right = r + 'px';    
  
          f.style.bottom = b + 'px';    
  
          if (b > -210) {    
  
              v += 2;    
  
          } else {    
  
              h = (v > 9) ? v * 0.1 : 0;    
  
              v *= (v > 9) ? -0.3 : 0;    
  
          }    
  
      }    
  
     
  
     
  
         
  
         apple

可以看到setTimeout和setInterval！不去仔細(xì)琢磨邏輯，光從代碼語(yǔ)意上，是非常令人費(fèi)解的。

在沒(méi)有口語(yǔ)編程之前，我非常想把代碼寫(xiě)成這樣：

 
 
   
  
     
  
     
  
          function drop() {    
  
               //自由落體    
  
               code  here    
  
               //撞擊地面之后    
  
               code  here    
  
               //蘋果摔爛    
  
               code  here    
  
          }    
  
             
  
     
  
         
  
         apple

drop();

也只有這樣的代碼才能調(diào)用以后的口語(yǔ)編程接口！那么怎么才能寫(xiě)出這樣漂亮的代碼？

這個(gè)時(shí)候【jxcex】閃亮登場(chǎng)！

 
 
   
  
     
  
     
  
     
  
      Jscex Animation   
  
         
  
         
  
         
  
         
  
         
  
         
  
          var dropAsync = eval(Jscex.compile("async", function (e, startPos, speedY, duration) {    
  
              $await(Jscex.Async.sleep(2000));    
  
              //e.style.left = startPos.x;    
  
              //重力加速度    
  
              var g = 50;    
  
              var time = 0;    
  
              var tag = 0;    
  
              while (time < duration) {    
  
                  $await(Jscex.Async.sleep(25));    
  
                  if (time < 800) {    
  
                      //自由落體    
  
                      timetime = time + 50;    
  
                      speedYspeedY = speedY + g;    
  
                      startPos.y += speedY * 0.05;    
  
                      e.style.top = startPos.y;    
  
                  }    
  
                  else {    
  
                      //撞擊地面                     
  
                      if (speedY > 0 && tag == 0) {    
  
                          tag = 1;    
  
                          speedY = -speedY;    
  
                          speedYspeedY = speedY / 3;    
  
                      }    
  
                      timetime = time + 50;    
  
                      speedYspeedY = speedY + g;    
  
                      startPos.y += speedY * 0.05;    
  
                      e.style.top = startPos.y;    
  
                  }    
  
              }    
  
          }));    
  
          var changeImageAsync = eval(Jscex.compile("async", function () {    
  
              document.getElementById("heart").src = "grieve.gif";    
  
          }));    
  
          var executeAsync = eval(Jscex.compile("async", function () {    
  
              //自由落體并撞擊地面    
  
              $await(dropAsync(document.getElementById("dropBox"), { x: 0, y: 20 }, 0, 1350));    
  
              //碎    
  
              $await(changeImageAsync());    
  
          }));

executeAsync().start();

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

 
 
   
  
  var i =0 ;    
  
          var time = 0;    
  
          var z = 100;    
  
          function drop() {    
  
              if (time <7000) {    
  
                  i += 5;    
  
                  z -=1;    
  
                  $(".block").animate({ top: i }, z);    
  
                  time += 50;    
  
                  drop();    
  
              }    
  
          }

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

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

不過(guò)話說(shuō)----代碼是寫(xiě)給別人看的。

代碼下載

文章標(biāo)題：JS異步編程二：自由落體
當(dāng)前路徑：http://m.fisionsoft.com.cn/article/djjoosh.html

新聞中心

其他資訊