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

不念不忘少年蓝@ 2022-05-25 07:18 298阅读 0赞

效果图:

![20180510102045447][]

<!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][https_www.cnblogs.com_Marlboro-pm_p_7120329.html]

[20180510102045447]: /images/20220525/e0ffc97ca9b441c89f294c7e044d37ee.png
[https_www.cnblogs.com_Marlboro-pm_p_7120329.html]: https://www.cnblogs.com/Marlboro-pm/p/7120329.html