Jscex+jQueryUI打造游戏力度条

如果大家玩过桌球类游戏的话,对力度条的概念一定不会陌生,如下图:

 还有竖直方向上的力度条,如下图:

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

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

html:

 
 
 
 
  1. /div>

js:

 
 
 
 
  1. $(function () {
  2. $(".progressbar").progressbar({
  3. value: 37
  4. });
  5. });

效果如下:

加入Jscex让它动起来:

 
 
 
 
  1.  
  2. $(function () {
  3. $(".progressbar").progressbar({
  4. value: 5
  5. });
  6. });
  7. var executeAsync = eval(Jscex.compile("async", function (proceedValues) {
  8. while (proceedValues < 100) {
  9. proceedValues++;
  10. $await(Jscex.Async.sleep(50));
  11. $(".progressbar").progressbar({
  12. value: proceedValues
  13. });
  14. }
  15. }));
  16. function btnExecuteAsync_onclick() {
  17. executeAsync(5).start();
  18. }
  • 效果如下:

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

     
     
     
     
    1. var executeAsync = eval(Jscex.compile("async", function (proceedValues) {
    2. while (true) {
    3. while (proceedValues < 100) {
    4. proceedValues++;
    5. $await(Jscex.Async.sleep(10));
    6. $(".progressbar").progressbar({
    7. value: proceedValues
    8. });
    9. }
    10. if (proceedValues == 100) {
    11. while (proceedValues > 0) {
    12. proceedValues--;
    13. $await(Jscex.Async.sleep(10));
    14. $(".progressbar").progressbar({
    15. value: proceedValues
    16. });
    17. }
    18. }
    19. }
    20. }));

    效果如下:

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

     
     
     
     
    1. var executeAsync2 = eval(Jscex.compile("async", function (proceedValues) {
    2. while (true) {
    3. while (proceedValues < 100) {
    4. proceedValues++;
    5. $await(Jscex.Async.sleep(10));
    6. $(".progressbar3").progressbar({
    7. value: proceedValues
    8. });
    9. }
    10. //if (proceedValues == 100) {
    11. while (proceedValues > 0) {
    12. proceedValues--;
    13. $await(Jscex.Async.sleep(10));
    14. $(".progressbar3").progressbar({
    15. value: proceedValues
    16. });
    17. }
    18. //}
    19. }
    20. }));

    我运行一下,等着他报ERROR,结果奇迹出现了,效果如下,和上面一模一样,没有报错!

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

    这种设计方式,无疑是优雅的!!

    上面那种三个while的方式语意性很好,从刚刚分析得出,代码还可以这样写:

     
     
     
     
    1. var executeAsync = eval(Jscex.compile("async", function (proceedValues) {
    2. while (proceedValues < 100) {
    3. proceedValues++;
    4. $await(Jscex.Async.sleep(10));
    5. $(".progressbar").progressbar({
    6. value: proceedValues
    7. });
    8. if (proceedValues == 100) {
    9. while (proceedValues > 0) {
    10. proceedValues--;
    11. $await(Jscex.Async.sleep(10));
    12. $(".progressbar").progressbar({
    13. value: proceedValues
    14. });
    15. }
    16. }
    17. }
    18. }));

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

    ***的Jscex 库,请上https://github.com/JeffreyZhao/jscex或者http://www.sndacode.com/projects/jscex/wiki下载吧····

    【更多javascript异步编程系列】

    1. JavaScript异步编程之用Jscex画圆
    2. 使用Jscex改善JavaScript异步编程体验
    3. JavaScript异步编程之Jscex无创痕切入jQueryUI
    4. Jscex模拟重力场与google苹果logo的比较

    分享标题:Jscex+jQueryUI打造游戏力度条
    本文路径:http://www.shufengxianlan.com/qtweb/news7/329507.html

    网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

    猜你还喜欢下面的内容

    App设计知识

    分类信息网站