Jscex+jQuery UI打造游戏力度条

开发 前端
如果大家玩过桌球类游戏的话,对力度条的概念一定不会陌生,本节为你讲解javascript异步编程之Jscex+jQuery UI打造游戏力度条.

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

a

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

xx

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

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

html:

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

js:

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

效果如下:

加入Jscex让它动起来:

  1.  <script type="text/javascript"> 
  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. }  
  19. </script> 
  20. <div class="progressbar" style=" width: 20%"> 
  21. </div> 
  22. <input id="btnExecuteAsync" type="button" value="开始" onclick="return btnExecuteAsync_onclick()" /> 

效果如下:

 

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

  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的比较
责任编辑:陈贻新 来源: zhanglei
相关推荐

2012-06-14 14:09:58

JavaScript

2013-12-02 14:13:54

jQueryUI

2012-06-14 13:40:04

JavaScript

2011-11-10 10:23:56

Jscex

2013-05-31 16:35:37

扁平化UI设计UI设计Flat UI

2012-06-29 10:20:55

jQuery

2012-10-19 14:51:53

jQueryJSJavaScript

2011-07-27 14:10:43

javascript

2012-06-14 14:03:19

JavaScript

2011-11-16 13:22:38

Jscex

2012-02-20 09:54:35

ibmdw

2012-04-27 09:38:05

jQuery UI

2022-07-27 14:47:01

开源项目

2022-05-30 22:54:08

元宇宙工具情绪

2023-12-27 13:45:00

Python进度条代码

2020-11-03 08:04:30

Windows10

2012-06-15 11:32:19

ibmdw

2012-06-23 20:06:21

jQuery

2014-10-30 10:28:55

Node.js

2013-12-02 13:59:22

jQueryUI
点赞
收藏

51CTO技术栈公众号