javascript异步编程系列【五】----Jscex制作愤怒的小鸟

Jscex真的能制作愤怒的小鸟？在我没有接触Jscex之前，我也不相信！但是只要解决了重力场运动和碰撞的两大物理问题，Jscex版的愤怒小鸟，那就是囊中之物。

如果关注这个系列的话，在javascript异步编程系列【二】----Jscex模拟重力场与google苹果logo的比较中，模拟了苹果在重力场下的自由落体运动。

那么我们可以轻松的帮它扩展一个水平方向上的速度.

 <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) {

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

}

</script>

<input id="Button1" type="button" value="发￠射?" onclick="return Button1_onclick()" />

<div id="birdDiv" style="left: 0px; top: 300px; position: absolute;">

<img id="bird" src="bird.jpg" alt="" />

</div>

看效果请按：

可以看得出来，有点生硬，而且位移有点偏差，比如启始的top:1000,终止的top:1100!主要原因是在结束while (Math.abs(speed_Y) <= speed_YTemp)的之前那最后一次

循环带来的误差！那么就完善一下while里面的条件，让它不执行最后一次循环。

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;

}

}));

看效果请按：

最后让小鸟撞击地面弹起，然后又撞击地面弹起···一直循环下去···

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;

}

}));

因为撞击的过程当中，X轴损失一部分速度，Y轴损失一部分速度并且被弹起,当speed_X小于6的时候退出循环。

看效果请按：

 

【代码示例下载】：

未完待续啊·····················要去上班了啊······

ps:感兴趣的小盆友可以利用CSS3，让小鸟在空中运动的过程中受到了一定的空气阻力，导致小鸟旋转一定角度，小鸟在落地之后，导致小鸟在地上滚动前进，这样更加逼真的体现了现实中的物体运动

最新的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打造游戏力度条