HTML5 게임에 중력을 추가하는 방법 - 더미

비디오: WEB2 CSS - 13. 미디어 쿼리 써먹기 2024

중력 계산은 처음부터 HTML5 비디오 게임의 일부였습니다. 실제로 고려해야 할 두 가지 종류의 중력이 있습니다. 플랫폼 스타일의 게임에서 플레이어는 행성에 가깝고 모든 중력은 모든 것을 곧장 끌어 당깁니다.

가속 벡터를 추가하는 방법을 알고있을 때 플랫폼 스타일 중력은 실제로 사용하기 쉽습니다. 중력을 모든 프레임마다 항상 작은 양을 줄이는 일정한 힘으로 생각하십시오.

게임에 타고 로켓을 추가하는 방법

이 예제에는 흥미로운 또 하나의 기능이 있습니다. 위쪽 화살표를 누르면 자동차 이미지가 화염이있는 다른 이미지로 변경됩니다.

hoverCar 예제의 코드는 여기에 전체적으로 표시됩니다:

hoverCar. html var car; var city; var 게임; function Car () {tCar = 새로운 Sprite (게임, "hoverCar. png", 70, 50); tCar. setSpeed (0); tCar. hSpeed = 0 994 tCar. checkKeys = function () {tCar. changeImage ("hoverCar. png"); if (keysDown [K_LEFT]) { 이 있습니다. hSpeed - = 1 } (keysDown [K_RIGHT]) { 이 경우. hSpeed + = 1 999}} (keysDown [K_UP]) {이 경우. addVector (0,.5); 이것. changeImage ("hoverCarThrust. png") ;} 이 문제가 발생했습니다. changeXby (this. hSpeed); } // end checkKeys tCar. checkGravity = function () { if (this. y> 580) { this. setPosition (this. x, 580); } else { this. addVector (180,.1); } // end if } // end checkGravity return tCar;} // end 자동차 def 함수 init () {game = new Scene (); car = new Car (); city = new Sprite (게임, "도시.png", 800, 600); 시티. setSpeed (0); 시티. setPosition (400, 300); 경기. start ();} // init 함수를 끝내십시오. update () {game. 명확한(); 시티. 최신 정보(); 차. checkKeys (); 차. checkGravity (); 차. update ();} // end update 게임에서 힘 벡터를 사용하는 방법







 중력은 실제로 매우 간단합니다. 그것은 단순한 힘 벡터입니다. 이 예제의 다른 흥미로운 부분은 자동차의 이미지 각도를 변경하지 않고 수평 동작을 변경하고 스러 스터를 나타 내기 위해 이미지를 조정하는 것입니다. 다음은 단계입니다.

두 가지 다른 이미지를 만듭니다.

이미지 편집기를 사용하여 서로 다른 두 가지 버전의 이미지를 만듭니다.

평범한 스프라이트를 만듭니다.

이미지를 기본값으로 설정하십시오.
기본 이미지에는 스러 스터가 없습니다. 이 이미지를 기본 이미지로 만들려면 changeImage () 메서드를 사용하십시오. 스러 스터가 켜지면 이미지가 변경됩니다.
변수를 사용하여 수평 속도를 제어하십시오.
hSpeed 변수를 생성하여 자동차의 수평 속도를 관리 할 수 있습니다.
왼쪽 및 오른쪽 화살표를 설정하여 hSpeed를 수정합니다.

왼쪽 및 오른쪽 화살표 키는 hSpeed 변수를 수정합니다.
changeXby를 사용하여 수평 속도를 설정하십시오.

모든 키를 확인한 후 자동차의 x 값을 hSpeed의 현재 값으로 변경합니다.
위쪽 화살표는 위쪽으로 벡터를 추가합니다.

사용자가 위쪽 화살표를 누를 때 작은 힘 벡터를 위쪽으로 추가하려면 지금 악명 높은 addVector () 함수를 사용하십시오. 0 도가 올라간 것을 기억하십시오. 이 값을 가지고 놀아 게임에 필요한 추력을 얻으십시오.
위쪽 화살표를 누르면 스러 스터를 보여줍니다.

사용자가 위 화살표를 누르면 스러 스터를 보여줘야합니다. changeImage () 메서드를 사용하여 스프라이트의 이미지를 로켓 트러스터가있는 이미지로 설정합니다.
checkGravity () 메소드를 빌드하십시오. 이 방법은 중력을 보상하기 위해 모든 프레임이라고 불린다.

지상에 있는지 확인하십시오.
이 예에서지면은 580보다 큰 y 값으로 정의됩니다.

지상에 없으면 중력 벡터를 추가합니다.
누적되기 때문에, 중력 벡터는 꽤 작을 필요가 있습니다. 중력의 힘과 스러 스터의 균형을 잡아 원하는 행동을 취해야합니다. 중력이 너무 강하면 추력 장치가 작동하지 않습니다. 스러 스터가 너무 강하면 자동차는 단순히 우주로 날아갑니다.