jqurey+Jscex がゲーム強度バーを作成

この記事では、ゲームの強度バーを作成するための jqurey+Jscex を紹介します。卓球ゲームをプレイしたことがある方は、以下に示す強度バーの概念に精通しているでしょう:

実際、同様のバーはどこにでもあります。たとえば、ゲームに入るときの進行状況バー、World of Warcraft の魔術師が呪文を唱えるときに読み取られるバーなど...

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

しかし、通常、無限に前後にループする必要があるため、次のように実装する必要があります。

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

このとき、誤って 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
    });
   }
   //}
  }
 }));

効果は上記とまったく同じです。それは間違いではありません！

2 つの内部 while は同時に実行されず、非常に直線的に相互に待機し、最初の実行順序は内部 while が実行された後、再度ジャンプすることがわかります。一番外側の while に移動して再実行します。

このデザイン方法は間違いなくエレガントです! ！

上記の 3 つの while メソッドは非常に優れたセマンティクスを持っています。分析したところ、次のようにコードを記述することもできます。 , そのため、無限ループが続いてしまいます。

りー