微客导航 » 文章资讯 » JavaScript碰撞检测原理及其实现代码

JavaScript碰撞检测原理及其实现代码

2023-07-28 18:58:13 212

本文实例为大家分享了JavaScript实现碰撞检测原的具体代码，供大家参考，具体内容如下

1.模拟碰撞

简单模拟碰撞过程,用一个可以拖拽的div2去尝试碰撞一个固定的div1(均用绝对定位)

2.碰撞检测原理

如图所示:
使得div分别有4个距离属性(L(left),T(top),R(right),B(bottom)).
对于div1来说,画出一个九宫格,div2在除中心以为的8个格子任意移动都不会发送碰撞.

也就是说,只要满足条件:oDiv2.div2R小于oDiv1.div1L||oDiv2.div2L大于oDiv1.div1R||oDiv2.div2B小于oDiv1.div1T||oDiv2.div2T大于oDiv1.div1B就不会发送碰撞

3.具体测试代码





body{margin:0;padding:0;}
#div2{height:100px;width:200px;background-color:orange;position:absolute;left:0px;top:0px;z-index:1;}
#div1{height:100px;width:100px;background-color:#a6e22e;position:absolute;left:600px;top:400px;}


//获取对象样式属性值
functiongetObjStyle(obj,attr)
{
returngetComputedStyle(obj)?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
}


window.οnlοad=function(){
varoDiv1=document.getElementById('div1');
varoDiv2=document.getElementById('div2');



oDiv2.οnmοusedοwn=function(onEvent,obj){//对div1实现拖拽,并对碰撞进行检测
obj=this;
varev=onEvent||event;
vardistance={};
distance.disX=ev.clientX-obj.offsetLeft;//到左边框的距离
distance.disY=ev.clientY-obj.offsetTop;//到上边框的距离

//获取div1的四个值
oDiv1.div1L=getObjStyle(oDiv1,'left');
oDiv1.div1R=parseInt(getObjStyle(oDiv1,'left'))+parseInt(getObjStyle(oDiv1,'width'))+'px';
oDiv1.div1T=getObjStyle(oDiv1,'top');
oDiv1.div1B=parseInt(getObjStyle(oDiv1,'top'))+parseInt(getObjStyle(oDiv1,'height'))+'px';




if(obj.setCapture)
obj.setCapture();

document.οnmοusemοve=function(onEvent){
varev=onEvent||event;
obj.style.left=ev.clientX-distance.disX+'px';
obj.style.top=ev.clientY-distance.disY+'px';

//获取div2的四个值
oDiv2.div2L=getObjStyle(oDiv2,'left');
oDiv2.div2R=parseInt(getObjStyle(oDiv2,'left'))+parseInt(getObjStyle(oDiv2,'width'))+'px';
oDiv2.div2T=getObjStyle(oDiv2,'top');
oDiv2.div2B=parseInt(getObjStyle(oDiv2,'top'))+parseInt(getObjStyle(oDiv2,'height'))+'px';

/*console.log('oDiv2.div2L:'+oDiv2.div2L+'oDiv2.div2R:'+oDiv2.div2R+'oDiv2.div2T:'+oDiv2.div2T+'oDiv2.div2B:'+oDiv2.div2B);*/

//碰撞检测
if(oDiv2.div2RoDiv1.div1R||oDiv2.div2BoDiv1.div1B){
//未发送碰撞
}else{
//发生碰撞
alert('发生碰撞');
}

}

document.οnmοuseup=function(){
document.οnmοuseup=document.οnmοusemοve=null;
if(obj.setCapture)
obj.releaseCapture();
}
returnfalse;
}
}



div2

div1

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

JavaScript碰撞检测原理及其实现代码

热门推荐

随机推荐