jquery+Jscex打造游戲力度條

更新時(shí)間：2020年09月12日 14:22:21 作者：當(dāng)耐特磚家

游戲力度條大家一定不陌生，在很多游戲中都能用到，本文介紹了jquery+Jscex打造游戲力度條，有需要的朋友可以了解一下。

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

其實(shí)，類似的條條無處不在！比如進(jìn)游戲時(shí)候的進(jìn)度條、魔獸世界里法師施法過程中讀的條等等······

引入jquery ui,我們可以輕松得到下面這個(gè)靜止的力度條：

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()" />

但是通常情況下，我們需要它往返無限循環(huán)下去，那么我們應(yīng)該這么實(shí)現(xiàn)：

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

   });

  }

  }

 }

 }));

就在這個(gè)時(shí)候，我一不小心，把if (proceedValues == 100) { } 注釋掉了，代碼變成這個(gè)樣子：

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 
  }); 
  } 
  //} 
 } 
 }));

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

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

這種設(shè)計(jì)方式，無疑是優(yōu)雅的！！

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

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

   });

  }

  }

 }
}));

這樣相當(dāng)于永遠(yuǎn)跳不出最外層的proceedValues < 100,所以也會無限循環(huán)下去。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 
 
 
</head>
<body>
 
 <script src="http://files.cnblogs.com/iamzhanglei/jscex.min.js" type="text/javascript"></script>
 <link rel="stylesheet"  type="text/css" media="all" />
 
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script>
 $(function () {
 $("#progressbar3").progressbar({
  value: 37
 });

 });
 </script>

 

<div class="demo">

<div id="progressbar3" style="width:200px"></div>

</div><!-- End demo -->

<script>
 var executeAsync21 = eval(Jscex.compile("async", function (proceedValues) {

 while (true) {
 
  while (proceedValues < 100) {

  proceedValues++;

  $await(Jscex.Async.sleep(100));
  $("#progressbar3").progressbar({
   value: proceedValues
  });

  }

  //if (proceedValues == 100) {

  while (proceedValues > 0) {

  proceedValues--;

  $await(Jscex.Async.sleep(100));
  $("#progressbar3").progressbar({
   value: proceedValues
  });

  }

  //}

 }
 }));
 executeAsync21(38).start();
 
</script>

</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: