HTML5 게임을위한 가상 조이스틱을 만드는 방법 - 더미

많은 터치 기반 HTML5 게임은 가상 조이스틱 메커니즘을 사용합니다. 사용자는 화면을 터치하여 입력을 시작한 다음 스 와이프하여 입력을 제공합니다. 왼쪽으로 스 와이프하는 것은 조이스틱을 왼쪽으로 움직이는 것과 같습니다. 사용자가 스 와이프를 길게할수록 입력 값이 커집니다. simpleGame 라이브러리에는 터치 식 장치에 가상 조이스틱을 쉽게 구현할 수있는 가상 조이스틱 개체가 있습니다.

가상 조이스틱은 숫자 데이터를 반환하여 작동합니다. 시각적 요소에 매핑하기 전에 숫자 출력을 살펴봄으로써 어떻게 작동하는지 이해하는 것이 가장 쉽습니다.

조이스틱 테스트 var 게임; var 출력; var 조이스틱; function init () {game = new Scene (); 출력 = 문서. getElementById ("output"); if (게임 터치 가능) { joystick = new Joy (); } else { alert ("이 테스트에는 터치 기반 인터페이스가 필요합니다."); } 게임. (게임 터치 가능) { jx = 조이스틱. getMouseX (); jy = 조이스틱. getMouseY (); jdx = 조이스틱. getDiffX (); jdy = 조이스틱. getDiffY (); result = "조이스틱 x:"+ jx + " "; 

result + = "조이스틱 y:"+ jy + " "; 
result + = "조이스틱 dx:"+ jdx + " "; 
결과 + = "조이스틱 dy:"+ jdy + " "; 
결과. 가상 조이스틱은 매우 사용하기 쉽습니다: 

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

조이스틱이라고 부를 수 있습니다. 캐치의 종류.

1. 가능한 경우 조이스틱을 만듭니다.

   게임을 사용하십시오. touchable 속성이 있는지 확인하기 위해 touchable 속성을 사용합니다. 그렇지 않은 경우 사용자에게 메시지를 보냅니다.

2. 마우스 위치를 가져옵니다.

   가상 조이스틱 개체가 화면에서 터치를 감지하면 mouseX 및 mouseY 값을 트리거합니다. 조이스틱의 getMouseX () 및 getMouseY () 메서드를 사용하여 터치의 X 및 Y 위치를 결정합니다. 이러한 방식으로 터치 인터페이스는 전통적인 마우스처럼 작동합니다.

3. 조이스틱에서 diffX 및 diffY를 읽습니다.

   사용자가 화면을 터치하면 라이브러리가 초기 터치 좌표를 추적합니다. 그런 다음 사용자가 스 와이프 한 거리를 측정합니다. X의 차이를 diffX라고하고, Y의 차이를 diffY라고합니다. 가상 조이스틱 객체의 getDiffX () 및 getDiffY () 메서드를 사용하여 사용자가 화면을 터치 한 후 X 및 Y에서 얼마나 많은 픽셀을 이동했는지 확인합니다.

4. 현재 값을 표시합니다.

   이 첫 번째 단계에서는 조이스틱에 표시되는 내용을 이해하는 것이 중요하므로 값을 가져 와서 화면 출력으로 인쇄하십시오.

5. 물론, 가상 조이스틱의 요점은 화면에서 물건을 움직이는 것입니다.

   코드는 다음과 같습니다.

joystick Test var game; var 공; var 조이스틱; 함수 init () {game = new Scene (); ball = 새로운 Sprite (게임, "redBall.png", 50, 50); else {alert ("이 게임은 터치 스크린이 필요합니다");} // 공이 끝나면 끝납니다. setSpeed ​​(0); 공. setPosition (400, 300); 경기. start ();} // init 함수를 끝내십시오. update () {game. 명확한(); if (game. touchable) {ball. setDX (조이스틱. getDiffX ()); 공. setDY (조이스틱. getDiffY ());} 터치 할 수있는 공 끝내기. update ();} // end update

이 예제는 이전 버전보다 훨씬 간단합니다.

간단한 볼 스프라이트를 만듭니다.

이 예에서는 간단한 볼이 사용됩니다. 다른 기본 스프라이트처럼 만듭니다.

1. 조이스틱 개체를 만듭니다.

   가상 조이스틱 개체를 만듭니다.

2. 조이스틱의 diffX 및 diffY를 공의 dx 및 dy 값에 매핑합니다.

   이것은 매우 민감한 모션을 제공하기 때문에 diffX와 diffY를 몇 가지 배율 인수로 나눠서 감도를 조정할 수 있습니다.