实现思路：小球的移动，是通过改变小球的left和top值来改变，坐标分别为(x,y)当x/y值加到最大，即加到父级的宽度或者高度时，使x值或者y值减小，同理当x值或者y值减到最小时，同样的使x值或者y值增加，以上的思路可以实现小球的碰壁反弹
小球与小球之间的碰撞，要判断小球在被撞小球的哪个方向，从而判断小球该向哪个方向移动，同样的改变小球的坐标值，来实现小球的反弹
实现代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>小球碰撞</title> <style type="text/css"> * { margin: 0; padding: 0; } #wrap { height: 800px; width: 1300px; border: 1px solid red; /*小球设置相对定位*/ position: relative; margin: 0 auto; overflow: hidden; } p { width: 40px; height: 40px; border-radius: 50%; background-color: red; position: absolute; top: 0; left: 0; color: white; font-size: 25px; text-align: center; line-height: 40px; } </style> </head> <body> <div> </div> </body> <!--<script src="https://www.jb51.net/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>
运行效果：
