canvas（二）

坑军之王

2022-03-08

231

canvas中的碰撞检测实际上只是if的条件判断

可以查看以下代码：

<canvas width="500" height="500" id="ctx"></canvas>

canvas设置

canvas{
		border:  solid 1px black;
	}

canvas样式

                var canvas =document.querySelector('#ctx');
		var ctx= canvas.getContext('2d');
		//初始条件设置
		var x=100; var y=100; var r=30; var w=h=500;
		var xSpeed=3;//横向速度
		var ySpeed=2;//纵向速度
		/**
		 * @param {Object} x 圆心的横坐标
		 * @param {Object} y 圆心的纵坐标
		 * @param {Object} r 圆的半径
		 */
		function drawCore(x,y,r){
			ctx.beginPath();
			ctx.arc(x,y,r,0,Math.PI*2);
			ctx.fillStyle='gold'
			ctx.fill();
		}
		
		setInterval(function(){
			//清除画布
			ctx.clearRect(0,0,w,h);
			//水平运动
			if(x-r<=0||x+r>=w){
				xSpeed=-xSpeed;
			}
                        //垂直运动
			if(y-r<=0||y+r>=h){
				ySpeed=-ySpeed;
			}
			x=x+xSpeed;
			y=y+ySpeed;
			drawCore(x,y,r);
		},10);

canvas绘制及内容

这些代码中最终导致的结果如下：

以上代码中，核心（碰撞检测）部分实际上只是这些：

if(x-r<=0||x+r>=w){
       xSpeed=-xSpeed;
}
if(y-r<=0||y+r>=h){
       ySpeed=-ySpeed;
}

这个图涉及到圆的碰撞检测，如果圆碰到边框的时候，将横向和纵向的速度全部变更为负数，到时候在项目中显示如下：（暂时搞不出gif，等能搞的时候将会替换）

用户评论

评论列表