jqurey+Jscex打造遊戲力度條

本文介紹了jqurey+Jscex打造遊戲力度條，如果大家玩過桌球類遊戲的話，對力度條的概念一定不會陌生，如下圖：

其實，類似的條條無處不在！例如進遊戲時候的進度條、魔獸世界裡法師施法過程中讀的條等等······

引入jquery ui,我們可以輕鬆得到下面這個靜止的力度條：

html：

<div class="progressbar" style="width: 20%"></div>

js：

$(function () {
  $(".progressbar").progressbar({
   value: 37
  });

   

加入Jscex讓它動起來：

<script type="text/javascript">
 
 $(function () {
 
  $(".progressbar").progressbar({
 
   value: 5
 
  });
 
 });
 
 var executeAsync = eval(Jscex.compile("async", function (proceedValues) {
 
  while (proceedValues < 100) {
 
   proceedValues++;
 
   $await(Jscex.Async.sleep(50));
 
   $(".progressbar").progressbar({
 
    value: proceedValues
 
   });
 
  }
 
 }));
 
 function btnExecuteAsync_onclick() {
 
  executeAsync(5).start();
 
 }
 
</script>
<div class="progressbar" style="width: 20%">
</div>
<input id="btnExecuteAsync" type="button" value="开始" onclick="return btnExecuteAsync_onclick()" />

   

   

就在這個時候，我一不小心，把if (proceedValues == 100) { } 註解掉了，程式碼變成這個樣子：

var executeAsync = eval(Jscex.compile("async", function (proceedValues) {
  while (true) {
 
   while (proceedValues < 100) {
 
    proceedValues++;
 
    $await(Jscex.Async.sleep(10));
 
    $(".progressbar").progressbar({
 
     value: proceedValues
 
    });
 
   }
 
   if (proceedValues == 100) {
 
    while (proceedValues > 0) {
 
     proceedValues--;
 
     $await(Jscex.Async.sleep(10));
 
     $(".progressbar").progressbar({
 
      value: proceedValues
 
     });
 
    }
 
   }
 
  }
 
 }));

   

 上面效果一樣，不會弄錯上面效果！

可以看得出來，內部的兩個while不是同時執行的，而是非常線性的，它們之間會相互等待，而且最開始的執行順序是從上至下，內部的while執行完了，再跳到最外層的while重新執行。

這種設計方式，無疑是優雅的！ ！

上面那種三個while的方式語義性很好，從剛剛分析得出，代碼還可以這樣寫：

var executeAsync2 = eval(Jscex.compile("async", function (proceedValues) {
  while (true) {
   while (proceedValues < 100) {
    proceedValues++;
    $await(Jscex.Async.sleep(10));
    $(".progressbar3").progressbar({
     value: proceedValues
    });
   }
   //if (proceedValues == 100) {
   while (proceedValues > 0) {
    proceedValues--;
    $await(Jscex.Async.sleep(10));
    $(".progressbar3").progressbar({
     value: proceedValues
    });
   }
   //}
  }
 }));

   

這樣相當於永遠跳不出最外層的proceedValues

var executeAsync = eval(Jscex.compile("async", function (proceedValues) {
 
  while (proceedValues < 100) {
 
   proceedValues++;
 
   $await(Jscex.Async.sleep(10));
 
   $(".progressbar").progressbar({
 
    value: proceedValues
 
   });
 
   if (proceedValues == 100) {
 
    while (proceedValues > 0) {
 
     proceedValues--;
 
     $await(Jscex.Async.sleep(10));
 
     $(".progressbar").progressbar({
 
      value: proceedValues
 
     });
 
    }
 
   }
 
  }
}));