在canvas绘制的画布上实现一个动态小球碰撞；拓展：简单更改即可实现矩形碰撞
作者：互联网
1.小球碰撞
（1）.源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小球碰撞</title>
<style type="text/css">
#c{
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="c" width="1400" height="700"></canvas>
</body>
<script type="text/javascript">
var c = document.getElementById("c");
var ctx = c.getContext("2d");
// 定义一个数组，用于存放小球。
var ballArr = []
for(var i = 0;i < 10; i++){
// 创建小球
var b = new Ball();
// 把小球放入数组
ballArr.push(b); // 把小球放到数组的末尾。
}
// 递归+requestAnimationFrame（）方法实现小球运动
function startGame(){
// 清空画布
ctx.clearRect(0,0,c.width,c.height);
// 把数组中的小球画出来
for(var i = 0; i < ballArr.length; i++){
// 绘制小球
ballArr[i].draw();
// 小球移动
ballArr[i].move();
}
requestAnimationFrame(startGame); // requestAnimationFrame的作用就是重绘
};
// 开始
startGame()
function Ball(){
// 半径
this.r = randomNum(10,50);
// 圆心坐标
this.x = randomNum(this.r,c.width-this.r);
this.y = randomNum(this.r,c.height-this.r);
// 圆的颜色
this.color = randomColor();
// 球的速度
this.speedX = randomNum(-10,10);
this.speedY = randomNum(-10,10);
// 绘制自身
this.draw = function(){
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);
ctx.fill();
};
// 移动
this.move = function(){
// 定义左右边界
if(this.x + this.r + this.speedX > c.width || this.x - this.r < 0){
this.speedX *= -1;
};
// 定义上下边界
if(this.y - this.r < 0 ||this.y + this.r > c.height){
this.speedY *= -1;
};
// 移动
this.x += this.speedX;
this.y += this.speedY;
// 判断当前的小球和其他小球有没有相交
// 需要逐个判断：
for(var i = 0; i < ballArr.length; i++){
// 如果数组中的球不是我自身（当前球）
if(this != ballArr[i]){
if(interect(this,ballArr[i])==true){
// 交换颜色
var tempColor = this.color;
this.color = ballArr[i].color;
ballArr[i].color = tempColor;
// 交换x方向速度
var tempSpeedX = this.speedX;
this.speedX = ballArr[i].speedX;
ballArr[i].speedX = tempSpeedX;
// 交换y方向速度
var tempSpeedY = this.speedY;
this.speedY = ballArr[i].speedY;
ballArr[i].speedY = tempSpeedY;
}
}
}
};
};
// 产生一个范围Wie[min,max]的随机数
function randomNum(min,max){
// 思路：[20,80]---->[0,60] + 20 Math.floor()向下取整。
var num = Math.floor(Math.random() * (max - min + 1)) + min;
return num;
};
// 产生一个随机颜色
function randomColor(){
var r = randomNum(0,255);
var g = randomNum(0,255);
var b = randomNum(0,255);
var c = "rgb("+r+","+g+","+b+")";
return c;
};
// 判断两个圆是否相交
function interect(ball1,ball2){
var dx = ball1.x - ball2.x;
var dy = ball1.y - ball2.y;
var distance = Math.sqrt(dx*dx+dy*dy);
if(ball1.r + ball2.r >= distance){
// 半径之和大于等于圆心距离，说明相交了
return true;
}else{
return false;
}
}
</script>
</html>
（2）实现效果：
（1）源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小球碰撞</title>
<style type="text/css">
#c{
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="c" width="1400" height="700"></canvas>
</body>
<script type="text/javascript">
var c = document.getElementById("c");
var ctx = c.getContext("2d");
// 定义一个数组，用于存放小球。
var ballArr = []
for(var i = 0;i < 10; i++){
// 创建小球
var b = new Ball();
// 把小球放入数组
ballArr.push(b); // 把小球放到数组的末尾。
}
// 递归+requestAnimationFrame（）方法实现小球运动
function startGame(){
// 清空画布
ctx.clearRect(0,0,c.width,c.height);
// 把数组中的小球画出来
for(var i = 0; i < ballArr.length; i++){
// 绘制小球
ballArr[i].draw();
// 小球移动
ballArr[i].move();
}
requestAnimationFrame(startGame); // requestAnimationFrame的作用就是重绘
};
startGame()
function Ball(){
// 矩形宽
this.w = randomNum(10,100);
// 矩形高
this.h = randomNum(10,60);
// 矩形左上x
this.x = randomNum(0,c.width - this.w);
// 矩形左上y
this.y = randomNum(0,c.height - this.h);
// 矩形的颜色
this.color = randomColor();
// 矩形的速度
this.speedX = randomNum(-5,5);
this.speedY = randomNum(-5,5);
// 绘制自身
this.draw = function(){
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.fillRect(this.x,this.y,this.w,this.h);
ctx.fill();
};
// 移动
this.move = function(){
if(this.x <= 0 || this.x + this.speedX + this.w > c.width){
this.speedX *= -1;
};
if(this.y <= 0 || this.y + this.speedY + this.h > c.height){
this.speedY *= -1;
};
this.x += this.speedX;
this.y += this.speedY;
// 判断当前的矩形和其他小球有没有相交
for(var i = 0; i < ballArr.length; i++){
// 如果数组中的球不是我自身（当前球）
if(this != ballArr[i]){
if(interect(this,ballArr[i])==true){
// 交换颜色
var tempColor = this.color;
this.color = ballArr[i].color;
ballArr[i].color = tempColor;
// 交换x方向速度
var tempSpeedX = this.speedX;
this.speedX = ballArr[i].speedX;
ballArr[i].speedX = tempSpeedX;
// 交换y方向速度
var tempSpeedY = this.speedY;
this.speedY = ballArr[i].speedY;
ballArr[i].speedY = tempSpeedY;
}
}
}
};
};
// 产生一个范围Wie[min,max]的随机数
function randomNum(min,max){
// 思路：[20,80]---->[0,60] + 20 Math.floor()向下取整。
var num = Math.floor(Math.random() * (max - min + 1)) + min;
return num;
};
// 产生一个随机颜色
function randomColor(){
var r = randomNum(0,255);
var g = randomNum(0,255);
var b = randomNum(0,255);
var c = "rgb("+r+","+g+","+b+")";
return c;
};
// 判断两个矩形是否相交
function interect(ball1,ball2){
if(ball1.x > ball2.x+ball2.w || ball1.y > ball2.y + ball2.h || ball1.x + ball1.w < ball2.x || ball1.y < ball2.y){
return false;
}else{
return true;
}
}
</script>
</html>
（2）实现效果：
标签：canvas,碰撞,小球,randomNum,画布,speedY,speedX,var,ballArr 来源： https://blog.51cto.com/u_15264787/2886725