JS에서 충돌 감지를 구현하는 방법

이 글에서는 주로 JS의 충돌 감지 구현 방법을 소개하고, 자바스크립트 충돌 감지의 원리와 관련 동작 기술을 예제 형식으로 분석합니다. 필요한 친구들이 참고할 수 있습니다

이 글의 예제에서는 충돌 감지를 구현하는 JS. 참고용으로 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

간단한 충돌 감지 예, p1이 p2와 충돌하는지 감지하고, p1이 p2에 도달하면 p2의 색상을 변경하고, 테스트 사진을 봅니다.

분석 보세요 사진:

p1이 p2의 위쪽 선(t2) 위 영역으로 이동하면 절대 건드릴 수 없습니다
p1이 오른쪽 선(r2)의 오른쪽 영역으로 이동하면 ) p2의, 절대 터치할 수 없습니다
p1이 p2의 하단 라인(b2) 아래 영역으로 이동할 때, 절대 터치하지 않습니다
p1이 p2의 왼쪽 라인(r2)의 왼쪽 영역으로 이동할 때 , 절대로 건드리지 않습니다

위의 네 가지 상황을 제외하고 다른 상황에서는 p1과 p2가 만났다는 것을 나타냅니다.

HTML 부분:

<p id="p1"></p>
<p id="p2"></p>

css 부분:

<style>
    #p1{
      width:100px ;height: 100px;background: green;
      position: absolute;
    }
    #p2{
      width:100px ;height: 100px;background: yellow;
      position: absolute;left: 300px;top: 200px;z-index: -1;
    }
</style>

JS 부분:

<script>
  window.onload = function () {
    var op = document.getElementById(&#39;p1&#39;);
    var op2 = document.getElementById(&#39;p2&#39;);
    var disX = 0;
    var disY = 0;
    op.onmousedown = function (ev) {
      var ev = ev|| window.event;
      disX = ev.clientX - op.offsetLeft;
      disY = ev.clientY - op.offsetTop;
      document.onmousemove = function (ev) {
        var ev = ev|| window.event;
        var t1 = op.offsetTop;
        var l1 = op.offsetLeft;
        var r1 = op.offsetLeft + op.offsetWidth;
        var b1 = op.offsetTop + op.offsetHeight;
        var t2 = op2.offsetTop;
        var l2 = op2.offsetLeft;
        var r2 = op2.offsetLeft + op2.offsetWidth;
        var b2 = op2.offsetTop + op2.offsetHeight;
        if(b1<t2 || l1>r2 || t1>b2 || r1<l2){// 表示没碰上
        }else{
          op2.style.background = &#39;blue&#39;;
        }
        op.style.left = ev.clientX - disX +&#39;px&#39;;
        op.style.top = ev.clientY - disY +&#39;px&#39;;
      }
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
      }
      return false;
    }
  }
</script>

위 내용은 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 글:

Vue에서 헤더 컴포넌트를 통한 개발 방법(자세한 튜토리얼)

React Server 렌더링 구현 문제를 자세히 설명

Table 및 Pagination을 통한 페이징 기능 구현 방법 Vue2.5의 구성 요소

Laravel에 Bootstrap 4를 통합하는 방법은 무엇입니까?

jquery의 select 태그에서 옵션 값을 얻는 방법

위 내용은 JS에서 충돌 감지를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!