JavaScript 충돌 검출 원리 및 구현 코드
1.시 뮬 레이 션 충돌
간단하게 충돌 과정 을 시 뮬 레이 션 하여 끌 수 있 는 div 2 로 고정된 div 1 에 부 딪 히 려 고 시도 합 니 다(모두 절대 위치 로)
2.충돌 검출 원리
그림 에서 보 듯 이:
div 는 각각 4 개의 거리 속성(L(left),T(top),R(right),B(bottom)을 가지 게 합 니 다.
div 1 에 있어 서 9 궁 격 을 그 려 서 div 2 는 중심 을 제외 한 8 개의 칸 을 임의로 이동 해도 부 딪 히 지 않 습 니 다.
즉,조건 을 만족 시 키 면 oDiv2.div2R 이 oDiv1.div1L||oDiv2.div2L 이 oDiv1.div1R||oDiv2.div2B 2.div2B 2B 보다 작 으 면 oDiv1.div1T||oDiv2.div2T 가 oDiv1.div1B 보다 크 면 충돌 을 보 내지 않 는 다 는 것 이다.
3.구체 적 인 테스트 코드
<html>
<head>
<title></title>
<style type="text/css">
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;}
</style>
<script type="text/javascript">
//
function getObjStyle(obj,attr)
{
return getComputedStyle(obj)?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
}
</script>
<script type="text/javascript">
window.οnlοad=function (){
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
oDiv2.οnmοusedοwn=function (onEvent,obj){// div1 ,
obj=this;
var ev=onEvent||event;
var distance={};
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){
var ev=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.div2R<oDiv1.div1L || oDiv2.div2L>oDiv1.div1R || oDiv2.div2B<oDiv1.div1T || oDiv2.div2T>oDiv1.div1B){
//
}else{
//
alert(' ');
}
}
document.οnmοuseup=function (){
document.οnmοuseup=document.οnmοusemοve=null;
if(obj.setCapture)
obj.releaseCapture();
}
return false;
}
}
</script>
</head>
<body>
<div id="div2">div2</div>
<div id="div1">div1</div>
</body>
</html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
