HTML5 게임에 드리프트 이펙트를 추가하는 방법 - 인형

HTML5 게임에서 재미있는 방법으로 힘 벡터를 사용할 수 있습니다. 많은 레이싱 게임에는 스키드 또는 드리프트 메커니즘이 포함됩니다. 이 동작을 정확히 얻으려면 매우 정교한 수학이 필요하지만 너무 많은 노력을하지 않고도이 동작을 합리적으로 근사 할 수 있습니다.

이 이미지만으로는 충분하지 않습니다. 정말 멋진 프로그램이기 때문에 이것을 실용적인 프로그램으로 봐야합니다. 보트를 화면에서 움직이면 배가 드리프트되고 미끄러집니다. 정말 놀아요.

게임 객체에 드리프트 동작을 추가하는 방법

간단한 드리프트 동작을 얻으려면 사용자가 현재 액셀러레이터를 누르고 있는지 여부에 관계없이 보트의 현재 방향에 작은 힘 벡터를 추가하기 만하면됩니다. 이 기술은 공간 기반 동작 (액셀러레이터가 눌려 질 때만 힘 벡터가 추가되는 곳)과 표준 자동차 동작 (주행 방향이 항상 차량의 코를 따르는 위치) 사이의 절충안입니다. 각 프레임에는 각 동작이 약간 있습니다.

코드는 다음과 같습니다.

드리프트. html var 게임; var 보트; function Boat () {tBoat = 새로운 Sprite (게임, "보트.png", 100, 50); 닥터. checkKeys = function () {콘솔. 로그 (이 속도); if (keysDown [K_LEFT]) {this. changeImgAngleBy (-5);} if (keysDown [K_RIGHT]) {this. changeImgAngleBy (5);} if (keysDown [K_UP]) {this. addVector (this. getImgAngle (), 2);}

이 부분을 참조하십시오. addVector (this.getImgAngle (), (this. speed / 20)); } // end checkKeys tBoat. checkDrag = function () {속도 = this. getSpeed ​​(); 속도 * =. 95; 이. }}} init () {game = new Scene (); 경기. setBG ("# 000066"); 보트 = 새로운 보트 (); 경기. start ();} // init 함수를 끝내십시오. update () {game. 명확한(); 보트. checkKeys (); 보트. checkDrag (); 보트. update ();} 게임의 스프라이트에 드리프트를 추가하는 방법

매우 간단한 절차입니다.

표준 차량 모델을 만듭니다.

1. 배양을 위해 배를 만드는 것을 고려하십시오.

   가속을 위해 힘 벡터를 사용하십시오.

2. 다시 말하지만, 속도를 수동으로 제어하므로 addVector () 메커니즘을 사용하면 큰 힘을 얻을 수 있습니다. 가속도 벡터 (위쪽 화살표 키 누름에서 사용됨)는 문자 그대로의 값일 수 있지만 거대한 크기 일 필요는 없습니다. 실제로 두 번째 힘 벡터를 추가하려고하기 때문에 가속 벡터를 낮추고 싶을 수 있습니다.

   매 프레임마다 작은 힘 벡터를 추가합니다.

3. 1 차 힘 벡터는 가속 할 때만 발생하지만 2 차 작은 벡터가 모든 프레임에 추가됩니다. 이 벡터는 보트가 현재 향하고있는 방향으로갑니다.이 작은 모션 벡터는 운동량을 시뮬레이션합니다. 이 힘 벡터는 리터럴 값이 아닌 속도의 백분율이되어야합니다. 예를 들어, 항상 한 픽셀 앞으로 이동하면 보트가 멈추지 않습니다.