案例-多個小球碰撞
阿新 • • 發佈：2019-01-03
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div{ position: absolute; top:10px;left:0; width:50px; height:50px; border-radius:50%; background:-webkit-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); background:linear-gradient(top, red, rgba(0, 0, 255, 0.5)); } </style> </head> <body> <script> for(var i=1;i<=10;i++){ // var num = (Math.random()*10+5).toFixed(); // console.info('num',num); createBoll(i); } function createBoll(num){ var obj = document.createElement('div'); obj.style.width = num+20+'px';//設定不一樣的大小 obj.style.height = num+20+'px';//設定不一樣的大小 document.body.appendChild(obj); var initX = obj.offsetLeft; var initY = obj.offsetTop; var maxX = document.documentElement.clientWidth - obj.offsetWidth; var maxY = document.documentElement.clientHeight - obj.offsetHeight; // var num = 5; var speedX = num; var speedY = num; // console.log('initX',initX, ',clientWidth',document.documentElement.clientWidth,',offsetWidth:',obj.offsetWidth,',maxX:',maxX); // console.log('initY',initY, 'clientHeight',document.documentElement.clientHeight,',offsetHeight:',obj.offsetHeight,',maxY:',maxY); (function run(){ initX +=speedX; initY +=speedY; // if(initX>maxX){ // initX=maxX; // speedX=-speedX;//速度取反 // }else if(initX<0){ // initx=0; // speedX=-speedX;//速度取反 // } // if(initY>maxY){ // initY=maxY; // speedY=-speedY;//速度取反 // }else if(initY<0){ // initY=0; // speedY=-speedY;//速度取反 // } // 上面判斷程式碼優化 if(initX>=maxX || initX<=0){ initX = Math.min(initX,maxX); initX = Math.max(initX,0); speedX = -speedX; obj.style.background = 'linear-gradient(180deg, '+color()+', '+color()+')';//設定隨機漸變色 } if(initY>maxY || initY<=0){ initY = Math.min(initY,maxY); initY = Math.max(initY,0); speedY = -speedY; obj.style.background = 'linear-gradient(180deg, '+color()+', '+color()+')';//設定隨機漸變色 } obj.style.left = initX+'px'; obj.style.top = initY+'px'; requestAnimationFrame(run); })(); } // console.log(color()); // 隨機顏色 function color(){ var r = Math.floor(Math.random()*256); var g = Math.floor(Math.random()*256); var b = Math.floor(Math.random()*256); var a = Math.random().toFixed(1); return 'rgba('+r+','+g+','+b+','+a+')'; } </script> </body> </html>