모바일 액세스를 위해 HTML5 게임에 마우스 응답을 추가하는 방법 - 웹

웹 브라우저는 마우스 위치를보고하는 방식이 일치하지 않기 때문에 HTML에서 일반적인 JavaScript의 마우스 입력은 까다 롭습니다 게임 세계. simpleGame 라이브러리는 getMouseX () 및 getMouseY () 메서드를 Scene 객체에 추가하여이 문제를 처리합니다. 이 메소드는 항상 정확하지는 않지만 대부분의 게임 프로그래밍에 충분히 근접합니다.

보통의 마우스를 읽고 싶을 때면, Scene 객체의 getMouseX () 및 getMouseY () 함수를 사용하여 대략적인 마우스 위치를 결정하면됩니다.

대부분의 경우 마우스 위치를 원할 때는 마우스가있는 객체를 이동하거나 객체를 마우스쪽으로 향하게하기 때문입니다.

종종 마우스 커서를 숨기려고하므로 Scene 객체의 hideCursor () 메서드를 사용하여 커서를 숨길 수 있습니다. (물론, showCursor () 메소드를 사용하여 커서를 검색 할 수 있습니다.)

터치 스크린을 읽으려면 한 단계 더 간단합니다. simpleGame 라이브러리에는 Joy라는 가상 조이스틱 객체가 있습니다. 터치 스크린 읽기 기능을 사용하려면이 클래스의 인스턴스를 만듭니다.

모바일 장치의 터치 인터페이스는 마우스와 정확히 같지 않으므로 다른 인터페이스가 필요합니다. 그러나 Joy 객체를 생성하면 getMouseX () 및 getMouseY () 함수는 일반적인 마우스처럼 터치 입력을 수행합니다.

touchMouse. html은 마우스가 현재 가리키고있는 곳이면 어디서나 일반 마우스 커서를 숨기고 공을 움직입니다. 이 특별한 예는 전통적인 브라우저와 터치 스크린 장치 모두에서 작동합니다.

touchMouse. html var 공; var 게임;

var joy; function init () {game = new Scene (); ball = new Sprite (게임, "redBall.png", 25, 25); 공. setSpeed ​​(0); 게임. hideCursor (); 기쁨 = 새로운 기쁨 (); 게임. start ();} // init 함수를 끝내십시오. update () {game. 명확한(); followMouse (); 공. update ();} // end update 함수 followMouse () { x = game. getMouseX (); y = 게임. getMouseY (); if (game. touchable) { // 터치 스크린에서 조금 더 높은 물체 이동 y - = 100; } // 터치 스크린 테스트 종료 ball. setPosition (x, y); } 스프라이트가 마우스를 따라 가도록하는 것은 호출 할 메소드를 아는 것입니다.

마우스 커서를 숨 깁니다.

1. Scene 객체에는 hideCursor () 메서드가 있습니다.이것은 일반적인 마우스 포인터를 숨기는 가장 쉬운 방법입니다. 일반적으로 마우스로 객체를 따라 가면 해당 객체가 새 마우스 포인터처럼 동작하므로 일반 화살표를 숨길 수 있습니다.

   가상 조이스틱에 대한 변수를 만듭니다.

2. 터치 패드 장치로 작업하는 경우 가상 조이스틱 개체를 포함 할 변수가 필요합니다. (이 게임이 일반 마우스가있는 데스크탑 컴퓨터에서만 사용되는 경우 조이스틱 개체가 필요하지 않습니다.)

   조이스틱을 초기화하십시오.

3. init () 함수에서 Joy 객체의 인스턴스를 만듭니다. 조이스틱을 만듦으로써 엔진이 터치 입력을 기대하고 정상 마우스 명령에 맵핑하도록 지시합니다.

   followMouse () 함수를 추가합니다.

4. 일반적으로 입력을 처리하는 새로운 함수를 만드는 것이 좋습니다. followMouse () 함수는 객체가 마우스를 따르도록 지시합니다. 물론 마우스를 따르는 객체를 만드는 경우 원하는 경우 객체의 메서드로 만들 수 있습니다.

   getMouseX () 및 getMouseY () 메소드를 사용하십시오.

5. Scene 객체에는 getMouseX () 및 getMouseY ()라는 메서드가 있습니다. 이 방법을 사용하여 장면에서 마우스의 X 및 Y 좌표를 가져옵니다. 좌표가 항상 정확하지는 않습니다.

   터치 스크린이 있는지 확인하십시오.

6. Scene 객체는 브라우저에 터치 스크린이 있으면 터치 가능한 속성을가집니다. 일반적으로 손가락으로 물건을 감추고 싶지 않으므로 터치 스크린을 사용하여 입력 할 때 물건을 상쇄하기를 원할 것입니다.

   물체를 손가락보다 위로 움직입니다.

7. 터치 스크린 환경에서는 일반적으로 스프라이트가 계속 보이기를 원하기 때문에 플레이어의 손가락으로 가려지지 않도록 Y 축을 일정량만큼 오프셋합니다. 이 효과를 얻으려면 Y에서 일부 값을 뺍니다.