jqurey+Jscex打造游戏力度条-PHP开发-php.cn

jqurey+Jscex打造游戏力度条

高洛峰

Libérer： 2016-12-09 13:34:59

original

1379 Les gens l'ont consulté

本文介绍了jqurey+Jscex打造游戏力度条，如果大家玩过桌球类游戏的话，对力度条的概念一定不会陌生，如下图：

其实，类似的条条无处不在！比如进游戏时候的进度条、魔兽世界里法师施法过程中读的条等等······

引入jquery ui,我们可以轻松得到下面这个静止的力度条：

html：

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

Copier après la connexion

js：

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

Copier après la connexion

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

Copier après la connexion

但是通常情况下，我们需要它往返无限循环下去，那么我们应该这么实现：

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

Copier après la connexion

就在这个时候，我一不小心，把if (proceedValues == 100) { } 注释掉了，代码变成这个样子：

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

Copier après la connexion

效果上面一模一样，不会错！

可以看得出来，内部的两个while不是同时执行的，而是非常线性的，它们之间会相互等待，而且最开始的执行顺序是从上至下，内部的while执行完了，再跳到最外层的while重新执行。

这种设计方式，无疑是优雅的！！

上面那种三个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
  
     });
  
    }
  
   }
  
  }
}));

Copier après la connexion

这样相当于永远跳不出最外层的proceedValues < 100,所以也会无限循环下去。

<!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" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" 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>

Copier après la connexion