实现思路：小球的移动，是通过改变小球的left和top值来改变，坐标分别为(x,y)当x/y值加到最大，即加到父级的宽度或者高度时，使x值或者y值减小，同理当x值或者y值减到最小时，同样的使x值或者y值增加，以上的思路可以实现小球的碰壁反弹
小球与小球之间的碰撞，要判断小球在被撞小球的哪个方向，从而判断小球该向哪个方向移动，同样的改变小球的坐标值，来实现小球的反弹
实现代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
|
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <title>小球碰撞</title> <style type="text/css"> * { margin: 0; padding: 0; } #wrap { height: 800px; 1300px; border: 1px solid red; /*小球设置相对定位*/ position: relative; margin: 0 auto; overflow: hidden; } p { 40px; height: 40px; border-radius: 50%; position: absolute; top: 0; left: 0; color: white; font-size: 25px; text-align: center; line-height: 40px; } </style> </head> <body> <div id="wrap"> </div> </body> <!--<script src="js/common.js" type="text/javascript" charset="utf-8"></script>--> <script type="text/javascript"> /** * 生成并返回一个从m到n全区间的随机数 * @param {Object} m * @param {Object} n */ function randomNum(m, n) { return Math.floor(Math.random() * (n - m + 1) + m); } /** * 生成一个随机颜色，并返回rgb字符串值 */ function randomColor() { var r = randomNum(0, 255); var g = randomNum(0, 255); var b = randomNum(0, 255); return "rgb(" + r + "," + g + "," + b + ")"; } //获得wrapDiv var wrapDiv = document.getElementById("wrap"); //定义数组存储所有的小球 var balls = []; //生成小球函数 function createBalls() { for (var i = 0; i < 20; i++) { var ball = document.createElement("p"); //随机小球起始的X坐标和小球的Y坐标 ball.x = randomNum(0, 1200); ball.y = randomNum(0, 700); //随机小球的移动速度 ball.speed = randomNum(2, 5); //随机小球移动的方向 if (Math.random() - 0.5 > 0) { ball.xflag = true; } else { ball.xflag = false; } if (Math.random() - 0.5 > 0) { ball.yflag = true; } else { ball.yflag = false; } //随机小球的背景颜色 ball.style.backgroundColor = randomColor(); ball.innerHTML = i + 1; //将小球插入当wrapDiv中 wrapDiv.appendChild(ball); //将所有的小球存储到数组中 balls.push(ball); } } createBalls(); //小球移动函数，判断小球的位置 function moveBalls(ballObj) { setInterval(function() { ballObj.style.top = ballObj.y + "px"; ballObj.style.left = ballObj.x + "px"; //判断小球的标志量，对小球作出相应操作 if (ballObj.yflag) { //小球向下移动 ballObj.y += ballObj.speed; if (ballObj.y >= 800 - ballObj.offsetWidth) { ballObj.y = 800 - ballObj.offsetWidth; ballObj.yflag = false; } } else { //小球向上移动 ballObj.y -= ballObj.speed; if (ballObj.y <= 0) { ballObj.y = 0; ballObj.yflag = true; } } if (ballObj.xflag) { //小球向右移动 ballObj.x += ballObj.speed; if (ballObj.x >= 1300 - ballObj.offsetHeight) { ballObj.x = 1300 - ballObj.offsetHeight; ballObj.xflag = false; } } else { //小球向左移动 ballObj.x -= ballObj.speed; if (ballObj.x <= 0) { ballObj.x = 0; ballObj.xflag = true; } } crash(ballObj); }, 10); } var x1, y1, x2, y2; //碰撞函数 function crash(ballObj) { //通过传过来的小球对象来获取小球的X坐标和Y坐标 x1 = ballObj.x; y1 = ballObj.y; for (var i = 0; i < balls.length; i++) { //确保不和自己对比 if (ballObj != balls[i]) { x2 = balls[i].x; y2 = balls[i].y; //判断位置的平方和小球的圆心坐标的关系 if (Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2) + 800 <= Math.pow(ballObj.offsetWidth + balls[i].offsetWidth, 2)) { //判断传过来的小球对象，相对于碰撞小球的哪个方位 if (ballObj.x < balls[i].x) { if (ballObj.y < balls[i].y) { //小球对象在被碰小球的左上角 ballObj.yflag = false; ballObj.xflag = false; } else if (ballObj.y > balls[i].y) { //小球对象在被碰小球的左下角 ballObj.xflag = false; ballObj.yflag = true; } else { //小球对象在被撞小球的正左方 ballObj.xflag = false; } } else if (ballObj.x > balls[i].x) { if (ballObj.y < balls[i].y) { //小球对象在被碰撞小球的右上方 ballObj.yflag = false; ballObj.xflag = true; } else if (ballObj.y > balls[i].y) { //小球对象在被碰撞小球的右下方 ballObj.xflag = true; ballObj.yflag = true; } else { //小球对象在被撞小球的正右方 ballObj.xflag = true; } } else if (ballObj.y > balls[i].y) { //小球对象在被撞小球的正下方 ballObj.yflag = true; } else if (ballObj.y < balls[i].y) { //小球对象在被撞小球的正上方 ballObj.yflag = false; } } } } } for (var i = 0; i < balls.length; i++) { //将所有的小球传到函数中,来实现对小球的移动 moveBalls(balls[i]); } </script></html> |