JavaScript : 두 개의 divs 터치 / 오버랩이 발생할 때 함수를 트리거합니다.

StackOverflow https://stackoverflow.com/questions/1825806

  •  22-07-2019
  •  | 
  •  

문제

제목은 실제로 설명합니다. 이 작업을 수행하는 방법? 두 div는 크기가 다릅니다. 두 div가 모두 움직이고 있습니다 (나는 약간의 jQuery 게임을하고 있습니다). 한 사람이 다른 사람을 때리면 물건이 일어나기를 원합니다.

감사

도움이 되었습니까?

해결책

Onoverlap에 대한 JavaScript 이벤트는 없으므로 DIV가 자신과 겹치는지 여부를 계산해야합니다.

var valueInRange = function(value,min, max) { 
   return (value >= min) && (value <= max);
}

var overlap = function(x1,y1,w1,h1,x2,y2,w2,h2) {
   xOverlap = valueInRange(x1, x2, x2 + w2) || valueInRange(x2, x1, x1 + w1);
   yOverlap = valueInRange(y1, y2, y2 + h2) || valueInRange(y2, y1, y1 + h1);
   return xOverlap && yOverlap;
}

다른 팁

divs가 어떻게 움직일 수 있습니까? 확실히 그렇게하는 한 가지 방법은 두 개의 div가 주어지면 겹치는지 여부를 제시하는 간단한 부울 반복 기능을 작성하는 것입니다 (모서리의 좌표를 얻고 교차로를 비교하십시오). 그런 다음 DIV가 움직이게하는 함수의 끝 에서이 함수를 호출하고 적절한 조치를 취하십시오.

실제로 움직이는 방법에 따라 두 DIV의 좌표가있어 매우 효율적으로 만들 수 있습니다.

그 외에도 나는 "Onoverlap"이벤트 나 이와 유사한 것을 알지 못하므로 정기적으로 확인하는 것은 내가 생각할 수있는 유일한 방법입니다. 코드가 구조화되는 방법에 따라 더 빠른 방법이있을 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top