JS (canvas) 兩個小球碰撞

 <style media="screen"> * { margin: 0; padding: 0; } canvas { box-shadow: 0 0 40px black; margin: 50px; } </style>   <canvas id="canvas" width="500" height="500">您的瀏覽器不支持canvas</canvas>  <script> var canvas = document.querySelector('canvas'); var ctx = canvas.getContext('2d'); var canvasW = canvas.width; var canvasH = canvas.height; //隨機數函數 function random(min,max) { return parseInt(Math.random()*(max - min) + min); } //構造函數 function Ball(x, y, r, speedX, speedY) { this.r = r || random(10, 30); this.x = x || random(this.r, canvasW - this.r); this.y = y || random(this.r, canvasH - this.r); this.speedX = speedX || random(2, 5); this.speedY = speedY || random(2, 5); //draw方法 this.draw = function() { ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, Math.PI*2, true); ctx.fillStyle = 'red'; ctx.fill(); } //move方法 this.move = function() { this.x += this.speedX; this.y += this.speedY; if(this.x < this.r || this.x > canvasW - this.r) { this.speedX = -this.speedX; } if(this.y < this.r || this.y > canvasH - this.r) { this.speedY = -this.speedY; } this.draw();//調用draw方法 } } var ball1 = new Ball(); var ball2 = new Ball(); ball1.draw(); ball2.draw(); // 碰撞函數 function isCrash(obj1, obj2) { var x = obj1.x - obj2.x; var y = obj1.y - obj2.y; var distance = Math.sqrt(x*x + y*y);//開方函數 if(distance < obj1.r + obj2.r) {//判斷碰撞 obj1.speedX = -obj1.speedX; obj1.speedY = -obj1.speedY; obj2.speedX = -obj2.speedX; obj2.speedY = -obj2.speedY; } } var frameNum = 0; var prevDate = new Date(); function gameloop() { frameNum++; ctx.clearRect(0, 0, canvasW, canvasH); ball1.move(); ball2.move(); isCrash(ball1,ball2); window.requestAnimationFrame(gameloop);//跟setTimeout類似，根據幀率執行 } gameloop();
</script>