像电脑屏保一样的气泡碰撞效果 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>Title</title>
  7     <style>
  8         * {
  9             margin: 0;
 10             padding: 0
 11         }
 12         
 13         #main {
 14             margin: 0 auto;
 15             position: relative;
 16             background-color: #fff
 17         }
 18         
 19         #main div {
 20             position: absolute;
 21             width: 100px;
 22             height: 100px;
 23             overflow: hidden;
 24             -moz-border-radius: 50%;
 25             -webkit-border-radius: 50%;
 26             border-radius: 50%;
 27             background: blue;
 28         }
 29     </style>
 30 </head>
 31 
 32 <body>
 33     <div id="main">
 34         <div></div>
 35         <div></div>
 36         <div></div>
 37         <div></div>
 38         <div></div>
 39         <div></div>
 40         <div></div>
 41         <div></div>
 42         <div></div>
 43         <div></div>
 44     </div>
 45 
 46 </body>
 47 
 48 </html>
 49 <script>
 50     var main = document.getElementById('main'); //获取运动边界和10个div
 51     var circles = main.getElementsByTagName('div');
 52     var container = []; //存放10个球的每个具体信息，包括坐标，速度等值
 53     var arr = [];
 54     var maxW = 0; //初始化运动的最大宽和高，初始定义0
 55     var maxH = 0;
 56     var cwidth = circles[0].offsetWidth; //小球的直径
 57 
 58 
 59     //根据浏览器窗口的大小自动调节小球的运动空间
 60     window.onresize = function() {
 61         maxW = window.innerWidth - circles[0].clientWidth; //为了让小球不卡在浏览器边缘，
 62         maxH = window.innerHeight - circles[0].clientHeight; // 所以要减去自身的宽高
 63         main.style.width = window.innerWidth + 'px'; //将容器的宽高和文档显示区宽高相等
 64         main.style.height = window.innerHeight + 'px';
 65     };
 66     onresize();
 67     //数组对象的初始化
 68     for (var i = 0; i < circles.length; i++) {
 69         arr = [];
 70         arr.x = Math.floor(Math.random() * (maxW + 1)); //初始x坐标
 71         arr.y = Math.floor(Math.random() * (maxH + 1)); //初始y坐标
 72         arr.cx = arr.x + circles[0].offsetWidth / 2; //圆心x坐标
 73         arr.cy = arr.y + circles[0].offsetHeight / 2; //圆心y坐标
 74         arr.movex = Math.floor(Math.random() * 2); //x轴移动方向
 75         arr.movey = Math.floor(Math.random() * 2); //y轴移动方向
 76         arr.speed = 2 + Math.floor(Math.random() * 4); //随机速度
 77         arr.timer = null; //计时器
 78         arr.index = i; //索引值
 79         container.push(arr); //存放所有的属性值
 80         circles[i].style.left = arr.x + 'px'; //小球位置初始化
 81         circles[i].style.top = arr.y + 'px';
 82     }
 83 
 84     //碰撞函数
 85     function crash(a) {
 86         var ball1x = container[a].cx; //在数组中任意球的圆心坐标
 87         var ball1y = container[a].cy; //思路：先随便拿一个球，然后遍历所有球，拿这个球和所有球的圆心距离比较
 88         for (var i = 0; i < container.length; i++) {
 89             if (i !== a) { //判断取出来的球不是本身，才能和其他球进行距离判断
 90                 var ball2x = container[i].cx; //将其他球的圆心坐标赋值给球2
 91                 var ball2y = container[i].cy;
 92                 //圆心距 求两个点之间的距离,开平方
 93                 var distence = Math.sqrt((ball1x - ball2x) * (ball1x - ball2x) + (ball1y - ball2y) * (ball1y - ball2y));
 94                 if (distence <= cwidth) { //球心距离和求直径比较
 95                     if (ball1x > ball2x) { //当前位于未知求的右方
 96                         if (ball1y > ball2y) { //预设未知球撞当前球，然后当前球改变运动
 97                             container[a].movex = 1; //1表示为正值，对应的右和下
 98                             container[a].movey = 1; //0表示为负值，对应的左和上
 99                         } else if (ball1y < ball2y) {
100                             container[a].movex = 1;
101                             container[a].movey = 0;
102                         } else {
103                             container[a].movex = 1;
104                         }
105                     } else if (ball1x < ball2x) {
106                         if (ball1y > ball2y) {
107                             container[a].movex = 0;
108                             container[a].movey = 0;
109                         } else if (ball1y < ball2y) {
110                             container[a].movex = 0;
111                             container[a].movey = 1;
112                         } else {
113                             container[a].movex = 0;
114                         }
115                     } else {
116                         if (ball1y > ball2y) {
117                             container[a].movey = 1;
118                         } else if (ball1y < ball2y) {
119                             container[a].movey = 0;
120                         }
121                     }
122                 }
123             }
124 
125         }
126     }
127 
128     //移动函数
129     function move(balls) { //每个球单独有定时器
130         balls.timer = setInterval(function() {
131             if (balls.movex === 1) { //如果往右跑，则一直加速度，碰到边界，改为反方向运动
132                 balls.x += balls.speed;
133                 if (balls.x + balls.speed >= maxW) { //防止小球出界
134                     balls.x = maxW;
135                     balls.movex = 0; //小球运动方向发生改变
136                 }
137             } else {
138                 balls.x -= balls.speed; // 1和0表示正反方向
139                 if (balls.x - balls.speed <= 0) {
140                     balls.x = 0;
141                     balls.movex = 1;
142                 }
143             }
144             if (balls.movey === 1) {
145                 balls.y += balls.speed;
146                 if (balls.y + balls.speed >= maxH) {
147                     balls.y = maxH;
148                     balls.movey = 0;
149                 }
150             } else {
151                 balls.y -= balls.speed;
152                 if (balls.y - balls.speed <= 0) {
153                     balls.y = 0;
154                     balls.movey = 1;
155                 }
156             }
157             balls.cx = balls.x + circles[0].offsetWidth / 2; //小球圆心等于：运动中x的值加上自身的半径
158             balls.cy = balls.y + circles[0].offsetHeight / 2;
159             circles[balls.index].style.left = balls.x + 'px'; //小球相对于屏幕的位置
160             circles[balls.index].style.top = balls.y + 'px';
161             crash(balls.index); //每个小球进行碰撞检测
162         }, 25);
163     }
164 
165     //对每一个小球绑定计时器，让小球动起来
166     for (var i = 0; i < container.length; i++) {
167         move(container[i]);
168     }
169 </script>

 

posted on 2018-11-21 13:52  唠叨的意志  阅读(966)  评论(0)    收藏  举报

导航