碰撞运动
撞到目标点，速度反转
无重力的漂浮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>
时间： 2024-12-12 05:14:10