碰撞运动
撞到目标点，速度反转
无重力的漂浮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>