canvas画布在画布中绘制2个小球在画布中做碰壁反弹,当两小球相撞之后,两个小球交换速度

拼搏现实的明天。 2021-09-16 04:24 289阅读 0赞

![70][]

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		#cv{
    			border:1px solid;
    		}
    	</style>
    </head>
    <body>
    	<canvas id="cv" width="500" height="500"></canvas>
    </body>
    <script type="text/javascript">
    	var ctx = cv.getContext("2d");
    	function Arc(x,y,r,d="0",z=Math.PI*2,color,s,s1){
    		this.x=x;
    		this.y=y;
    		this.r=r;
    		this.d=d;
    		this.z=z;
    		this.color=color;
    		this.s=s;
    		this.s1=s1;
    	}
    	Arc.prototype.draw =function(){
    		ctx.beginPath();
    		ctx.moveTo(this.x,this.y);
    		ctx.arc(this.x,this.y,this.r,this.d,this.z,this.color,this.s,this.s1);
    		ctx.fillStyle=this.color;
    		ctx.fill();
    	}
    
    	//生成随机数
    	function randomNum(min,max){
    		return parseInt(Math.random()*(max-min+1)+min);
    	}
    	//生成随机颜色
    	function randomColor(){
    		return "rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")";
    	}
    
    	var arr =[];
    	function createbox(){
    		for(var i=0;i<2;i++){
    			var box = new Arc(randomNum(100,300),randomNum(100,300),randomNum(30,50),0,Math.PI*2,randomColor(),randomNum(7,20),randomNum(7,20));
    			box.draw();
    			arr.push(box);
    		}
    		return box;
    	}
    	createbox();
    	
    	//小球碰壁反弹
    		setInterval(function(){
    			cv.width=cv.width;
    			for(var i =0;i<arr.length;i++){	
    				arr[i].x+=arr[i].s;
    				if(arr[i].x>=cv.width-arr[i].r){
    					arr[i].s*=-1;
    				}
    				if(arr[i].x-arr[i].r<=0){
    					arr[i].s*=-1;
    				}
    				arr[i].y+=arr[i].s1;
    				if(arr[i].y>=cv.height-arr[i].r){
    					arr[i].s1*=-1;
    				}
    				if(arr[i].y-arr[i].r<=0){
    					arr[i].s1*=-1;
    				}
    				arr[i].draw();	
    
    				var  r1x = arr[0].x;
    				var  r1y = arr[0].y;
    				var  r1 =  arr[0].r;
    
    				var  r2x = arr[1].x;
    				var  r2y = arr[1].y;
    				var  r2 =  arr[1].r;
    
    				//碰撞
    				if(Math.pow((r2x-r1x),2)+Math.pow((r2y-r1y),2)<=Math.pow((r2+r1),2)){
    					console.log("碰撞");
    					var temp1 = arr[0].s;
    					var temp2 = arr[0].s1;
    					arr[0].s=arr[1].s;
    					arr[0].s1=arr[1].s1;
    					arr[1].s=temp1;
    					arr[1].s1=temp2;
    				}	
    			}
    		},50)
    </script>
    </html>
    
    
    </script>
    </html>

[70]: /images/20210813/519ef346295742e0940cf539b23b1929.png