자바스크립트 내공기르기 -마지막-

javascript내공기르기 

-벽돌깨기 최종정리-

 

벽돌깨기 게임 마지막 포스팅에는 DB에 저장되는 코드를 정리해보자. 

---

목표]

1) lives 함수 구현

2) draw함수 내에서 setTimeout( ) 구현

3) setInterval삭제하고, requestAnimationFrame( ) 사용

---

1 『 lives 변수 생성 』

> '게임오버'가 되기 전까지 게임을 계속 진행할 수 있는 생존횟수를 표시해줘야 한다.

> lives 변수를 만들고, 생존 횟수를 3으로 설정한다. 

 

2 『 화면에 생존횟수 그리기 』

> drawScore( )와 같은 방법으로 캔버스text 코드를 활용한다.

> 위치는 680,20으로 임의설정했지만, x좌표:canvas.width-30 처럼 유동적인 코드를 작성해도 상관없다. 

 

3 『 setTimeout( ) 선언 』

> setTimeout( cb, frame비율 ) 안에는 첫번째 인수로는 콜벡함수가 온다. 정석적인 방법으로는 콜벡함수 안에 requestAnimationFrame( draw ); 식으로 재귀를 권장한다.

 

> draw()함수 내에서 setTimeout( )을 선언하고, 1000/fps ( fps는 변수로 따로 지정한다. )를 두번째 인자값으로 설정한다.

 

> setTimeout( ) 첫번째 인자값에 콜벡함수를 넣고, 기존에 작성했던 코드를 아래사진처럼 넣어준다.

 

> requestAnimationFrame( )함수를 넣고, 함수 인자로 draw를 넣어서 초당 1000/fps 비율로 draw( )함수가 실행되도록 설정한다. 위에서 만들었던 drawLive함수를 넣어서 실행하는 것도 잊지말자.   

 

fps는 변수선언하는 위치에서 아래처럼 임의숫자를 넣는다. 로딩하면서, 값을 계속 변경해본다. 

 

Start     (start 클릭시 게임시작 )