【JavaScript】動畫-小案例：小球運動
阿新 • • 發佈：2017-12-25
rand ner res onf mage borde 技術 star 初始
最近的講js運動框架時，做了一個小案例，隨機生成幾個小球，然後讓他們在頁面中跳動，碰到邊界就彈回來並修改顏色。效果如下：
代碼如下：
1 <!doctype html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="Keywords" content="28-JS作業小球運動"> 7 <meta name="Description" content="28-JS小球運動"> 8 <title>JS-小球運動</title> 9 <style> 10 .ball { 11 position: absolute; 12 top: 0; 13 left: 0; 14 width: 100px; 15 height: 100px; 16 background: radial-gradient(circle, #fff, #fff600); 17 border-radius: 50%; 18 } 19 </style> 20 </head> 21 22 <body> 23 <!-- <div class="ball"></div> --> 24 <script> 25 26 // 創建[1,11）個小球 27 var mdAttr = document.createDocumentFragment(); 28 var OBall = [];//小球對象數組 29 for(var i = 0; i < random(5,20); i++) { 30 OBall[i] = document.createElement("div"); 31 OBall[i].setAttribute("class", "ball"); 32 33 var cirR = random(30,50);//小球半徑 34 OBall[i].style.width = cirR * 2 + "px"; 35 OBall[i].style.height = cirR * 2 + "px"; 36 OBall[i].style.background = "radial-gradient(circle," + randomColor() + "," + randomColor() + ")"; 37 mdAttr.appendChild(OBall[i]); 38 39 OBall[i].startX = random(1,10);//初始位置X 40 OBall[i].startY = random(1,10);//初始位置Y 41 OBall[i].Vx = random(3,10);//水平增加距離 42 OBall[i].Vy = random(3,10);//垂直增加距離 43 } 44 document.body.appendChild(mdAttr); 45 46 //獲取瀏覽器窗口寬高 47 var W,H; 48 window.onresize = (function(){ 49 W = window.innerWidth, 50 H = window.innerHeight; 51 })(); 52 53 //運動 54 ~function fn() { 55 OBall.forEach(function (ball) { 56 var MaxH = H - ball.offsetHeight,//獲取小球位置的最大值，以免超過邊界 57 MaxW = W - ball.offsetWidth; 58 ball.startX += ball.Vx;//改變小球位置 59 ball.startY += ball.Vy; 60 if(ball.startX >= MaxW || ball.startX <=0){//若小球位置超出最大值和最小值就改變方向 61 ball.Vx *= -1; 62 ball.style.background = "radial-gradient(circle," + randomColor() + "," + randomColor() + ")"; 63 ball.startX = Math.max(0,ball.startX); 64 ball.startX = Math.min(ball.startX,MaxW); 65 } 66 if(ball.startY >= MaxH || ball.startY <=0){ 67 ball.Vy *= -1; 68 ball.style.background = "radial-gradient(circle," + randomColor() + "," + randomColor() + ")"; 69 ball.startY = Math.max(0,ball.startY); 70 ball.startY = Math.min(ball.startY,MaxW); 71 } 72 ball.style.left = ball.startX + "px";//設置小球當前位置 73 ball.style.top = ball.startY + "px"; 74 75 }); 76 requestAnimationFrame(fn);//循環 77 }(); 78 79 //顏色隨機 80 function randomColor() { 81 var r = Math.floor(Math.random() * 256), 82 g = Math.floor(Math.random() * 256), 83 b = Math.floor(Math.random() * 256); 84 return "rgb(" + r + "," + g + "," + b + ")"; 85 } 86 //取[min,max）之間的隨機值 87 function random(min,max){ 88 return Math.random(max-min)+min; 89 } 90 </script> 91 </body> 92 93 </html>
【JavaScript】動畫-小案例：小球運動