JavaScript异步编程之Jscex制作愤怒的小鸟


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


51CTO推荐专题:JavaScript异步编程



angrybird


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


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


  1.  <script type="text/javascript"> 
  2. function Bird(startPos, speed_X, speed_Y, element) {  
  3. this.speed_X = speed_X;  
  4. this.speed_Y = speed_Y;  
  5. this.startPos = startPos;  
  6. this.fly = function () {  
  7. flyAsync(element, startPos, speed_X, speed_Y).start();  
  8. }  
  9. }  
  10. var flyAsync = eval(Jscex.compile("async", function (e, startPos, speed_X, speed_Y) {  
  11. e.style.left = startPos.x;  
  12. e.style.top = startPos.y;  
  13. //vt=v0+at  
  14. //重力加速度  
  15. var a_y = 40;  
  16. var speed_Yspeed_YTemp = speed_Y;  
  17. var time = 0;  
  18. while (Math.abs(speed_Y) <= speed_YTemp) {  
  19. $await(Jscex.Async.sleep(50));  
  20. timetime = time + 50;  
  21. speed_Yspeed_Y = speed_Y - a_y;  
  22. startPos.y -= (speed_Y * 0.05);  
  23. e.style.top = startPos.y;  
  24. startPos.x += speed_X * 0.05;  
  25. e.style.left = startPos.x;  
  26. }  
  27. }));  
  28. function Button1_onclick() {  
  29. var bird = new Bird({ x: 0, y: 300 }, 400, 700, document.getElementById("birdDiv"));  
  30. bird.fly();  
  31. }  
  32. </script> 
  33. <input id="Button1" type="button" value="发¢射?" onclick="return Button1_onclick()" /> 
  34. <div id="birdDiv" style="left: 0px; top: 300px; position: absolute;"> 
  35. <img id="bird" src="bird.jpg" alt="" /> 
  36. </div> 

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


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


  1. var flyAsync = eval(Jscex.compile("async", function (e, startPos, speed_X, speed_Y) {  
  2. e.style.left = startPos.x;  
  3. e.style.top = startPos.y;  
  4. //vt=v0+at  
  5. //重力加速度  
  6. var a_y = 40;  
  7. var speed_Yspeed_YTemp = speed_Y;  
  8. var time = 0;  
  9. var maxY = startPos.y  
  10. while (speed_Y > 0 ? (Math.abs(speed_Y) <= speed_YTemp) : (e.offsetTop - (speed_Y - a_y) * 0.05 <= maxY)) {  
  11. $await(Jscex.Async.sleep(50));  
  12. timetime = time + 50;  
  13. speed_Yspeed_Y = speed_Y - a_y;  
  14. startPos.y -= (speed_Y * 0.05);  
  15. e.style.top = startPos.y;  
  16. startPos.x += speed_X * 0.05;  
  17. e.style.left = startPos.x;  
  18. }  
  19. })); 

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


  1. var flyAsync = eval(Jscex.compile("async", function (e, startPos, speed_X, speed_Y) {  
  2. e.style.left = startPos.x;  
  3. e.style.top = startPos.y;  
  4. var maxY = startPos.y;  
  5. //所用公式?:vt=v0+at  
  6. //重力加速度  
  7. var a_y = 40;  
  8. var speed_Yspeed_YTemp = speed_Y;  
  9. var time = 0;  
  10. while (true) {  
  11. $await(Jscex.Async.sleep(1));  
  12. while (speed_Y > 0 ? (Math.abs(speed_Y) <= speed_YTemp) : (e.offsetTop - (speed_Y - a_y) * 0.05 <= maxY)) {  
  13. $await(Jscex.Async.sleep(50));  
  14. timetime = time + 50;  
  15. speed_Yspeed_Y = speed_Y - a_y;  
  16. startPos.y -= (speed_Y * 0.05);  
  17. e.style.top = startPos.y;  
  18. startPos.x += speed_X * 0.05;  
  19. e.style.left = startPos.x;  
  20. }  
  21. //与地面撞击,X轴损失一部分速度,Y轴损失一部分速度并且被弹起  
  22.  speed_Xspeed_X = speed_X / 2;  
  23. speed_Y = -speed_Y / 3;  
  24. if (speed_X < 6) break;  
  25. }  
  26. })); 

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


黄色小鸟:体型较小,重量较轻,殊效为加快,应用进步击弱,应用掉队击中等。进击木头较强,进击玻璃与混凝土很弱。





对,没有错,它就这这篇文章的主角!


需求解析:冲锋陷阵鸟,在不点击加快的景象下,和红色小鸟样,当点击了加快按钮,X轴标的目标速度变成本来的3倍,Y轴标的目标变成本来的3倍,


