벽돌깨기 게임 - 점수 추가와 승패 판정

점수 계산하기 [ lesson08 단계의 설명 ]

점수를 받기위한 변수 선언 및 초기화

var score = 0;

점수 화면을 만들고, 업데이트를 하기 위해서 drawScore() 함수가 필요

아래 코드를 collisionDetection() 함수 아래에 추가

 

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

텍스트를 캔버스 안에 그리는 것은 도형을 그리는 작업과 비슷하다. 폰트를 정의하는 것은 CSS에서의 작업과 같으며.
— font() (en-US) 함수에서 크기와 타입을 설정할 수 있습니다.

 

그런 다음 fillStyle() (en-US) 함수를 사용하여 글꼴의 색상을 설정하고 fillText() (en-US) 함수를 이용해서 캔버스에 배치될 실제 텍스트와 배치 위치를 설정하는 데 사용합니다.
첫 번째 매개 변수는 텍스트 자체입니다. 위의 코드는 현재 점수를 나타내며 마지막 두 매개 변수는 텍스트가 캔버스에 배치될 좌표입니다.

벽돌이 깨질 때마다 점수 변수의 값을 증가시키기 위해서 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()기능은 페이지를 다시 로드하고 경고 버튼이 클릭되면 게임을 다시 시작합니다.