标签：canvas 碰撞 小球 randomNum 画布 speedY speedX var ballArr
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。