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

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

网站设计、成都网站制作,成都做网站公司-创新互联公司已向上千企业提供了,网站设计,网站制作,网络营销等服务!设计与技术结合,多年网站推广经验,合理的价格为您打造企业品质网站。

推荐专题：JavaScript异步编程

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

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

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

可以看得出来，有点生硬，而且位移有点偏差，比如启始的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_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; 
  
  
  
  } 
  
  
  
  }));

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

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

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

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

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

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

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

原理图：

冲锋鸟代码实现：

 
 
 
 
  
  
  
  
  
  
  
          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 { 
  
  
  
                      //冲?锋?状′态? 
  
  
  
                          $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;">