jquery+Jscex打造游戏力度条


Posted in Javascript onSeptember 12, 2020

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

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="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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
Dec 06 Javascript
从阿里妈妈发现的几个不错的表单验证函数
Sep 21 Javascript
用jQuery打造TabPanel效果代码
May 22 Javascript
Javascript 实现复制(Copy)动作方法大全
Jun 20 Javascript
jQuery scrollFix滚动定位插件
Apr 01 Javascript
js实现文本框选中的方法
May 26 Javascript
jQuery设计思想
Mar 07 Javascript
js数组方法reduce经典用法代码分享
Jan 07 Javascript
深入理解JS的事件绑定、事件流模型
May 13 Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
js实现筛选功能
Nov 24 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 #Javascript
node.js学习之base64编码解码
Oct 21 #Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 #Javascript
利用Node.JS实现邮件发送功能
Oct 21 #Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 #Javascript
BootStrap网页中代码显示用法详解
Oct 21 #Javascript
网页瀑布流布局jQuery实现代码
Oct 21 #Javascript
You might like
php数组(array)输出的三种形式详解
2013/06/05 PHP
php实现建立多层级目录的方法
2014/07/19 PHP
通过Email发送PHP错误的方法
2015/07/20 PHP
js保存当前路径(cookies记录)
2010/12/14 Javascript
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
JS实现星星海特效
2019/12/24 Javascript
python 控制语句
2011/11/03 Python
详解Python各大聊天系统的屏蔽脏话功能原理
2016/12/01 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
创建服务型党组织实施方案
2014/02/25 职场文书
三八妇女节活动总结
2014/05/04 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
简历中自我评价范文
2015/03/11 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
Python制作表白爱心合集
2022/01/22 Python