冲锋状况下速度不受重力影响。


原理图:





冲锋鸟代码实现:


  1. <script type="text/javascript"> 
  2.         function Bird(startPos, speed_X, speed_Y, element) {  
  3.             this.speed_X = speed_X;  
  4.             this.speed_Y = speed_Y;  
  5.             this.startPos = startPos;  
  6.             this.fly = function () {  
  7.                 flyAsync(element, startPos, speed_X, speed_Y).start();  
  8.             }  
  9.         }  
  10.         var flyAsync = eval(Jscex.compile("async", function (e, startPos, speed_X, speed_Y) {  
  11.             document.getElementById("hdTag").value = 1;  
  12.             e.style.left = startPos.x;  
  13.             e.style.top = startPos.y;  
  14.             var maxY = startPos.y;  
  15.             //重?力|加ó速ù度è  
  16.             var a_y = 40;  
  17.             var speed_Yspeed_YTemp = speed_Y;  
  18.             var speed_Xspeed_XTemp = speed_X;  
  19.             var time = 0;  
  20.             var addTag = 1;  
  21.             while (true) {  
  22.                 $await(Jscex.Async.sleep(1));  
  23.                 while ((e.offsetTop - (speed_Y - a_y) * 0.05 <= maxY)) {  
  24.                     if (document.getElementById("hdTag").value == 1) {  
  25.                         $await(Jscex.Async.sleep(50));  
  26.                         timetime = time + 50;  
  27.                         speed_Yspeed_Y = speed_Y - a_y;  
  28.                         startPos.y -= (speed_Y * 0.05);  
  29.                         startPos.x += speed_X * 0.05;  
  30.                         e.style.top = startPos.y + "px";  
  31.                         e.style.left = startPos.x + "px";  
  32.                     }  
  33.                     else {  
  34.                     //冲?锋?状′态?  
  35.                         $await(Jscex.Async.sleep(50));  
  36.                         timetime = time + 50;  
  37.                         if (addTag == 1) {  
  38.                             addTag = 0;  
  39.                             //速ù度è翻-倍?  
  40.                             speed_Y = 3 * speed_Y;  
  41.                             speed_X = 3 * speed_X;  
  42.                         }  
  43.                         startPos.y -= (speed_Y * 0.05);  
  44.                         startPos.x += speed_X * 0.05;  
  45.                         e.style.top = startPos.y + "px";  
  46.                         e.style.left = startPos.x + "px";  
  47.                     }  
  48.                 }  
  49.                 if (addTag == 0) {  
  50.                     addTag = 1; break;  
  51.                 }  
  52.                 //与?地?面?撞2击÷,?X轴á损e失§一?部?分?速ù度è,?Y轴á损e失§一?部?分?速ù度è并¢且ò被?弹ˉ起e  
  53.                 document.getElementById("hdTag").value = 1;  
  54.                 speed_Xspeed_X = speed_X / 2;  
  55.                 speed_Y = -speed_Y / 3;  
  56.                 if (speed_X < 6) break;  
  57.             }  
  58.         }));  
  59.           
  60.         function Button1_onclick() {  
  61.             var bird = new Bird({ x: 0, y: 500 }, 400, 700, document.getElementById("birdDiv"));           
  62.             bird.fly();  
  63.  
  64.         }  
  65.         function Button2_onclick() {  
  66.             document.getElementById("hdTag").value = 0;  
  67.         }  
  68.     </script> 
  69.     <div > 
  70.     <input id="hdTag" value="1" type="hidden" /> 
  71.      <input id="Button1" type="button" value="发¢射?" onclick="return Button1_onclick()" /> 
  72.     <input id="Button2" type="button" value="加ó速ù" onclick="return Button2_onclick()" /> 
  73.          
  74.         <div id="birdDiv" style="left: 0px; top: 500px; position: absolute; width: 20px;  
  75.             height: 30px;z-index:10;"> 
  76.             <img src="yellowbird.png" alt=""/> 
  77.         </div> 
  78.          
  79.     </div> 

最新的Jscex 库,请上https://github.com/JeffreyZhao/jscex或者http://www.sndacode.com/projects/jscex/wiki下载吧····


代码下载


原文:http://www.cnblogs.com/iamzhanglei/archive/2011/08/24/2151473.html


【系列文章】



  1. 什么是JavaScript异步编程

  2. JavaScript异步编程之Jscex无创痕切入jQueryUI

  3. JavaScript异步编程之用Jscex画圆

  4. Jscex+jQuery UI打造游戏力度条

  5. Jscex模拟重力场与google苹果logo的比较

【责任编辑:陈贻新 TEL:(010)68476606】




标签:
友情链接
轻松育儿世界奇观
苏ICP备16066217号-2