Js写的两个小球碰撞(Canvas)

效果图:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Js球碰撞</title>
		<style media="screen">
           * {
               margin: 0;
               padding: 0;
           }
           canvas {
               box-shadow: 0 0 40px black;
               margin: 50px;
           }
		</style>

	</head>
	<body>
		<canvas id="canvas" width="500" height="500">您的浏览器不支持canvas</canvas>
		<script>
	        var canvas = document.querySelector('canvas');//querySelector是js获取DOM对象的方法
	        var ctx = canvas.getContext('2d');//getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
	
	        var canvasW = canvas.width;
	        var canvasH = canvas.height;
			
			console.log("打印宽高------",canvasW,canvasH);
			
	        //随机数函数
	        function random(min,max) {
	            return parseInt(Math.random()*(max - min) + min);
	        }
	
	        //构造函数
	        function Ball(x, y, r, speedX, speedY) {
	            this.r = r || random(10, 30);
	            this.x = x || random(this.r, canvasW - this.r);
	            this.y = y || random(this.r, canvasH - this.r);
	            this.speedX = speedX || random(2, 5);//如果有指定speedx坐标就使用，没有就随机
	            this.speedY = speedY || random(2, 5);//如果有指定speedy坐标就使用，没有就随机
	            
	            console.log("打印Ball的内容------",this.r,this.x,this.y,this.speedX,this.speedY);
	            
	            //draw方法，这里绘画canvas里面的两个球
	            this.draw = function() {
	                ctx.beginPath();//beginPath是Canvas回执路径的方法
	                ctx.arc(this.x, this.y, this.r, 0, Math.PI*2, true);//Canvas中的arc()方法主要用来创建圆或者部分圆,x是圆中心的
	                //x坐标，y是圆中心的y轴坐标，r是圆的半径，0, Math.PI*2是创建圆的，true是逆时针绘图
	                ctx.fillStyle = 'red';//用来填充颜色的
	                ctx.fill();//执行
	            }
	            //move方法,两个球移动
	            this.move = function() {
	                this.x += this.speedX;
	                this.y += this.speedY;
	                if(this.x < this.r || this.x > canvasW - this.r) {
	                    this.speedX = -this.speedX;
	                }
	                if(this.y < this.r || this.y > canvasH - this.r) {
	                    this.speedY = -this.speedY;
	                }
	                this.draw();//调用draw方法
	            }
	        }
	
	        var ball1 = new Ball();
	        var ball2 = new Ball();
	        ball1.draw();
	        ball2.draw();
	
	        // 碰撞函数
	        function isCrash(obj1, obj2) {
	            var x = obj1.x - obj2.x;//两个圆中心的x坐标相减.
	            var y = obj1.y - obj2.y;//两个圆中心的y坐标相减.
	            
	//          console.log("碰撞打印函数-------",x,y);
	            
	            var distance = Math.sqrt(x*x + y*y);//开方函数
	//          console.log("{----------",distance,obj1.r + obj2.r)
	            if(distance < obj1.r + obj2.r) {//判断碰撞
	                obj1.speedX = -obj1.speedX;
	                obj1.speedY = -obj1.speedY;
	                obj2.speedX = -obj2.speedX;
	                obj2.speedY = -obj2.speedY;
	            }
	        }
	
	        var frameNum = 0;
	        var prevDate = new Date();
	
	        function gameloop() {
	            frameNum++;
	            ctx.clearRect(0, 0, canvasW, canvasH);//clearRect()是canvas清除像素的方法
	            ball1.move();
	            ball2.move();
	            isCrash(ball1,ball2);
	            window.requestAnimationFrame(gameloop);//跟setTimeout相似，根据帧率执行
	        }
	        gameloop();
	</script>
	</body>
</html>
转载地址:https://www.cnblogs.com/Marlboro-pm/p/7120329.html
Js写的两个小球碰撞(Canvas)

猜你喜欢
