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

 
 
 
 

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

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

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

循環(huán)帶來的誤差!那么就完善一下while里面的條件，讓它不執(zhí)行最后一次循環(huán)。

 
 
 
 

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

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

 
 
 
 

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

因?yàn)樽矒舻倪^程當(dāng)中，X軸損失一部分速度，Y軸損失一部分速度并且被彈起,當(dāng)speed_X小于6的時候退出循環(huán)。

黃色小鳥：體型較小，重量較輕，殊效為加快，應(yīng)用進(jìn)步擊弱，應(yīng)用掉隊擊中等。進(jìn)擊木頭較強(qiáng)，進(jìn)擊玻璃與混凝土很弱。

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

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

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

原理圖：

沖鋒鳥代碼實(shí)現(xiàn)：

 
 
 
 

  
  
  
  

  
  
  
  
        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 { 
  
  
  
  
                    //沖?鋒?狀′態(tài)? 
  
  
  
  
                        $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; 
  
  
  
  
        } 
  
  
  
  
    
  
  
  
  
    
  
  
  
  
    
  
  
  
  
     
  
  
  
  
    
  
  
  
  
        
  
  
  
  
        
  
  
  
  
            height: 30px;z-index:10;">