像電腦屏保同樣的氣泡碰撞效果

時間 2019-11-18
標籤電腦同樣氣泡碰撞效果简体版
原文原文鏈接
  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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。