javascript异步编程系列【六】----Jscex版愤怒的小鸟之冲锋陷阵鸟

上一篇的的主角=>红色小鸟：体型小，重量轻，进击弱，无殊效，可在迁移转变时祛除绿猪。 合适进击玻璃与木头，进击混凝土较弱。

黄色小鸟：体型较小，重量较轻，殊效为加快，应用进步击弱，应用掉队击中等。进击木头较强，进击玻璃与混凝土很弱。

对，没有错，它就这这篇文章的主角！

 

需求解析：冲锋陷阵鸟，在不点击加快的景象下，和红色小鸟样，当点击了加快按钮，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制作愤怒的小鸟