用乒乓球碰壁反弹原理做的小鸟效果

最新推荐文章于 2025-01-22 10:57:17 发布

alm1968

最新推荐文章于 2025-01-22 10:57:17 发布

阅读量287

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiamigongcheng/archive/2012/08/08/2628578.html

版权

　　本文所说的乒乓球碰壁反弹原理即使把乒乓球的运动分别分成在X轴和Y轴2个方向的运动，控制2个方向的值增减来调整乒乓球的运动，以此使乒乓球在所规划的区域内来回运动（需要注意的是当乒乓球碰到边界的时候需要将X轴方向的值增（减）转变为减（增），当球到达原点时需要重新进行循环），我只是将乒乓球换做了小鸟，然后当小鸟到达边界的时候将小鸟图片更换成反方向的小鸟图（只更换X轴运动上的图片即可），从而实现当小鸟到达边界的时候让小鸟实现掉头的效果，也算是投机取巧吧，呵呵~原理分析至此，截取效果图给大家看一下！

看一下代码~

View Code

 1 <body >
 2 /*设置2个按钮控制小鸟*/
 3  <input type="button" value="放飞" onclick="fangfei()"/>
 4  <input type="button" value="暂停" onclick="zanting()"/>
 5  <img src="images/1.gif" id="xiaoniao"/>//小鸟的初始图片
 6 </body>
 7 js部分：
 8 <script type="text/javascript">  
 9  var i=0;
10  var t=null;//定义一个空变量t，用于存储和清楚计时器;
11  var x=0;//设置X轴的一个参数，用以控制小鸟在X轴方向的飞翔，当等于0时向右飞，否则向左飞
12  var y=0;//设置X轴的一个参数，用以控制小鸟在Y轴方向的飞翔，当等于0时向下飞，否则向上飞
13 /*通用函数，用于控制小鸟在规定区域内来回飞*/
14 function a(){
15   var xn=document.getElementById("xiaoniao");//获取小鸟对象
16   var aw=400;//定义X轴的区域为400
17   var ah=200;//定义Y轴的区域为200
18   var mx=xn.offsetLeft;//随机获取小鸟X轴距离左边界的距离
19   var my=xn.offsetTop;//随机获取小鸟Y轴距离上边界的距离
20   feixiang();//调用小鸟摆动翅膀的函数
21 /*控制小鸟在X轴方向的运动轨迹*/
22  if(x==0){
23    if(mx<aw){
24       mx+=3;
25       xn.style.left=mx+"px";
26       }
27      else{
28        x=1;
29        }
30   }
31   else{
32    if(mx>0){
33      feixiang2();//当小鸟到达边界时调用另外一个小鸟反方向的图片函数
34      mx--;
35      xn.style.left=mx+"px";
36     } 
37     else{
38      x=0;
39      }
40    }
41 /*控制小鸟在Y轴方向的运动轨迹*/
42  if(y==0) {
43    if(my<ah){
44       my+=2;
45       xn.style.top=my+"px";
46       }
47      else{
48        y=1;
49        }
50   }else{
51    if(my>0){
52      my--;
53      xn.style.top=my+"px";
54     }
55     else{
56      y=0;
57      }
58    }
59  i++;//使小鸟翅膀摆动，用取余的算法得到
60  t=setTimeout(a,100);
61  }
62 //*调用函数*//
63 var xns=["1","2","3","4"];//定义一个数组，用于放置小鸟的图片
64 /*定义2个函数，分别是不同方向小鸟图片的上下来回摆动*/
65 function feixiang(){
66  var xn=document.getElementById("xiaoniao");
67   if(i%2==0)
68    {xn.src="images/"+xns[0]+".gif";}
69     else
70      {xn.src="images/"+xns[1]+".gif";}
71 }
72 function feixiang2(){
73  var xn=document.getElementById("xiaoniao");
74   if(i%2==0)
75    {xn.src="images/"+xns[2]+".gif";}
76     else
77      {xn.src="images/"+xns[3]+".gif";}
78 }
79 /*执行函数，分别用于被放飞和暂停2个按钮的调用*/
80 function fangfei(){
81   if(t)
82   clearTimeout(t);
83   a();}
84 function zanting(){
85   clearTimeout(t);
86  }
87 </script>