JS異步編程五：Jscex制作憤怒的小鳥(niǎo)

 
 
 
 

  
  
  
  
  
  
  
  
  
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_YTemp = speed_Y;  
  
  
  
  
var time = 0;  
  
  
  
  
while (Math.abs(speed_Y) <= speed_YTemp) {  
  
  
  
  
$await(Jscex.Async.sleep(50));  
  
  
  
  
time = time + 50;  
  
  
  
  
speed_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();  
  
  
  
  
}  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

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

循環(huán)帶來(lái)的誤差！那么就完善一下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_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));  
  
  
  
  
time = time + 50;  
  
  
  
  
speed_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;  
  
  
  
  
}  
  
  
  
  
})); 
 
 
 
 

***讓小鳥(niǎo)撞擊地面彈起，然后又撞擊地面彈起···一直循環(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_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));  
  
  
  
  
time = time + 50;  
  
  
  
  
speed_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_X = speed_X / 2;  
  
  
  
  
speed_Y = -speed_Y / 3;  
  
  
  
  
if (speed_X < 6) break;  
  
  
  
  
}  
  
  
  
  
})); 
 
 
 
 

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

未完待續(xù)啊·····················要去上班了啊······

ps:感興趣的小盆友可以利用CSS3，讓小鳥(niǎo)在空中運(yùn)動(dòng)的過(guò)程中受到了一定的空氣阻力，導(dǎo)致小鳥(niǎo)旋轉(zhuǎn)一定角度，小鳥(niǎo)在落地之后，導(dǎo)致小鳥(niǎo)在地上滾動(dòng)前進(jìn)，這樣更加逼真的體現(xiàn)了現(xiàn)實(shí)中的物體運(yùn)動(dòng)。

代碼下載

效果觀看：http://www.cnblogs.com/iamzhanglei/archive/2011/08/24/2151473.html