[TOC] ## 示例 <details> <summary>main.js</summary> ``` // 設置畫布 // const canvas = document.querySelector('canvas'); // const ctx = canvas.getContext('2d'); // const width = canvas.width = window.innerWidth; // const height = canvas.height = window.innerHeight; // // 生成隨機數的函數 // function random(min,max) { // const num = Math.floor(Math.random() * (max - min)) + min; // return num; // } const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); const width =canvas.width= window.innerWidth; const height =canvas.height= window.innerHeight; console.log(width); console.log(height); function random(min,max){ return Math.floor(Math.random()*(max-min)+min); } function randomColor(){ return `rgb(${random(0,255)},${random(0,255)},${random(0,255)})` } function Ball(x,y,valx,valy,color,size){ this.x=x this.y=y // x,y 標識圓心 this.valx=valx this.valy=valy // 水平,垂直的速度 this.color=color // 小球顏色 this.size=size // 小球的半徑 } Ball.prototype.draw=function(){ ctx.beginPath() ctx.fillStyle=this.color ctx.arc(this.x,this.y,this.size,0,2*Math.PI); ctx.fill(); } Ball.prototype.collisionDetect = function() { for (let j = 0; j < balls.length; j++) { if (this !== balls[j]) { const dx = this.x - balls[j].x; const dy = this.y - balls[j].y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < this.size + balls[j].size) { balls[j].color = this.color = randomColor(); //兩球反向 balls[j].valx=-balls[j].valx balls[j].valy=-balls[j].valy this.valx=-this.valx this.valy=-this.valy } } } } //檢查小球的 x 坐標是否大于畫布的寬度（小球會從右邊緣離開）。 // 檢查小球的 x 坐標是否小于0（小球會從左邊緣離開）。 // 檢查小球的 y 坐標是否大于畫布的高度（小球會從下邊緣離開）。 // 檢查小球的 y 坐標是否小于0（小球會從上邊緣離開）。 Ball.prototype.update=function(){ // 碰撞檢測 if((this.x+this.size) >= width){ this.valx=-(this.valx) } if((this.x-this.size)<=0){ this.valx=-(this.valx) } // 碰撞檢測 if((this.y+this.size) >= height){ this.valy=-(this.valy) } if((this.y-this.size)<=0){ this.valy=-(this.valy) } this.x+=this.valx this.y+=this.valy } let balls = []; while (balls.length < 25) { let size = random(10, 20); let ball = new Ball( // 為避免繪制錯誤，球至少離畫布邊緣球本身一倍寬度的距離 random(0 + size, width - size), random(0 + size, height - size), random(-7, 7), random(-7, 7), randomColor(), size ); balls.push(ball); } function loop() { ctx.fillStyle = 'rgba(0, 0, 0, 0.25)'; ctx.fillRect(0, 0, width, height); for (let i = 0; i < balls.length; i++) { balls[i].draw(); balls[i].update(); balls[i].collisionDetect(); } requestAnimationFrame(loop); } loop() ``` </details> <br />