什么是碰撞检测
碰撞检测是指两个物体碰撞，或者图片发生重叠之后的检测，这种检测往往在优秀中用的最多，比如飞机大战，子弹与敌机的碰撞等等，这种碰撞一旦被检测到，往往会执行一些事件，比如游戏中的敌人死亡的动态效果，这就是碰撞检测。 下面是自己实现的两种碰撞检测：
碰撞检测_边缘检测
主要实现div块在上下左右运动中如果碰到边缘，就像相反的方向运动。
实现代码
代码语言：javascript复制<!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块在各自的运动中碰撞，然后发生往相反方向运动
实现代码
代码语言：javascript复制<!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 width2 = parseInt(window.getComputedStyle(block1).width);
var width3 = parseInt(window.getComputedStyle(block2).width);
var height1 = parseInt(window.getComputedStyle(block1).height);
var height2 = parseInt(window.getComputedStyle(block2).height);
var center1={
x: left1 width2 /2,
y: top1 height1 /2
}
var center2={
x:left2 width3 /2,
y: top2 height2 /2
}
var diffx = Math.abs(center1.x - center2.x);
var diffy = Math.abs(center1.y - center2.y);
if(diffx<(width2 width3)/2 && diffy<(height1 height2)/2){
return true;
}
else{
return false;
}
}
//按照指定的周期（以毫秒计）来调用函数或计算表达式
//按指定时间执行第一个参数里面的内容
setInterval(function(){
move(div1);
move(div2);
},20);
</script>
</body>
</html>实现效果
ps：本次分享就到这里哈 ^ _ ^ !
