HTML5 게임에서 사용자 상호 작용을 만드는 방법 - 인형

HTML5 게임과 애니메이션의 가장 큰 차이점은 사용자 상호 작용입니다. 게임을 만들고 싶다면 사용자가 참여해야합니다. 그리고 그것을하는 방법이 있습니다.

여기에 코드가 있습니다:

자동차. html var 장면; var 자동차; 함수 init () {scene = new Scene (); car = new Sprite (장면, "car. png", 50, 30); 차. setAngle (270); 차. setSpeed (0); 장면. start ();} // 종료 init 함수 update () {scene. 명확한(); // (keysDown [K_LEFT]) { 자동차. changeAngleBy (-5); } // if (keysDown [K_RIGHT]) { 자동차. changeAngleBy (5); } // if (keysDown [K_UP]) { car. changeSpeedBy (1); } // if (keysDown [K_DOWN]) { 자동차. changeSpeedBy (-1); } // 끝낼 경우 자동차. update ();} // end update 자동차를 운전하십시오! . keysDown

는 전역 배열입니다.
이 변수는 장면을 만들 때 자동으로 생성됩니다. 부울 값의 배열입니다. 즉, 각 요소는 참이거나 거짓일 수 있습니다.

각 키마다 상수가 정의되어 있습니다.

표준 키보드의 각 키에는 이미 정의 된 특수 상수가 있습니다. 예를 들어 K_A는 A 키를 나타내고 K_B는 B 키를 나타냅니다. keysDown 은 모든 키의 상태를 알려줍니다.
A 키가 현재 눌러져있는 경우, keysDown [A]는 참 값을 포함합니다. A 키를 누르지 않으면 keysDown [A]에 false 값이 포함됩니다.

키의 현재 상태를 확인할 수 있습니다.

키의 현재 상태를 확인하려면 keysDown [] 배열을 확인하십시오. 한 번에 여러 개의 키를 사용할 수 있습니다. 이 기법의 주된 목적은 한 번에 여러 개의 키를 누를 수있게하는 것입니다. 일반적인 컴퓨팅에서는 한 번에 두 개 이상의 키를 가지는 것이 일반적입니다. 게임에서 한 번에 두 개 이상의 키를 누르는 것이 일반적이므로이 기대를 지원할 수있는 메커니즘이 필요합니다.
게임 스프라이트 이동 방법

기본적으로 스프라이트에는 X 및 Y 속성에 의해 제어되는 위치가 있습니다. 수학 수업에서 기억하면 X는 수평 값을 나타내고 Y는 수직 위치를 나타냅니다. 원점

(0, 0)은 화면의 왼쪽 상단 모서리입니다. X 좌표는 수학 수업에서 기억하는 것처럼 작동합니다. X 값이 커지면 스프라이트가 오른쪽으로 이동합니다. 컴퓨터 그래픽에서 Y는 수학 수업에서와 약간 다른 역할을합니다.대부분의 디스플레이 하드웨어는 위에서 아래로 스캔하므로 Y는 화면 상단에서 0이며 아래쪽으로 이동할 때 Y가 증가합니다.

최대 높이와 너비는 변수: 장면에 저장된다는 점에 유의하십시오. 높이와 장면. 폭.

모든 다양한 이동 방법은 실제로 X 및 Y를 조작하는 것입니다. 이러한 값을 수동으로 설정하거나 (setPosition (), setX () 및 setY ()) 값을 변경할 수 있습니다 (changeXby (), changeYby ()). 이러한 각 메서드는 즉시 작동하므로 스프라이트의 위치 나 동작을 지시하는 데 사용할 수 있습니다. 이러한 기능 중 일부는 서로 비슷합니다. 예를 들어, changeXby ()는 setChangeX ()와 매우 비슷합니다. 이 함수는 미묘하지만 중요한 차이가 있습니다. changeXby () 함수는 X의 값을 한 번 변경합니다. 변경 사항을 계속하려면이 함수를 계속 호출해야합니다. setChangeX () 함수는 한 번 호출 할 수 있기 때문에 더 강력합니다. setChangeX ()를 다시 호출 할 때까지 사용자가 결정한 값으로 x를 반복적으로 변경합니다.

대부분의 스프라이트의 경우, 스프라이트에 각도와 속도를주고, 놓아두기 만하면됩니다. 스프라이트 객체에는이 동작에 필요한 메서드가 있습니다. setAngle ()을 사용하면 스프라이트의 방향을 결정할 수 있으며 setSpeed ()를 사용하면 해당 방향으로 이동할 속도를 지정할 수 있습니다. 대부분의 모션 함수와 마찬가지로 changeAngle () 및 changeSpeed () 메서드도 있습니다.

게임에서 자동차를 제어하는 방법

keysDown 메커니즘을 모션 메소드와 결합하여 자동차를 쉽게 제어 할 수 있습니다. 다음은 update ()의 관련 코드입니다.

function update () {scene. 명확한();

// (keysDown [K_LEFT]) {

자동차. changeAngleBy (-5);

} // if (keysDown [K_RIGHT]) {

자동차. changeAngleBy (5);

} // if (keysDown [K_UP]) { car. changeSpeedBy (1); } // if (keysDown [K_DOWN]) { 자동차. changeSpeedBy (-1); } // 끝낼 경우 자동차. update ();} // end update 실제 코딩은 이해하기 쉽습니다. 장면을 지우십시오. 평소와 같이 update () 함수의 첫 번째 비즈니스 순서는 놀이방을 정리하는 것입니다. 이전 작업을 수행하기 전에 이전 프레임을 지웠는지 확인하십시오. 왼쪽 화살표 키를 확인합니다. keysDown 도구를 사용하여 왼쪽 화살표가 현재 눌려져 있는지 판별하십시오. 왼쪽 화살표를 누른 경우 자동차를 왼쪽으로 돌립니다. 사용자가 현재 왼쪽 화살표 키를 누르면 차를 반 시계 방향으로 5도 돌립니다. changeAngleBy () 메서드를 사용하여 자동차의 시각적 모양과 이동 방향을 변경합니다. 오른쪽 화살표를 반복합니다. 오른쪽 화살표 확인도 비슷하지만 이번에는 시계 방향으로 5도 돌립니다.

가속하기 위해 위쪽 화살표를 사용하십시오.

사용자가 위쪽 화살표를 누르면 자동차의 속도를 변경합니다. 자동차 가속을 위해 양수 값을 사용하십시오. 이 코드는 초당 20 번 검사되기 때문에 많은 시간이 걸리지 않습니다.

아래쪽 화살표로 차를 천천히 내리십시오.

아래쪽 화살표에도 이와 유사한 메커니즘을 사용하십시오.속도를 음의 값으로 변경하여 차를 감속시킵니다. 이 방법은 음의 값을 허용하며, 원할 경우 자동차가 백업합니다.

새로운 위치에 차를 그립니다.

스프라이트의 모션 함수를 호출하면

자동차의 위치가 변경되지 않는다는 것을 기억하는 것이 매우 중요합니다!

게임의 내부 데이터 만 변경합니다. 이러한 변경 사항을 확인하려면 car의 update () 메서드를 호출해야합니다.