javascript异步编程系列【五】----Jscex制作愤怒的小鸟
2011-08-24 08:01 【当耐特】 阅读(8678) 评论(35) 编辑 收藏 举报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的比较
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验