建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
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();
- }
效果如下：
但是通常情況下，我們需要它往返無限循環(huán)下去，那么我們應該這么實現(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
- });
- }
- }
- }
- }));
效果如下：
就在這個時候，我一不小心，把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,結果奇跡出現(xiàn)了，效果如下，和上面一模一樣，沒有報錯!
可以看得出來，內部的兩個while不是同時執(zhí)行的，而是非常線性的，它們之間會相互等待，而且最開始的執(zhí)行順序是從上至下，內部的while執(zhí)行完了，再跳到最外層的while重新執(zhí)行。
這種設計方式，無疑是優(yōu)雅的!!
上面那種三個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,所以也會無限循環(huán)下去。
***的Jscex 庫，請上https://github.com/JeffreyZhao/jscex或者http://www.sndacode.com/projects/jscex/wiki下載吧····
【更多javascript異步編程系列】
- JavaScript異步編程之用Jscex畫圓
- 使用Jscex改善JavaScript異步編程體驗
- JavaScript異步編程之Jscex無創(chuàng)痕切入jQueryUI
- Jscex模擬重力場與google蘋果logo的比較
當前標題：Jscex+jQueryUI打造游戲力度條
文章鏈接：http://fisionsoft.com.cn/article/djjhesj.html
