JS异步编程五：Jscex制作愤怒的小鸟

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

阿克陶网站制作公司哪家好，找成都创新互联公司！从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作，到程序开发，运营维护。成都创新互联公司从2013年成立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联公司。

如果关注这个系列的话，在JS异步编程二：自由落体中，模拟了苹果在重力场下的自由落体运动。

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

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

可以看得出来，有点生硬，而且位移有点偏差，比如启始的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，让小鸟在空中运动的过程中受到了一定的空气阻力，导致小鸟旋转一定角度，小鸟在落地之后，导致小鸟在地上滚动前进，这样更加逼真的体现了现实中的物体运动。

代码下载

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

网页名称：JS异步编程五：Jscex制作愤怒的小鸟
URL分享：http://www.shufengxianlan.com/qtweb/news0/160000.html

成都网站建设公司_创新互联，为您提供外贸网站建设、品牌网站制作、网站改版、网站维护、关键词优化、网站营销

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联