jquery+Jscex打造游戲力度條
更新時(shí)間：2020年09月12日 14:22:21 作者：當(dāng)耐特磚家
游戲力度條大家一定不陌生，在很多游戲中都能用到，本文介紹了jquery+Jscex打造游戲力度條，有需要的朋友可以了解一下。
本文介紹了jquery+Jscex打造游戲力度條，如果大家玩過桌球類游戲的話，對力度條的概念一定不會(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)雅的?。?/p>
上面那種三個(gè)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
});
}
}
}
}));
這樣相當(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" 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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡易QQ聊天框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
本文翻譯自 Lazy Load Plugin for jQuery, 介紹一個(gè) jQuery 插件, 它提供懶漢式加載頁面圖片的功能.2010-02-02
jquery text(),val(),html()方法區(qū)別總結(jié)
jquery text(),val(),html()方法區(qū)別總結(jié)。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要介紹了jquery獲取checkbox的值并post提交,需要的朋友可以參考下2015-01-01
.filter()方法可以接受一個(gè)函數(shù)作為參數(shù)，然后根據(jù)函數(shù)的返回值判斷，這就是jquery選擇器的過濾器，下面有個(gè)不錯(cuò)的示例，大家可以參考下2013-09-09
jQuery CSS3相結(jié)合實(shí)現(xiàn)時(shí)鐘插件
這篇文章主要介紹了jQuery CSS3相結(jié)合實(shí)現(xiàn)時(shí)鐘插件附源碼下載的相關(guān)資料,需要的朋友可以參考下2016-01-01
在使用jquery操作js時(shí)，經(jīng)常整不明白this與$(this)。抽空仔細(xì)測試了一把，記錄下來以供在忘記的時(shí)候拉出來參考參考！2010-09-09
PHP+jquery+ajax實(shí)現(xiàn)分頁
這篇文章主要為大家詳細(xì)介紹了PHPjquery+ajax實(shí)現(xiàn)分頁的代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
關(guān)于jQuery的DOM操作面試問題其實(shí)有很多，下面這篇文章主要給大家介紹了jQuery常見面試題之DOM操作的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-07-07
jquery獲取當(dāng)前點(diǎn)擊的元素的五種方法介紹
我們可以使用$(this)方法獲取事件處理函數(shù)內(nèi)部的當(dāng)前元素,也可以使用e.target方法在外部獲取當(dāng)前元素,此外,我們還介紹了parent()方法和find()方法獲取當(dāng)前元素的父元素或子元素,以及closest()方法獲取當(dāng)前元素最近的祖先元素2023-08-08