HTML5 게임에 충돌을 추가하는 방법 - 인형

HTML5 비디오 게임에서 가장 흥미로운 점은 스프라이트가 서로 충돌하여 충돌 할 때 발생합니다. 게임 엔진에는 일반적으로 두 개의 스프라이트가 겹쳐져 있는지 여부를 테스트하기위한 일종의 도구가 있습니다. 이를 충돌 감지 라고하며 여러 가지 방법으로 수행 할 수 있습니다. 이 예제는 표준 경계 사각형 체계를 사용합니다. 완벽하지는 않지만 구현하기가 쉽고 일반적으로 사용됩니다.

게임에서 경계 사각형 충돌을 설정하는 방법

colTest를 살펴보십시오. html을 보시면 간단한 예제를보실 수 있습니다.

colTest에서. 예를 들어 사용자가 마우스로 동물을 움직이면 화면 가운데에서 동물이 상자를 만질 때 메시지가 나타납니다.

colTest. html checkCollisions (); 상자. 최신 정보(); 동물. update ();} // end update; function checkCollisions () { if (상자. colligateWith ()) { 출력. innerHTML = "충돌"; } else { 결과. innerHTML = "충돌 없음"; } // end if } // end checkCollisions empty

이 코드에서 흥미로운 것들이 많이 발생합니다:

일반 마우스 커서를 숨 깁니다.

마우스를 따라 다른 객체가있을 때 일반적으로 일반 화살표 커서를 숨기려고합니다. simplegame에서 게임을 사용하십시오. hideCursor () 메서드를 사용하여 게임 화면 내에서 마우스 커서를 숨 깁니다.
둘 이상의 스프라이트를 작성하십시오.

탱고 또는 충돌하는 데 두 번 걸립니다. 이 예제에서는 상자가 고정 된 상태로 유지되고 마우스 뒤의 고정 클릭자가 이동합니다.
생물에게 followMouse () 메소드를 제공하십시오.

이 예에서는 마우스를 따라 크리 테이터가 있습니다. followMouse () 메소드를 작성하여 시작하십시오.
마우스의 위치를 결정합니다.

마우스 위치는 문서와 함께 (simplegame.js에서) 결정됩니다. mouseX 및 문서. mouseY 속성.
마우스 위치를 크리에이터 위치에 복사합니다.

마우스의 x 위치를 사용하여 동물의 x 위치를 설정하고 y를 반복합니다.
매 프레임마다 동물의 followMouse () 메서드를 호출합니다.

보통 update () 함수는 반복적으로 발생해야하는 코드를 저장하는 곳입니다.

colTest로 놀면. html 페이지에서 충돌이 정확한지 알 수 있습니다. 동물이 상자에 실제로 손을 대지 않아도 충돌 레지스터를 가질 수 있습니다. 이것은 simpleGame이 경계 상자 충돌 이라는 체계를 사용하기 때문에 중요합니다.

이는 이미지 충돌 여부를 확인하는 것이 아니라 이미지 주변의 사각형이 충돌하는지 여부를 확인하는 것입니다. 이 예에서 차이는 작지만이 메커니즘을 사용하면 가끔씩 길고 가느 다란 요소로 심각한 오류가 발생할 수 있습니다. 스프라이트가 회전함에 따라 경계 사각형의 크기가 변경 될 수 있습니다.

게임에 대한 거리 기반 충돌

경계 원 충돌이라고하는 다른 형태의 충돌 감지를 사용할 수 있습니다. 이 메커니즘을 사용하면 두 스프라이트의 중심 사이의 거리를 간단하게 계산할 수 있습니다.이 값이 임계 값보다 작 으면 충돌로 간주됩니다. 이 접근법에는 두 가지 이점이 있습니다.

충돌 거리가 일정합니다. 이미지가 회전해도 이미지의 크기가 변하더라도 이미지 중심 간의 거리가 변하지 않습니다. 충돌 임계 값은 다양 할 수있다.
원하는 민감도를 설정할 수 있습니다. 쉽게 충돌 할 수 있도록 큰 충돌 반경을 설정하고 충돌이 충돌 할 때만 작은 충돌 반경을 설정하십시오. simpleGame 라이브러리 Sprite 객체에는 한 스프라이트에서 다른 스프라이트까지의 거리를 계산하는 distanceTo () 메서드가 있습니다. 멀리서이 코드의 예를 볼 수 있습니다. html 예:

거리. html var 게임; var 박스; var 동물; var 출력; 함수 init () {game = new Scene (); 경기. hideCursor (); 상자 = 새로운 스프라이트 (게임, "simpleBox. png", 50, 50); 동물 = 새로운 Sprite (게임, "동물.gif", 50, 50); 출력 = 문서. getElementById ("output"); // 박스 고정 위치 상자를 제공합니다. setPosition (200, 150); 상자. setSpeed (0); 동물. setPosition (100, 100); 동물. setSpeed (0); // 마우스 크롤러가 제어하는 동물. followMouse = function () {이. setX (document. mouseX); 이. setY (document.keyY);} // followMouse 게임을 종료합니다. start ();} // init 함수를 끝내십시오. update () {game. 명확한(); 동물. followMouse ();

checkDistance (); 상자. 최신 정보(); 동물. update ();} // end update; function checkDistance () { dist = 상자. distanceTo (동물); if (dist <50) { 출력. innerHTML = "충돌:"+ dist; } else { 결과. innerHTML = "충돌 없음:"+ dist; } // end if } // end checkDistance empty 거리 기반 충돌 방법은 경계 사각형 버전과 매우 유사합니다. 이전 checkCollisions ()와 똑같이 작동 할 checkDistance () 함수를 만듭니다. checkDistance에서 일어나는 일에 대한 단계는 다음과 같습니다. 두 스프라이트 간의 거리를 찾습니다.

스프라이트의 distanceTo () 메서드를 사용하여 두 스프라이트 간의 거리를 결정합니다.거리가 어떤 임계 값보다 작 으면 충돌로 간주합니다.

일반적으로 더 작은 스프라이트의 너비를 충돌 임계 값의 시작점으로 사용해야하지만 충돌을 더 많이 또는 덜 발생할 수 있도록 조정할 수 있습니다.

충돌 상태를보고합니다.
이 예에서는 간단히 "collision"또는 "no collision"을 인쇄하지만 실제 게임에서는 충돌이 다른 작업에 대한 트리거입니다: 점수 증가, 수명 단축, 충돌 요소의 속도 또는 위치 변경, 또는 무엇이든. (희망적으로, 폭발을 포함한다.)