Jscex+jQueryUI打造游戏力度条
如果大家玩过桌球类游戏的话，对力度条的概念一定不会陌生，如下图：
还有竖直方向上的力度条，如下图：
其实，类似的条条无处不在!比如进游戏时候的进度条、魔兽世界里法师施法过程中读的条等等······
引入jquery ui,我们可以轻松得到下面这个静止的力度条：
html：
- /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 < 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
- });
- }
- //}
- }
- }));
我运行一下，等着他报ERROR,结果奇迹出现了，效果如下，和上面一模一样，没有报错!
可以看得出来，内部的两个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,所以也会无限循环下去。
***的Jscex 库，请上https://github.com/JeffreyZhao/jscex或者http://www.sndacode.com/projects/jscex/wiki下载吧····
【更多javascript异步编程系列】
- JavaScript异步编程之用Jscex画圆
- 使用Jscex改善JavaScript异步编程体验
- JavaScript异步编程之Jscex无创痕切入jQueryUI
- Jscex模拟重力场与google苹果logo的比较
分享标题：Jscex+jQueryUI打造游戏力度条
本文路径：http://www.shufengxianlan.com/qtweb/news7/329507.html
网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联