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; }