當耐特

上一篇的的主角=>紅色小鳥：體型小，重量輕，進擊弱，無殊效，可在遷移轉變時祛除綠豬。 合適進擊玻璃與木頭，進擊混凝土較弱。

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

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

需求解析：沖鋒陷陣鳥，在不點擊加快的景象下，和紅色小鳥樣，當點擊了加快按鈕，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_YTemp = speed_Y;
            var speed_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));
                        time = time + 50;
                        speed_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));
                        time = 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_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下載吧····

【更多javascript異步編程系列】

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

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

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

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

javascript異步編程系列【五】----Jscex制作憤怒的小鳥