canvas画布小球碰撞
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小球碰撞反弹</title> <style type="text/css"> #canvas1{ border: 4px dashed black; margin: 0 auto; display: block; } </style> </head> <body> <canvas id="canvas1" width="600" height="600"></canvas> </body> <script type="text/javascript"> var canvas = document.getElementById("canvas1"); var ctx = canvas.getContext("2d"); //随机函数 function randomNum (m,n) { return Math.floor(Math.random() * (n - m + 1) + m); } //创建小球类 function Ball () { //随机小球半径 this.r = randomNum(20,30); //随机颜色 this.color = 'rgb(' + randomNum(0,255) + ',' + randomNum(0,255) + ',' + randomNum(0,255) + ')'; //随机小球的位置 this.x = randomNum(this.r,canvas.width-this.r); this.y = randomNum(this.r,canvas.height-this.r); //随机小球速度 this.speedX = randomNum(2,5) * randomNum(0,1) ? 1 : -1; this.speedY = randomNum(2,5) * randomNum(0,1) ? 1 : -1; } //小球移动 Ball.prototype.move = function () { this.x += this.speedX; this.y += this.speedY; //判断是否碰到边界 //左边界 if (this.x <= this.r) { this.x = this.r; //反弹 this.speedX *= -1; } //右边界 if (this.x >= canvas.width-this.r) { this.x = canvas.width-this.r; this.speedX *= -1; } if (this.y <= this.r) { this.y = this.r; this.speedY *= -1; } if (this.y >= canvas.height-this.r) { this.y = canvas.height-this.r; this.speedY *= -1; } } //绘制小球 Ball.prototype.drawBall = function () { ctx.beginPath(); ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false); ctx.fillStyle = this.color; ctx.fill(); } //创建小球的对象 var balls = []; for (var i = 0;i < 20;i++) { var ball = new Ball(); balls.push(ball); } //让小球移动 setInterval(function () { ctx.clearRect(0,0,canvas.width,canvas.height); for (var i = 0;i < balls.length;i++) { balls[i].move(); balls[i].drawBall(); //移动后检测小球碰撞反弹 for (j = 0;j < balls.length;j++) { //判断不是同一个球 if (balls[i] == balls[j]) { continue;//不做碰撞检测 } //碰撞检测 //互换速度 //使用第三个变量 var tempX = balls[i].speedX; balls[i].speedX = balls[j].speedX; balls[j].speedX = tempX; var tempY = balls[i].speedY; balls[i].speedY = balls[j].speedY; balls[j].speedY = tempY; } } } },0.1) //碰撞检测 function ballCrash (ball1,ball2) { //两个小球之间的距离 var distance = Math.sqrt(Math.pow(ball1.x - ball2.x,2) + Math.pow(ball1.y - ball2.y,2)); if (distance <= ball1.r + ball2.r) { return true;//碰撞 } else{ return false;//没有碰撞 } } </script> </html>
原文链接：http://www.w3cfuns.com/notes/31134/48414198f8a17625b7f1b92f4b5f49f5.html 作者：彐娇
