路漫漫其修远兮：js的成长经历（六）—— js 动画：碰撞检测

最新推荐文章于 2022-05-16 16:04:15 发布

不愿意做鱼的小鲸鱼

最新推荐文章于 2022-05-16 16:04:15 发布

阅读量465

点赞数

分类专栏： javacript 文章标签： javascript web前端碰撞检测 js动画

本文链接：https://blog.csdn.net/qq_42038623/article/details/98035871

版权

javacript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

什么是碰撞检测

碰撞检测是指两个物体碰撞，或者图片发生重叠之后的检测，这种检测往往在优秀中用的最多，比如飞机大战，子弹与敌机的碰撞等等，这种碰撞一旦被检测到，往往会执行一些事件，比如游戏中的敌人死亡的动态效果，这就是碰撞检测。
下面是自己实现的两种碰撞检测：

碰撞检测_边缘检测

主要实现div块在上下左右运动中如果碰到边缘，就像相反的方向运动。

实现代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0px;
				padding:0px;
			}
			div{
				width: 100px;
				height: 100px;
				background-color: blueviolet;
				position: absolute;
				left: 0;
				right: 0;
			}
		</style>
	</head>
	<body>
		<div></div>
		<script type="text/javascript">
			//设置x轴和y轴的速度
			var speedx=5;
			var speedy=5;
			//返回文档中匹配指定 CSS 选择器的一个元素。
			var div=document.querySelector("div");
			//主函数move()
			function move(){
				//获取div当前的左距离和顶距离
				var currentLeft = parseInt(window.getComputedStyle(div).left);
				var currentTop = parseInt(window.getComputedStyle(div).top);
				
				check_border_collision(div);
				
				var left = currentLeft + speedx;
				var top = currentTop + speedy;
				//重新设置div的css的属性样式
				div.style.left = left + "px";
				div.style.top = top + "px";
			}
			
			//检测是否和边缘碰撞的函数
			function check_border_collision(el){
				//获取div当前的左距离和顶距离,盒子的宽和高
				var style = window.getComputedStyle(el);
				var left = parseInt(style.left);
				var top = parseInt(style.top);
				var w = parseInt(style.width);
				var h = parseInt(style.height);
				//检测上下左右是否碰撞
				if(left < 0){
					left=0;
					speedx*=-1;
				}
				if(left>window.innerWidth-w){
					left = window.innerWidth-w;
					speedx*=-1;
				}
				if(top<0){
					top=0;
					speedy*=-1;
				}
				if(top>window.innerHeight-h){
					top = window.innerHeight-h;
					speedy*=-1;
				}
				
				//将位置设置到el的样式上
				el.style.left=left+"px";
				el.style.top=top+"px";
			}			
			//按照指定的周期（以毫秒计）来调用函数或计算表达式
			//按指定时间执行第一个参数里面的内容
			setInterval(function(){
				move()
			},20);
		</script>	
	</body>
</html>

实现效果

在这里插入图片描述

碰撞检测_块于块碰撞

主要实现两个div块在各自的运动中碰撞，然后发生往相反方向运动

实现代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0px;
				padding:0px;
			}
			#btn1{
				width: 150px;
				height: 150px;
				font-size: 80px;
				font-family: "华文行楷";
				color: red;
				text-align: center;
				line-height:150px ;
				background-color: greenyellow;
				position: absolute;
				left: 0;
				right: 0;
			}
			#btn2{
				width: 150px;
				height: 150px;
				font-size: 80px;
				font-family: "华文行楷";
				color: red;
				text-align: center;
				/* 让文字垂直居中 */
				line-height:150px ;
				background-color: aqua;
				position: absolute;
				left: 500px;
				top: 300px;
			}
		</style>
	</head>
	<body>
		<div id="btn1">你</div>
		<div id="btn2">好</div>
		<script type="text/javascript">
			var speedx=5;
			var speedy=3;
			//返回文档中匹配指定 CSS 选择器的一个元素。
			var div1=document.querySelector("#btn1");
			var div2=document.querySelector("#btn2");
			div1.speedx=8;
			div1.speedy=5;
			div2.speedx=8;
			div2.speedy=5;
			function move(el){
				//获取div当前的左距离和顶距离
				var currentLeft = parseInt(window.getComputedStyle(el).left);
				var currentTop = parseInt(window.getComputedStyle(el).top);
				
				check_border_collision(el);
				var tx,ty;
				if(check_block_collision(div1,div2)){
					tx=div1.speedx;
					ty=div1.speedy;
					
					div1.speedx=div2.speedx;
					div1.speedy=div2.speedy;
					
					div2.speedx=tx;
					div2.speedy=ty;
				}
				var left = currentLeft + el.speedx;
				var top = currentTop + el.speedy;
				el.style.left = left + "px";
				el.style.top = top + "px";
			}
			
			//检测是否和边缘碰撞的函数
			function check_border_collision(el){
				//获取div当前的左距离和顶距离,盒子的宽和高
				var style = window.getComputedStyle(el);
				var left = parseInt(style.left);
				var top = parseInt(style.top);
				var w = parseInt(style.width);
				var h = parseInt(style.height);
				
				if(left < 0){
					left=0;
					el.speedx*=-1;
				}
				if(left>window.innerWidth-w){
					left = window.innerWidth-w;
					el.speedx*=-1;
				}
				if(top<0){
					top=0;
					el.speedy*=-1;
				}
				if(top>window.innerHeight-h){
					top = window.innerHeight-h;
					el.speedy*=-1;
				}
				
				//将位置设置到el的样式上
				el.style.left=left+"px";
				el.style.top=top+"px";
			}
			
			function check_block_collision(block1,block2){
				var left1 = parseInt(window.getComputedStyle(block1).left);
				var left2 = parseInt(window.getComputedStyle(block2).left);
				
				var top1 = parseInt(window.getComputedStyle(block1).top);
				var top2 = parseInt(window.getComputedStyle(block2).top);
				
				var width1 = parseInt(window.getComputedStyle(block1).width);
				var width2 = parseInt(window.getComputedStyle(block2).width);
				
				var height1 = parseInt(window.getComputedStyle(block1).height);
				var height2 = parseInt(window.getComputedStyle(block2).height);
				
				var center1={
					x: left1 + width1 /2,
					y: top1 + height1 /2
				}
				var center2={
					x:left2 + width2 /2,
					y: top2 + height2 /2
				}
				var diffx = Math.abs(center1.x - center2.x);
				var diffy = Math.abs(center1.y - center2.y);
				
				if(diffx<(width1 + width2)/2 && diffy<(height1 + height2)/2){
					return true;
				}
				else{
					return false;
				}
			}
			
			//按照指定的周期（以毫秒计）来调用函数或计算表达式
			//按指定时间执行第一个参数里面的内容
			setInterval(function(){
				move(div1);
				move(div2);
			},20);
		</script>
		
	</body>
</html>