JS異步編程四：Jscex+jQ打造游戲力度條

作者：當(dāng)耐特磚家 2012-06-14 14:09:58

其實(shí)，類似的條條無處不在！比如進(jìn)游戲時(shí)候的進(jìn)度條、魔獸世界里法師施法過程中讀的條等等。引入jquery ui,我們可以輕松得到下面這個(gè)靜止的力度條......

如果大家玩過桌球類游戲的話，對(duì)力度條的概念一定不會(huì)陌生，如下圖：

還有豎直方向上的力度條，如下圖：

其實(shí)，類似的條條無處不在！比如進(jìn)游戲時(shí)候的進(jìn)度條、魔獸世界里法師施法過程中讀的條等等。

引入jquery ui,我們可以輕松得到下面這個(gè)靜止的力度條：

html：

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

js：

$(function () {  
    $(".progressbar").progressbar({  
        value: 37  
    });

加入Jscex讓它動(dòng)起來：

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

但是通常情況下，我們需要它往返無限循環(huán)下去，那么我們應(yīng)該這么實(shí)現(xiàn)：

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

就在這個(gè)時(shí)候，我一不小心，把if (proceedValues == 100) { } 注釋掉了，代碼變成這個(gè)樣子：

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

效果上面一模一樣，不會(huì)錯(cuò)！

可以看得出來，內(nèi)部的兩個(gè)while不是同時(shí)執(zhí)行的，而是非常線性的，它們之間會(huì)相互等待，而且最開始的執(zhí)行順序是從上至下，內(nèi)部的while執(zhí)行完了，再跳到最外層的while重新執(zhí)行。

這種設(shè)計(jì)方式，無疑是優(yōu)雅的！！

上面那種三個(gè)while的方式語意性很好，從剛剛分析得出，代碼還可以這樣寫：

#p#

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

這樣相當(dāng)于永遠(yuǎn)跳不出最外層的proceedValues < 100,所以也會(huì)無限循環(huán)下去。

<!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>

原文鏈接：http://www.cnblogs.com/iamzhanglei/archive/2011/08/23/2149918.html

【編輯推薦】

JS異步編程一：用Jscex畫圓
JS異步編程二：自由落體
JS異步編程三：Jscex無創(chuàng)痕切入jQUI
JS異步編程五：Jscex制作憤怒的小鳥
看JavaScript如何實(shí)現(xiàn)頁面自適

責(zé)任編輯：張偉來源：當(dāng)耐特磚家的博客

JavaScript

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

JS異步編程四：Jscex+jQ打造游戲力度條