캔버스에 그려진 이미지에 충돌 감지 추가

Question

HTML5 캔버스와 자바 스크립트를 사용하여 간단한 웹 기반 게임을 만들고 있습니다. 현재 캔버스에 이미지가 표시되어 있는데, 각각은 패스트 푸드 레스토랑에있는 항목을 나타냅니다. 또한 자산, 책임, 수입 또는 지출이라는 레이블이 붙은 네 개의 설명 상자가 있습니다.

각 이미지는 이러한 설명 상자 중 하나에 속하며 사용자는 각 이미지를 올바른 설명 상자로 끌어서 놓아야합니다.

박스 이미지를 보유한 JS 변수의 이름과 각 아이템 이미지의 HTML alt 태그, 즉 img "chair"가있는 이미지를 올바른 상자로 드래그했는지 확인하려고합니다 alt 태그 "asset"이고 애셋의 설명 상자에 변수 이름이 "assetsDescriptionBox"인 경우 'if'문을 사용하여 사용자가 드래그 한 이미지가 캔버스의 같은 영역으로 드래그되었는지 감지합니다. 자산 설명 상자가 표시되고 해당 이미지의 alt 태그가 "asset"인 경우 캔버스에서 사라지고 (나중에 게임에서 사용할 수 있도록 배열에 추가됩니다).

그러나 사용자가 드래그 한 이미지에 alt 태그 "asset"이 없지만 "liability"와 같은 다른 태그가있는 경우 캔버스에서 다시 그려지며 다시 원래 그려지는 곳으로 다시 그려집니다 .

어떻게 구현해야할지 모르겠습니다. 충돌 감지를 한 번 보았습니다. JS 메서드 getBoundingClientRect를 사용하여 이미지의 '외부 한계'를 얻은 다음 두 이미지의 바깥 쪽 경계가 전혀 겹치지 않는지 확인하는 방법이 있습니다. , 그리고 그렇게한다면, 뭔가를하십시오. 그러나이 방법을 사용하는 방법에 대해서는 확신 할 수 없으며 빠른 Google 검색을 수행 할 때 특히 도움이되는 것을 찾을 수 없습니다.

누구에게 이것이 최선의 방법이 될지 알고 있습니까? 그렇다면 getBoundingClientRect 메소드를 사용하는 방법의 예를 게시 할 수 있습니까? 그렇지 않다면 어떻게 할 것입니까?

그런데 16시 45분

@

편집 17/12/2012, 나는 KineticJS 라이브러리 드래그를 추가하는 (나는 하나 명 또는 두 개의 변경을 로컬로 저장 한 사본)를 사용하고 있습니다 기능 저하 때문에 라이브러리에서 충돌 감지 기능을 추가하기 위해 변경/추가해야 할 부분이 있다고 가정합니다.

누구든지 아이디어가 있습니까? 그게 내가하고 싶은 것처럼이 12시 35분

안녕 @

편집 2013년 1월 1일, 당신의 답변 - 감사는 확실히 보인다. 캔버스에 이미 표시된 모든 이미지가 4 개의 '고정'이미지로 캔버스 주위로 드래그 할 수 없습니다.이 이미지는 드롭 존으로 사용할 수 있습니다. 드래그 앤 드롭이 가능합니다. 나머지는 버리십시오. 이미 가지고있는 코드에 코드가 제공하는 기능을 어떻게 추가 할 것인지 잘 모르겠습니다. URL : users.aber.ac.uk/eef8/project/development/featureset2dev로 이동하면 이미 수행 한 작업을 볼 수 있습니다.

당신이 당신의 예에서했던 것처럼 내가 그들을 라인

var i = new Image(200, 200, 50, 50, 'cat.jpg', 300, 300, 60, 60); 

으로 캔버스에 추가해야합니다, 내 설명 상자에 'DROPZONE'기능을 추가하려면?

Answer 1

이렇게하는 가장 좋은 방법은 너비와 높이와 함께 각 개체의 X/Y 위치를 추적하는 것입니다. 이처럼 간단한 사각형 충돌 함수를 사용하면 두 개의 객체를 사용하고 경계 상자가 겹치는 지 확인합니다. 나는 이것에 대해 갈 경우 해당 이미지는 대신에 ALT 태그를 확인하는 하나 개의 드롭 존을 게재 할 수 있도록

function collides(a, b) 
{ 
    if (a.x < b.x + b.width && 
     a.x + a.width > b.x && 
     a.y < b.y + b.height && 
     a.y + a.height > b.y) return true; 
} 

, 내가 사용, 그것은에 부착 된 드롭 존 개체가 개체로를 설정할 수 있습니다 순수한 JS.

function Image(x, y, w, h, i, dx, dy, dw, dh) 
{ 
    this.x = x; 
    this.y = y; 
    this.width = w; 
    this.height = h; 
    this.image = i; 
    this.dropzone = new DropZone(dx, dy, dw, dh); 
} 

function DropZone(x, y, w, h) 
{ 
    this.x = x; 
    this.y = y; 
    this.width = w; 
    this.height = h; 
} 

var i = new Image(200, 200, 50, 50, 'cat.jpg', 300, 300, 60, 60); 

그런 다음 이동했을 때 드래그 한 이미지의 좌표를 업데이트하는 루프가 있습니다. 캔버스 내부에서 그려진 스프라이트에 대해서는 클릭 핸들러를 사용할 수 없습니다. 마우스 좌표가 그려진 스프라이트 안에 있는지 확인합니다.

다른 방법은 HTML5 드래그 앤 드롭 API를 사용하는 것입니다. 사용 방법에 대한 경험이 없지만 사용자의 요구에 더 적합 할 수 있습니다.

http://www.html5rocks.com/en/tutorials/dnd/basics/