HTML5 게임에 타이밍을 추가하는 방법 - 더미

시간의 흐름은 종종 HTML5 게임의 요소가됩니다. 레이싱 게임은 모두 속도에 관한 것이거나 일부 작업을 수행하는 데 시간 제한이있을 수 있습니다. simpleGame 라이브러리에는 시간을 쉽게 관리 할 수있는 매우 편리한 타이머 객체가 포함되어 있습니다. Timer 객체는 다른 JavaScript 객체와 마찬가지로 작성됩니다. 세 가지 방법이 있습니다.

• reset ():이 함수는 타이머를 초기화하고 경과 시간 카운터를 시작합니다.

• getCurrentTime ():이 함수는 호출 된 현재 시스템 시간을 반환합니다. (시간은 특별한 정수 형식으로, 사람이 알아볼 수는 없습니다.)

• getElapsedTime (): 타이머가 생성 된 이후 또는 마지막으로 리셋 된 시간 (최근 값).

JavaScript 및 대부분의 다른 언어에서, 날짜 및 시간 정보는 일반적으로 특별한 정수 포맷으로 저장됩니다. 시간은 실제로 1970 년 1 월 1 일 자정 이후의 밀리 초 수를 나타내는 거대한 정수로 계산됩니다.

타이밍 예제는 timerDemo를 참조하십시오. html:

timerDemo

var timer; var 출력; var 게임; 함수 init () {game = new Scene (); 출력 = 문서. getElementById ("output"); timer = new Timer (); 타이머. 다시 놓기(); 게임. start ();} init 함수를 끝내십시오 update () { 게임. 숨는 장소(); currentTime = 타이머. getElapsedTime (); 결과. innerHTML = currentTime; } // end update function reset () { 타이머. 다시 놓기(); } // end reset 빈 재설정 타이머 이 예제는 간단한 타이머를 보여줍니다. 페이지가 실행 된 시간 (초)을 표시합니다. 타이머는 (똑똑한 이름의) Reset Timer 버튼을 사용하여 재설정 할 수 있습니다.

이 프로그램은 비교적 간단하지만 아주 강력한 아이디어를 보여줍니다. 이 프로세스를 사용하여 시간 감지 게임을 만듭니다.

타이머에 대한 변수를 만듭니다.

1. 익숙해 져야합니다. 흥미로운 요소는 모두 객체이며 타이머도 예외는 아닙니다. timer라는 유형의 객체가 될 timer라는 변수를 만듭니다.

   타이머를 재설정하십시오.

2. 타이머가 0에서 시작하는지 확인하십시오.

   모든 프레임에서 경과 시간을 가져옵니다.

3. update () 함수에서 타이머의 getElapsedTime () 메서드를 호출하여 경과 한 시간을 확인하고이 값을 출력 영역에 복사합니다.

   사용자가 버튼을 누를 때 타이머를 재설정합니다.

4. 사용자가 리셋 버튼을 누르면 타이머의 reset () 메소드를 호출하여 경과 시간을 다시 0으로 재설정합니다.

   메인 장면을 숨 깁니다.

5. 이 프로그램은 simpleGame의 메인 루프를 사용하지만 실제 장면을 표시 할 필요는 없습니다. 이러한 이유로 Scene 객체에는 hide () 메서드가 있습니다. 나중에 show () 메서드를 사용하여 장면을 표시 할 수도 있습니다.