자바스크립트 내공기르기(7) - 스코어 입력 -

자바스크립트 내공기르기(7) 

-스코어 입력-

 

벽돌게임이 거의 막바지로 향하고 있다. 이번 포스팅에서는 게이머에게 필수적인 '스코어 표시'를 구현해보자. MVC패턴에서 스코어 표시는 View에 해당한다. 이후 MVC패턴으로 게임을 제작할 때, View부분은 다시 리펙토링하고, 이번에는 절차지향식으로 알아두자.

1 『 스코어 변수 추가 』

변수추가하는 윗부분에 초기값 0으로 설정한 score 변수를 추가한다. 

  

2 『 스코어 함수 추가 』

스코어 표시는 캔버스 텍스트 기능을 활용한다. 텍스트를 캔버스에 삽입하는 기능으로, ctx.font 명령어는 글씨체와 크기를 지정한다. 글씨크기를 앞에 입력하고, 띄워쓰기 이후에 글씨체를 입력하는 부분에 주의하자.

 

> fillStyle은 색깔을 지정한다.

> fillText는 함수형태를 취하는데, 괄호 첫번째 인자에는 캔버스 화면에 표시할 텍스트를 ''안에 입력한다. 여기서는 score변수를 자바스크립트 문법으로 + 시켜줬다. 두번째 인자는 텍스트의 x좌표값, 세번째 인자는 y좌표값이다. 

 

3 『 스코어 종료 』 

스코어가 벽돌의 개수와 같아지면, 게임이 종료되고 다음 스테이지로 넘어가야한다. 현재 다음 스테이지는 없으므로, 게임이 reload되는 코드를 작성한다.

 

brickRowCount(벽돌 가로열) X brickColumnCount(벽돌 세로열) 이 스코어와 같아지면, 벽돌이 모두 부숴진 상태이므로 게임을 리로드한다.  

 

4 『 drawScore함수 추가 』

draw( ) 함수에 drawScore( ) 함수 구문을 추가하고, 코드를 실행해보자. 아래처럼 좌측상단의 스코어가 잘 동작한다.