JavaScript動畫例項：炸開的小球
阿新 • • 發佈：2020-08-04
1．炸開的小球
定義一個小球物件類Ball，它有6個屬性：圓心座標（x,y）、小球半徑radius、填充顏色color、圓心座標水平方向的變化量speedX、圓心座標垂直方向的變化量speedY。
Ball類定義2個方法：繪製小球的方法draw()和小球位置發生變化的方法update()。
定義一個數組var balls = [];儲存小球物件。滑鼠單擊畫布，向陣列中隨機新增5~14個小球物件元素，當某個小球運動超出畫布範圍時，從陣列中刪除該小球物件元素。
編寫如下的HTML程式碼。
<html> <head> <title>炸開的小球</title> </head> <body> <canvas id = "myCanvas" width="500" height="400" style="border:3px double #996633;"></canvas> <script> varcanvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); function Ball(x,y) { this.x = x; this.y = y; this.radius = Math.random()*15 + 10; this.color = "rgba("+Math.floor(Math.random()*256)+"," +Math.floor(Math.random()*256)+"," +Math.floor(Math.random()*256)+",0.8)";var angle = Math.random() * 2 * Math.PI; this.speedX = Math.sin(angle) *(2+Math.random()*6); this.speedY = Math.cos(angle) *(2+Math.random()*6); } Ball.prototype.update = function(index) { this.x += this.speedX; this.y += this.speedY; if (this.x<0 || this.x>=canvas.width || this.y<=0 || this.y>=canvas.height) { balls.splice(index,1); } } Ball.prototype.draw = function() { ctx.beginPath(); ctx.arc(this.x,this.y,this.radius,0,2*Math.PI); ctx.fillStyle = this.color; ctx.closePath(); ctx.fill(); } var balls = []; canvas.addEventListener('click', function(){ var x = event.pageX - canvas.getBoundingClientRect().left; var y = event.pageY - canvas.getBoundingClientRect().top; for (var i = 0; i < Math.floor(Math.random()*10+5); i++) { balls.push(new Ball(x,y)); } }); function go() { ctx.clearRect(0,0,500,400); for(var i = balls.length-1; i>=0 ;i--) { balls[i].draw(); balls[i].update(i); } requestAnimationFrame(go); } go(); </script> </body> </html>
在瀏覽器中開啟包含這段HTML程式碼的html檔案，可以看到在畫布中呈現出如圖1所示的動畫效果。
圖1 炸開的小球
2．按顏色消除小球
定義一個小球物件類Ball，它有6個屬性：圓心座標（x,y）、小球半徑radius、填充顏色color、圓心座標水平方向的變化量speedX、圓心座標垂直方向的變化量speedY。
Ball類定義1個方法：小球在畫布中移動的方法move()。小球移動過程中，碰到畫布的上下左右邊界後會反彈，反彈後繼續移動。
定義一個數組var balls = [];儲存小球物件，並向陣列中新增50個小球物件元素。
先編寫如下的HTML程式碼。
<!DOCTYPE html> <html> <head> <title>彩色小球碰撞運動</title> </head> <body> <canvas id="myCanvas" width="500" height="400" style="border:3px double #996633;"> </canvas> <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); ctx= canvas.getContext('2d'); var colors = ["#0099CC","#33B5E5","#669900","#9933CC","#99CC00","#AA66CC","#CC0000","#FF4444","#FF8800", "#FFBB33"]; function Ball() { this.x=Math.random()*(canvas.width-60)+30; this.y=Math.random()*(canvas.height-60)+30; this.radius=Math.random()*20+10; this.color=Math.floor(Math.random() * colors.length); this.speedX=Math.random()*10+1; this.speedY=Math.random()*10+1; } Ball.prototype.move=function() { ctx.beginPath(); this.x += this.speedX; if (this.x>=canvas.width-this.radius || this.x<=this.radius) { this.speedX*=-1; } this.y+= this.speedY; if (this.y>=canvas.height-this.radius || this.y<=this.radius) { this.speedY*=-1; } ctx.fillStyle=colors[this.color]; ctx.arc(this.x,this.y,this.radius,0,Math.PI*2); ctx.fill(); } var balls=[]; for (var i=0;i<50;i++) { balls[i]=new Ball(); } function anim() { ctx.clearRect(0,0,canvas.width,canvas.height) for (var i=0;i<50;i++) { balls[i].move(); } requestAnimationFrame(anim); } anim(); </script> </body> </html>
在瀏覽器中開啟包含這段HTML程式碼的html檔案，可以看到在畫布中呈現出如圖2所示的動畫效果。
圖2 運動的彩色小球
在圖2效果的基礎上，新增互動式效果。可以在畫布的下方通過表格的方式佈置10個顏色塊，滑鼠單擊某個顏色塊，畫布中對應色塊填充的小球消失（從balls陣列中刪除對應的物件元素）；若畫布中沒有對應色塊填充的小球，則顯示提示資訊“無對應色塊小球，無效單擊！”。
編寫的HTML檔案內容如下。
<!DOCTYPE html> <html> <head> <title>按顏色消除彩色小球</title> <style> .num { padding: 18px 0; border: 1px solid ; cursor: pointer; } #mess { border: 1px solid #FF6600; background-color: #FFFFCC; font-weight: bold; padding: 2px 5px; color: #FF6600; } </style> </head> <body> <canvas id="myCanvas" width="500" height="400" style="border:3px double #996633;"> </canvas><br/> <table cellpadding="0" cellspacing="10"> <tbody><tr height="40"> <td bgcolor="#0099CC" width="40"><div id="c0" class="num" onclick="check(this);"></div></td> <td bgcolor="#33B5E5" width="40"><div id="c1" class="num" onclick="check(this);"></div></td> <td bgcolor="#669900" width="40"><div id="c2" class="num" onclick="check(this);"></div></td> <td bgcolor="#9933CC" width="40"><div id="c3" class="num" onclick="check(this);"></div></td> <td bgcolor="#99CC00" width="40"><div id="c4" class="num" onclick="check(this);"></div></td> <td bgcolor="#AA66CC" width="40"><div id="c5" class="num" onclick="check(this);"></div></td> <td bgcolor="#CC0000" width="40"><div id="c6" class="num" onclick="check(this);"></div></td> <td bgcolor="#FF4444" width="40"><div id="c7" class="num" onclick="check(this);"></div></td> <td bgcolor="#FF8800" width="40"><div id="c8" class="num" onclick="check(this);"></div></td> <td bgcolor="#FFBB33" width="40"><div id="c9" class="num" onclick="check(this);"></div></td> </tr> </tbody> </table><br/> 資訊: <span id="mess"> </span> <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); ctx= canvas.getContext('2d'); var colors = ["#0099CC","#33B5E5","#669900","#9933CC","#99CC00","#AA66CC","#CC0000","#FF4444","#FF8800", "#FFBB33"]; function Ball() { this.x=Math.random()*(canvas.width-60)+30; this.y=Math.random()*(canvas.height-60)+30; this.radius=Math.random()*20+10; this.color=Math.floor(Math.random() * colors.length); this.speedX=Math.random()*10+1; this.speedY=Math.random()*10+1; } Ball.prototype.move=function() { ctx.beginPath(); this.x += this.speedX; if (this.x>=canvas.width-this.radius || this.x<=this.radius) { this.speedX*=-1; } this.y+= this.speedY; if (this.y>=canvas.height-this.radius || this.y<=this.radius) { this.speedY*=-1; } ctx.fillStyle=colors[this.color]; ctx.arc(this.x,this.y,this.radius,0,Math.PI*2); ctx.fill(); } function check(d) { var cnt=0; var index= parseInt(d.id.charAt(1)); for(var i = balls.length-1; i>=0 ;i--) { if (balls[i].color==index) { balls.splice(i,1); cnt++; } } if (cnt==0) document.getElementById("mess").innerHTML ="無對應色塊小球，無效單擊"; else document.getElementById("mess").innerHTML ="消除了"+cnt+"個小球。"; } var balls=[]; for (var i=0;i<50;i++) { balls[i]=new Ball(); } function anim() { ctx.clearRect(0,0,canvas.width,canvas.height) for (var i=0;i<balls.length;i++) { balls[i].move(); } requestAnimationFrame(anim); } anim(); </script> </body> </html>View Code
在瀏覽器中開啟包含這段HTML程式碼的html檔案，可以看到在畫布中呈現出如圖3所示的互動式動畫效果。
圖3 按指定顏色消除運動的小球