JS实现判断碰撞的方法
本文实例讲述了JS实现判断碰撞的方法。分享给大家供大家参考。具体如下：
JS判断碰撞方法：
/**判断是否碰撞
*@paramobj原对象
*@paramdobj目标对象
*/
functionimpact(obj,dobj){
varo={
x:getDefaultStyle(obj,'left'),
y:getDefaultStyle(obj,'top'),
w:getDefaultStyle(obj,'width'),
h:getDefaultStyle(obj,'height')
}
vard={
x:getDefaultStyle(dobj,'left'),
y:getDefaultStyle(dobj,'top'),
w:getDefaultStyle(dobj,'width'),
h:getDefaultStyle(dobj,'height')
}
varpx,py;
px=o.x<=d.x?d.x:o.x;
py=o.y<=d.y?d.y:o.y;
//判断点是否都在两个对象中
if(px>=o.x&&px<=o.x+o.w&&py>=o.y&&py<=o.y+o.h&&px>=d.x&&px<=d.x+d.w&&py>=d.y&&py<=d.y+d.h){
returntrue;
}else{
returnfalse;
}
}
/**获取对象属性
*@paramobj 对象
*@paramattribute属性
*/
functiongetDefaultStyle(obj,attribute){
returnparseInt(obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute]);
}
示例如下：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>demo</title>
<styletype="text/css">
body{margin:0px;}
.main{position:relative;}
#f1{position:absolute;background:#FF0000;top:100px;left:100px;width:200px;height:200px;z-index:999}
#f2{position:absolute;background:#FFFF00;top:0px;left:0px;width:600px;height:150px;}
</style>
</head>
<body>
<divclass="main">
<divid="f1"></div>
<divid="f2"></div>
</div>
<scripttype="text/javascript">
varo=document.getElementById("f1");
vard=document.getElementById("f2");
alert(impact(o,d));
functionimpact(obj,dobj){ varo={ x:getDefaultStyle(obj,'left'), y:getDefaultStyle(obj,'top'), w:getDefaultStyle(obj,'width'), h:getDefaultStyle(obj,'height') }
vard={ x:getDefaultStyle(dobj,'left'), y:getDefaultStyle(dobj,'top'), w:getDefaultStyle(dobj,'width'), h:getDefaultStyle(dobj,'height') }
varpx,py;
px=o.x<=d.x?d.x:o.x; py=o.y<=d.y?d.y:o.y; //判断点是否都在两个对象中 if(px>=o.x&&px<=o.x+o.w&&py>=o.y&&py<=o.y+o.h&&px>=d.x&&px<=d.x+d.w&&py>=d.y&&py<=d.y+d.h){ returntrue; }else{ returnfalse; } }
functiongetDefaultStyle(obj,attribute){ returnparseInt(obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute]); } </script> </body> </html>