JavaScript異步編程之Jscex制作憤怒的小鳥

作者：趙磊 2011-11-16 13:22:38

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_Yspeed_YTemp = speed_Y;  
var time = 0;  
while (Math.abs(speed_Y) <= speed_YTemp) {  
$await(Jscex.Async.sleep(50));  
timetime = time + 50;  
speed_Yspeed_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_Yspeed_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));  
timetime = time + 50;  
speed_Yspeed_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_Yspeed_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));  
timetime = time + 50;  
speed_Yspeed_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_Xspeed_X = speed_X / 2;  
speed_Y = -speed_Y / 3;  
if (speed_X < 6) break;  
}  
}));

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

黃色小鳥：體型較小，重量較輕，殊效為加快，應用進步擊弱，應用掉隊擊中等。進擊木頭較強，進擊玻璃與混凝土很弱。

對，沒有錯，它就這這篇文章的主角!

需求解析：沖鋒陷陣鳥，在不點擊加快的景象下，和紅色小鳥樣，當點擊了加快按鈕，X軸標的目標速度變成本來的3倍，Y軸標的目標變成本來的3倍，

沖鋒狀況下速度不受重力影響。

原理圖：

沖鋒鳥代碼實現：

<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) {  
            document.getElementById("hdTag").value = 1;  
            e.style.left = startPos.x;  
            e.style.top = startPos.y;  
            var maxY = startPos.y;  
            //重?力|加ó速ù度è  
            var a_y = 40;  
            var speed_Yspeed_YTemp = speed_Y;  
            var speed_Xspeed_XTemp = speed_X;  
            var time = 0;  
            var addTag = 1;  
            while (true) {  
                $await(Jscex.Async.sleep(1));  
                while ((e.offsetTop - (speed_Y - a_y) * 0.05 <= maxY)) {  
                    if (document.getElementById("hdTag").value == 1) {  
                        $await(Jscex.Async.sleep(50));  
                        timetime = time + 50;  
                        speed_Yspeed_Y = speed_Y - a_y;  
                        startPos.y -= (speed_Y * 0.05);  
                        startPos.x += speed_X * 0.05;  
                        e.style.top = startPos.y + "px";  
                        e.style.left = startPos.x + "px";  
                    }  
                    else {  
                    //沖?鋒?狀′態?  
                        $await(Jscex.Async.sleep(50));  
                        timetime = time + 50;  
                        if (addTag == 1) {  
                            addTag = 0;  
                            //速ù度è翻-倍?  
                            speed_Y = 3 * speed_Y;  
                            speed_X = 3 * speed_X;  
                        }  
                        startPos.y -= (speed_Y * 0.05);  
                        startPos.x += speed_X * 0.05;  
                        e.style.top = startPos.y + "px";  
                        e.style.left = startPos.x + "px";  
                    }  
                }  
                if (addTag == 0) {  
                    addTag = 1; break;  
                }  
                //與?地?面?撞2擊÷，?X軸á損e失§一?部?分?速ù度è，?Y軸á損e失§一?部?分?速ù度è并￠且ò被?彈ˉ起e  
                document.getElementById("hdTag").value = 1;  
                speed_Xspeed_X = speed_X / 2;  
                speed_Y = -speed_Y / 3;  
                if (speed_X < 6) break;  
            }  
        }));  
          
        function Button1_onclick() {  
            var bird = new Bird({ x: 0, y: 500 }, 400, 700, document.getElementById("birdDiv"));           
            bird.fly();  
 
        }  
        function Button2_onclick() {  
            document.getElementById("hdTag").value = 0;  
        }  
    </script> 
    <div > 
    <input id="hdTag" value="1" type="hidden" /> 
     <input id="Button1" type="button" value="發￠射?" onclick="return Button1_onclick()" /> 
    <input id="Button2" type="button" value="加ó速ù" onclick="return Button2_onclick()" /> 
         
        <div id="birdDiv" style="left: 0px; top: 500px; position: absolute; width: 20px;  
            height: 30px;z-index:10;"> 
            <img src="yellowbird.png" alt=""/> 
        </div> 
         
    </div>

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

代碼下載

原文：http://www.cnblogs.com/iamzhanglei/archive/2011/08/24/2151473.html

【系列文章】

什么是JavaScript異步編程
JavaScript異步編程之Jscex無創痕切入jQueryUI
JavaScript異步編程之用Jscex畫圓
Jscex+jQuery UI打造游戲力度條
Jscex模擬重力場與google蘋果logo的比較

責任編輯：陳貽新來源：趙磊的博客

Jscex