javascript異步編程系列【四】----Jscex+Jquery UI打造游戲力度條
2011-08-23 07:55 【當耐特】 閱讀(4772) 評論(13) 收藏 舉報如果大家玩過桌球類游戲的話，對力度條的概念一定不會陌生，如下圖：
還有豎直方向上的力度條，如下圖：
其實，類似的條條無處不在！比如進游戲時候的進度條、魔獸世界里法師施法過程中讀的條等等······
引入jquery ui,我們可以輕松得到下面這個靜止的力度條：
html：
<div class="progressbar" style="width: 20%"></div>
js：
$(function () {
$(".progressbar").progressbar({
value: 37
});
$(".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>
$(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
});
}
}
}
}));
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 (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
});
}
}
}
}));
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畫圓
浙公網安備 33010602011771號