當耐特

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

如果關注這個系列的話，在javascript異步編程系列【二】----Jscex模擬重力場與google蘋果logo的比較中，模擬了蘋果在重力場下的自由落體運動。

那么我們可以輕松的幫它擴展一個水平方向上的速度.

 <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="發￠射?" onclick="return Button1_onclick()" />
<div id="birdDiv" style="left: 0px; top: 300px; position: absolute;">
<img id="bird" src="bird.jpg" alt="" />
</div>

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

循環帶來的誤差！那么就完善一下while里面的條件，讓它不執行最后一次循環。

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

看效果請按：

最后讓小鳥撞擊地面彈起，然后又撞擊地面彈起···一直循環下去···

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

因為撞擊的過程當中，X軸損失一部分速度，Y軸損失一部分速度并且被彈起,當speed_X小于6的時候退出循環。

看效果請按：

【代碼示例下載】：

未完待續啊·····················要去上班了啊······

ps:感興趣的小盆友可以利用CSS3，讓小鳥在空中運動的過程中受到了一定的空氣阻力，導致小鳥旋轉一定角度，小鳥在落地之后，導致小鳥在地上滾動前進，這樣更加逼真的體現了現實中的物體運動

最新的Jscex 庫，請上https://github.com/JeffreyZhao/jscex或者http://www.sndacode.com/projects/jscex/wiki下載吧····

【更多javascript異步編程系列】

javascript異步編程系列【一】----用Jscex畫圓

javascript異步編程系列【二】----Jscex模擬重力場與google蘋果logo的比較

javascript異步編程系列【三】----Jscex無創痕切入JqueryUI

javascript異步編程系列【四】----Jscex+Jquery UI打造游戲力度條