jquery+Jscex打造游戏力度条

站长资源 2024/11/28 佚名

74 1538 74

DDR爱好者之家 Design By 杰米

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

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

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

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

可以看得出来，内部的两个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

   });

  }

  }

 }
}));

这样相当于永远跳不出最外层的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="/UploadFiles/2021-04-02/jscex.min.js">

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

jquery游戏力度条,javascript,异步编程

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“jquery+Jscex打造游戏力度条”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

jquery+Jscex打造游戏力度条

bootstrap table小案例

基于百度地图实现产品销售的单位位置查看功能设计与实现

评论“jquery+Jscex打造游戏力度条”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接