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

2011/8/25 18:24:20中文系列评论(0)浏览(3779)

上一篇的的主角=>红色小鸟：体型小，重量轻，攻击弱，无特效，可在滚动时消灭绿猪。适合攻击玻璃与木头，攻击混凝土较弱。

黄色小鸟：体型较小，重量较轻，特效为加速，使用前攻击弱，使用后攻击中等。攻击木头较强，攻击玻璃与混凝土很弱。

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

需求分析：冲锋陷阵鸟，在不点击加速的情况下，和红色小鸟样，当点击了加速按钮，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;
                }
                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>