현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

이번 단계는  Gamedev Canvas tutorial 의 8번째 단계입니다.  Gamedev-Canvas-workshop/lesson8.html 에서 이번 단계의 소스 코드를 확인할 수 있습니다.

벽돌 깨기 기능은 잘 작동한다. 하지만 더 나은 게임이 되기 위해서, 유저가 벽돌을 깰 때마다 점수를 얻고, 그 점수를 기록하는 Score 기능을 만든다.

점수 세기

게임 안에 점수 기능이 있다면, 친구들이 더 좋아할 것이다. 그러기 위해서는 점수를 기록할 변수가 필요하다. 작성중인 JS파일의 변수 영역의 하단에, 아래 코드를 추가하자.

var score = 0;

점수 화면을 만들고, 업데이트를 하기 위해서 drawScore() 함수가 필요하다. 아래 코드를 collisionDetection() 함수 아래에 추가하자.

function drawScore() {
    ctx.font = "16px Arial";
    ctx.fillStyle = "#0095DD";
    ctx.fillText("Score: "+score, 8, 20);
}

텍스트를 캔버스 안에 그리는 것은 도형을 그리는 작업과 비슷하다. 폰트를 정의하는 것은 CSS에서의 작업과 같다. — font() 함수에서 크기와 타입을 설정할 수 있다. 그런 다음 fillStyle() 함수를 사용하여 글꼴의 색상을 설정하고 fillText() 함수를 이용해서 캔버스에 배치 될 실제 텍스트와 배치 위치를 설정하는 데 사용한다. 첫 번째 매개 변수는 텍스트 자체다. 위의 코드는 현재 점의 수를 나타내며 마지막 두 매개 변수는 텍스트가 캔버스에 배치 될 좌표이다.

벽돌이 깨질 때마다 점수 변수의 값을 증가 시키기 위해서 collisionDetection() 함수에 강조 표시된 코드를 입력하여 수정한다.

function collisionDetection() {
    for(var c=0; c<brickColumnCount; c++) {
        for(var r=0; r<brickRowCount; r++) {
            var b = bricks[c][r];
            if(b.status == 1) {
                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
                    dy = -dy;
                    b.status = 0;
                    score++;
                }
            }
        }
    }
}

draw() 함수 안에서 위 함수를 호출하면 호출 될 때마다 다시 그리기 때문에 점수 변동을 확인할 수 있다. draw() 아래 코드를  drawPaddle() 아래에서 호출한다.

drawScore();

모든 벽돌이 파괴되었을 때 승리 메시지 표시

점수가 오르는 것은 좋지만, 평생 점수가 올라가진 않을 것이다. 모든 벽돌의 파괴가 결국 게임의 주된 목적이기 때문에 모든 점수를 얻는다면  승리 메시지를 표시해야한다.  collisionDetection()함수에 강조된 코드를 붙여넣는다.

function collisionDetection() {
    for(var c=0; c<brickColumnCount; c++) {
        for(var r=0; r<brickRowCount; r++) {
            var b = bricks[c][r];
            if(b.status == 1) {
                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
                    dy = -dy;
                    b.status = 0;
                    score++;
                    if(score == brickRowCount*brickColumnCount) {
                        alert("YOU WIN, CONGRATULATIONS!");
                        document.location.reload();
                    }
                }
            }
        }
    }
}

결국 사용자는 모든 벽돌을 파괴 한 순간, 실제로 게임에서 승리 할 수 ​​있다. 이는 게임과 관련하여 굉장히 중요하다. document.location.reload()기능은 페이지를 다시로드하고 경고를 클릭하면 게임을 다시 시작한다.

코드 비교

최종 코드는 아래와 같다. 지금까지 작성한 코드와 비교해보자.

 

추가학습: 벽돌을 깰 때마다 얻는 점수를 늘리고,  게임 클리어 시 최종 점수를 경고창에 표시해보자.

다음 단계

게임은 현재 꽤 멋지게 보인다. 다음 단계에서는,  Mouse controls 을 통해서 게임을 즐길 수 있다.

문서 태그 및 공헌자

이 페이지의 공헌자: awer000
최종 변경: awer000,