JS运动基础(四) 碰撞运动

浏览数：17 / 时间：2015年06月09日

碰撞运动
撞到目标点，速度反转
无重力的漂浮Div
速度反转
滚动条闪烁的问题
过界后直接拉回来

加入重力
反转速度的同时，减小速度
纵向碰撞，横向速度也减小
横向速度小数问题（负数）

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 #div1{ width:100px; height:100px; background:red; position:absolute;}
 8 </style>
 9 <script>
10 
11 //碰撞运动 : 首先找到碰撞的临界点 , 再确定运动的方向 , 然后去改对应的速度（速度取反）
12 
13 window.onload = function(){
14     var oDiv = document.getElementById(‘div1‘);
15     
16     var iSpeedX = 10;
17     var iSpeedY = 10;
18     
19     startMove();
20     
21     function startMove(){
22         setInterval(function(){
23             
24             var L = oDiv.offsetLeft + iSpeedX;
25             var T = oDiv.offsetTop + iSpeedY;
26             
27             if(T>document.documentElement.clientHeight - oDiv.offsetHeight){
28                 T = document.documentElement.clientHeight - oDiv.offsetHeight;
29                 iSpeedY *= -1;
30             }
31             else if(T<0){
32                 T = 0;
33                 iSpeedY *= -1;
34             }
35             
36             if(L>document.documentElement.clientWidth - oDiv.offsetWidth){
37                 L = document.documentElement.clientWidth - oDiv.offsetWidth;
38                 iSpeedX *= -1;
39             }
40             else if(L<0){
41                 L = 0;
42                 iSpeedX *= -1;
43             }
44             
45             oDiv.style.left = L + ‘px‘;
46             oDiv.style.top = T + ‘px‘;
47         },30);
48     }
49     
50 };
51 </script>
52 </head>
53 
54 <body>
55 <div id="div1"></div>
56 </body>
57 </html>

自由落体：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 #div1{ width:100px; height:100px; background:red; position:absolute;}
 8 </style>
 9 <script>
10 window.onload = function(){
11     var oInput = document.getElementById(‘input1‘);
12     var oDiv = document.getElementById(‘div1‘);
13     
14     var timer = null;
15     var iSpeed = 0;
16     
17     oInput.onclick = function(){
18         startMove();
19     };
20     
21     function startMove(){
22         clearInterval(timer);
23         timer = setInterval(function(){
24             
25             iSpeed += 3;
26             
27             var T = oDiv.offsetTop + iSpeed;
28             
29             if(T > document.documentElement.clientHeight - oDiv.offsetHeight){
30                 T = document.documentElement.clientHeight - oDiv.offsetHeight;
31                 iSpeed *= -1;
32                 
33                 iSpeed *= 0.75;
34                 
35             }
36             
37             oDiv.style.top = T + ‘px‘;
38             
39         },30);
40     }
41     
42 };
43 </script>
44 </head>
45 
46 <body>
47 <input type="button" value="开始运动" id="input1">
48 <div id="div1"></div>
49 </body>
50 </html>