HTML5 게임에서 애니메이션 루프를 만드는 방법 - 캔버스가 공간을 정의하면

캔버스가 HTML5 게임에서 공간을 정의하면 애니메이션 루프가 시간을 정의합니다. 대부분의 자바 스크립트 게임에서는 setInterval ()이라는 메커니즘을 사용하여 반복되는 동작을 발생시킵니다. 이 함수는 두 개의 매개 변수, 즉 함수 이름과 지연 값을 사용합니다.

여기에 초당 10 번 계산되는 간단한 코드가 있습니다:

. html var counter = 0; var 출력; 함수 init () {출력 = 문서. getElementById ("output"); setInterval (count, 100);} 함수 카운트 () {카운터 ++; 산출. innerHTML = counter;} 아직 아무 것도 없습니다.

과정은 간단하며 규칙적인 간격으로 어떤 일이 일어나길 원하면 언제든지 사용할 수 있습니다:

1. 반복 할 함수를 만듭니다.

   이 간단한 예제에서 count () 함수는 초당 10 회 호출됩니다.

2. 초기화 코드에서 setInterval ()을 호출하십시오.

   이것은 함수에 대한 반복 호출을 설정합니다.

3. 반복 할 기능을 나타냅니다.

   첫 번째 매개 변수는 반복 될 함수의 이름입니다. 함수를 변수로 취급하기 때문에 함수 이름에 괄호를 포함시키지 마십시오 ( ).

4. 지연을 나타냅니다.

   두 번째 매개 변수는 밀리 초 단위의 지연 값입니다 (밀리 초는 1/1000 초). 이 예제는 100 밀리 초의 지연 시간 (초당 10 프레임)으로 실행됩니다. simpleGame 라이브러리는 초당 20 프레임으로 실행됩니다.

SimpleGame에서 Scene 클래스를 만들 때 캔버스를 설정하는 것 외에도 Scene 클래스를 통해 게임의 update () 메서드를 반복적으로 호출하는 간격을 만들 수 있습니다. 이것이 update () 메소드가 필요한 이유입니다.