js实现碰撞检测特效代码分享
自己做了碰撞检测的封装,先看下实例demo,在看封装
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>碰撞检测</title>
<styletype="text/css">
*{
margin:0;
padding:0;
}
#divA,#divB{
width:200px;
height:200px;
background-color:purple;
font-size:50px;
line-height:200px;
text-align:center;
position:absolute;
color:#fff;
}
#divA{
left:30px;
top:30px;
z-index:5;
}
#divB{
left:300px;
top:300px;
}
</style>
</head>
<body>
<divid="divA">A</div>
<divid="divB">B</div>
</body>
<scripttype="text/javascript">
vardivA=document.getElementById("divA");
vardivB=document.getElementById("divB");
divA.onmousedown=function(e){
varevent1=window.event||e;
varstartX=event1.clientX;
varstartY=event1.clientY;
document.onmousemove=function(j){
varevent2=window.event||j;
varendX=event2.clientX;
varendY=event2.clientY;
divA.style.left=divA.offsetLeft+(endX-startX)+"px";
divA.style.top=divA.offsetTop+(endY-startY)+"px";
startX=endX;
startY=endY;
if(isCrash(divA,divB)==true){
divA.style.backgroundColor="red";
}else{
divA.style.backgroundColor="purple";
};
}
}
divA.onmouseup=function(){
document.onmousemove=null;
}
functionisCrash(obj1,obj2){
varboolCrash=true;
varleft1=obj1.offsetLeft;
varright1=obj1.offsetLeft+obj1.offsetWidth;
vartop1=obj1.offsetTop;
varbottom1=obj1.offsetTop+obj1.offsetHeight;
varleft2=obj2.offsetLeft;
varright2=obj2.offsetLeft+obj2.offsetWidth;
vartop2=obj2.offsetTop;
varbottom2=obj2.offsetTop+obj2.offsetHeight;
if(right1>left2&&left1<right2&&bottom1>top2&&top1<bottom2){
boolCrash=true;
}else{
boolCrash=false;
}
returnboolCrash;
}
</script>
</html>
函数封装
functionisCrash(obj1,obj2){
varboolCrash=true;//假设true为碰撞
varleft1=obj1.offsetLeft;
varright1=obj1.offsetLeft+obj1.offsetWidth;
vartop1=obj1.offsetTop;
varbottom1=obj1.offsetTop+obj1.offsetHeight;
varleft2=obj2.offsetLeft;
varright2=obj2.offsetLeft+obj2.offsetWidth;
vartop2=obj2.offsetTop;
varbottom2=obj2.offsetTop+obj2.offsetHeight;
if(right1>left2&&left1<right2&&bottom1>top2&&top1<bottom2){
boolCrash=true;
}else{
boolCrash=false;
}
returnboolCrash;
}