HTML5 게임에 달 착륙선을 만드는 방법 - 더미

이것은 가장 오래된 게임 유형 중 하나입니다. 기본 아이디어는 대기없이 HTML5 게임의 행성에 상륙을 복제하는 것입니다. 아폴로의 우주 비행사들은 급격하게 움직이는 우주선을 늦추고 안전하게 지상으로 데려 가기 위해 제한된 양의 연료를 가지고있었습니다. 이 게임은 그 테마의 변형입니다.

달 착륙선 게임의 본질은 추력과 중력 사이의 상호 작용입니다. 이 게임은 addVector () 메소드에 크게 의존합니다. 중력은 모든 프레임에 작은 아래쪽 추력을 부여하며 화살표 키의 추력으로 방해 할 수 있습니다.

게임에는 사용자가 추력을 가하는 피드백을 제공하기 위해 4 개의 서로 다른 착륙선 이미지가 있으며 필요에 따라 간단히 setImage () 메소드로 교체 할 수 있습니다.

게임 충돌

이 게임의 가장 흥미로운 부분은 착륙 루틴입니다. 일반 충돌 루틴은 여러 가지 조건이 충족되는 경우에만 착륙이 안전한 착륙으로 간주되므로이 유형의 충돌을 처리하기에 충분하지 않습니다. 여러 조건을 검사하는 가장 청결한 방법은 다음과 같이 if 구조에 중첩 된 방식입니다.

시간. {if (this.dx - 2) {if (this.yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy) 2) {이것. setSpeed (0); 이. 하락 = 거짓; message = "nice landing!";} else {message = "너무 많은 수직 속도";} // end if} {message = "ending} else {message ="너무 빠름} {end} {end} {end} {end} {end} 만약 우리가 떨어지면? 'if} // end checkLanding

한 번에 여러 조건을 검사 할 때 각각에 대해 별도의 if 문을 만드는 것이 가장 좋습니다. 각 if 문을 다음에 배치하십시오. 따라서 코드의 가장 깊게 중첩 된 부분은 성공을 나타냅니다.

떨어지는 지 확인하십시오.

우주선의 낙하 또는 착륙 여부를 나타내는 낙하라는 부울 변수가 작성되었습니다. 떨어지는 것이 사실이라면 중력은 꺼집니다. 현재 떨어지고있는 경우 착륙 상태를 확인하는 것이 좋습니다.
Y 값을 확인하십시오.

플랫폼이 Y 값 550에 배치 되었기 때문에 Y 값이 525보다 클 경우 착륙 한 것처럼 보일 것입니다. 실제로 플랫폼 상단에 닿는 착륙선 하단에만 관심이 있습니다. 이 확인은 낙하 검사에서 발생합니다. 조건이 실패하면 다른 조건을 확인할 필요가 없습니다.
X 값을 확인하십시오.

착륙선의 중심이 플랫폼 중앙의 10 픽셀 이내가되도록해야하므로 중첩 된 if 문 쌍을 사용하여 X 위치를 확인하십시오.
수평 속도를 확인하십시오.

안전한 착륙을 위해 선박은 -0에서 -0 사이의 dx 값을 가져야합니다. 2와 0. 2. (이것은 다소 임의적이지만, 테스트 할 때 옳은 것으로 느껴집니다.) 이것은 한 쌍의 중첩 if 문으로 가장 잘 검사됩니다.
수직 속도를 확인하십시오.

그 밖의 모든 것이 잘 작동하면 공예품이 너무 빨리 떨어지지 않는지 확인하십시오. dy 속성을 사용하여 우주선이 얼마나 빨리 떨어지는 지 확인하십시오.
기타 조항에 대한 의견을 제공하십시오.

이처럼 깊게 중첩 된 구조는 적절한 들여 쓰기 및 주석 처리의 실제 가치를 보여줍니다. 착륙이 실패로 간주 된 이유를 설명하기 위해 여러 가지 조항에 대한 피드백을 제공하십시오.

게임 텍스트 콘솔

코드의 또 다른 흥미로운 부분은 텍스트 데이터를 사용자에게 표시하는 메커니즘입니다. 가장 쉬운 방법은 간단한 HTML div를 이용하는 것입니다. div를 사용하여 원하는 위치에 정확히 CSS를 배치하십시오. 일반적인 웹 개발에서는 절대 위치 지정을 거의 사용하지 않아야합니다. 게임의 레이블을 만드는 맥락에서 의미가 있습니다.

Z- 인덱스 속성을 높은 값으로 설정하여 캔버스 위에 표시되도록하거나 사용자에게 표시되지 않도록 할 수 있습니다. 다음은 레이블을 화면의 출력과 같이 보이게 만드는 CSS입니다.

#stats {position: absolute; font-family: 고정 폭 글꼴; 왼쪽: 50px; 상단: 50 픽셀; z- 색인: 999; color: white;}

게임을 향상시키는 방법

이것은 게임의 출발점 일뿐입니다. 다른 많은 흥미로운 기능을 추가 할 수 있습니다:

연료: 사용자가 추력을 적용 할 때마다 감소하는 연료 변수를 추가하십시오. 수직 추력은 수평 조정보다 더 많은 연료를 사용해야합니다. 연료 수준이 0 이하가되면 추력 입력을 더 이상 무시하십시오. 이 메커니즘은 현실적인 복잡성을 게임에 넣습니다.
파워 업: 사용자가 획득 할 수있는 다른 기능을 추가합니다. : 보너스 연료, 중력 집중력이 적고 플랫폼이 넓습니다.
다중 착륙: 착륙 성공 후 착륙 패드를 이동하거나 사용자가 두 번째 플랫폼으로 물건을 운반하도록 할 수 있습니다.
장애물: 플레이어가 충돌 할 수있는 공간에 쓰레기 나 건물을 둡니다.
주제 변경: 헬리콥터 또는 열기구 게임에도 동일한 기술을 쉽게 사용할 수 있습니다.