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>