jqurey+Jscex实现游戏力度条

时间:2016-11-0920举报小编:youjiejie

    Jscex实现力度条,jqurey+Jscex实现游戏力度条方法。

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

    图1

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

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

    html:

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

    js:

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

    加入Jscex让它动起来:

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

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

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

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

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

    效果上面一模一样,不会错!

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

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

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

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

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

        
        
          0) { 
        proceedValues--;
        $await(Jscex.Async.sleep(100));
        $("#progressbar3").progressbar({
         value: proceedValues
        }); 
       }
        //} 
      }
     }));
     executeAsync21(38).start();  " _ue_custom_node_="true">

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持未来软件园。