Jscex真的能制作憤怒的小鳥？在我沒有接觸Jscex之前，我也不相信！但是只要解決了重力場(chǎng)運(yùn)動(dòng)和碰撞的兩大物理問題，Jscex版的憤怒小鳥，那就是囊中之物。

如果關(guān)注這個(gè)系列的話，在JS異步編程二：自由落體中，模擬了蘋果在重力場(chǎng)下的自由落體運(yùn)動(dòng)。

那么我們可以輕松的幫它擴(kuò)展一個(gè)水平方向上的速度.

<script type="text/javascript">  
function Bird(startPos, speed_X, speed_Y, element) {  
this.speed_X = speed_X;  
this.speed_Y = speed_Y;  
this.startPos = startPos;  
this.fly = function () {  
flyAsync(element, startPos, speed_X, speed_Y).start();  
}  
}  
var flyAsync = eval(Jscex.compile("async", function (e, startPos, speed_X, speed_Y) {  
e.style.left = startPos.x;  
e.style.top = startPos.y;  
//vt=v0+at  
//重力加速度  
var a_y = 40;  
var speed_YTemp = speed_Y;  
var time = 0;  
while (Math.abs(speed_Y) <= speed_YTemp) {  
$await(Jscex.Async.sleep(50));  
time = time + 50;  
speed_Y = speed_Y - a_y;  
startPos.y -= (speed_Y * 0.05);  
e.style.top = startPos.y;  
startPos.x += speed_X * 0.05;  
e.style.left = startPos.x;  
}  
}));  
function Button1_onclick() {  
var bird = new Bird({ x: 0, y: 300 }, 400, 700, document.getElementById("birdDiv"));  
bird.fly();  
}  
</script>  
<input id="Button1" type="button" value="發(fā)￠射?" onclick="return Button1_onclick()" />  
<div id="birdDiv" style="left: 0px; top: 300px; position: absolute;">  
<img id="bird" src="bird.jpg" alt="" />  
</div>  

可以看得出來，有點(diǎn)生硬，而且位移有點(diǎn)偏差，比如啟始的top:1000,終止的top:1100!主要原因是在結(jié)束while (Math.abs(speed_Y) <= speed_YTemp)的之前那***一次

循環(huán)帶來的誤差！那么就完善一下while里面的條件，讓它不執(zhí)行***一次循環(huán)。

var flyAsync = eval(Jscex.compile("async", function (e, startPos, speed_X, speed_Y) {  
e.style.left = startPos.x;  
e.style.top = startPos.y;  
//vt=v0+at  
//重力加速度  
var a_y = 40;  
var speed_YTemp = speed_Y;  
var time = 0;  
var maxY = startPos.y  
while (speed_Y > 0 ? (Math.abs(speed_Y) <= speed_YTemp) : (e.offsetTop - (speed_Y - a_y) * 0.05 <= maxY)) {  
$await(Jscex.Async.sleep(50));  
time = time + 50;  
speed_Y = speed_Y - a_y;  
startPos.y -= (speed_Y * 0.05);  
e.style.top = startPos.y;  
startPos.x += speed_X * 0.05;  
e.style.left = startPos.x;  
}  
})); 

***讓小鳥撞擊地面彈起，然后又撞擊地面彈起···一直循環(huán)下去

var flyAsync = eval(Jscex.compile("async", function (e, startPos, speed_X, speed_Y) {  
e.style.left = startPos.x;  
e.style.top = startPos.y;  
var maxY = startPos.y;  
//所用公式?:vt=v0+at  
//重力加速度  
var a_y = 40;  
var speed_YTemp = speed_Y;  
var time = 0;  
while (true) {  
$await(Jscex.Async.sleep(1));  
while (speed_Y > 0 ? (Math.abs(speed_Y) <= speed_YTemp) : (e.offsetTop - (speed_Y - a_y) * 0.05 <= maxY)) {  
$await(Jscex.Async.sleep(50));  
time = time + 50;  
speed_Y = speed_Y - a_y;  
startPos.y -= (speed_Y * 0.05);  
e.style.top = startPos.y;  
startPos.x += speed_X * 0.05;  
e.style.left = startPos.x;  
}  
//與地面撞擊，X軸損失一部分速度，Y軸損失一部分速度并且被彈起 

speed_X = speed_X / 2;  
speed_Y = -speed_Y / 3;  
if (speed_X < 6) break;  
}  
})); 

因?yàn)樽矒舻倪^程當(dāng)中，X軸損失一部分速度，Y軸損失一部分速度并且被彈起,當(dāng)speed_X小于6的時(shí)候退出循環(huán)。

未完待續(xù)啊·····················要去上班了啊······

ps:感興趣的小盆友可以利用CSS3，讓小鳥在空中運(yùn)動(dòng)的過程中受到了一定的空氣阻力，導(dǎo)致小鳥旋轉(zhuǎn)一定角度，小鳥在落地之后，導(dǎo)致小鳥在地上滾動(dòng)前進(jìn)，這樣更加逼真的體現(xiàn)了現(xiàn)實(shí)中的物體運(yùn)動(dòng)。

代碼下載

效果觀看：http://www.cnblogs.com/iamzhanglei/archive/2011/08/24/2151473.html

【編輯推薦】

1. JS異步編程一：用Jscex畫圓
2. JS異步編程二：自由落體
3. JS異步編程三：Jscex無創(chuàng)痕切入jQUI
4. JS異步編程四：Jscex+jQ打造游戲力度條
5. 看JavaScript如何實(shí)現(xiàn)頁面自適