플레이어에게 생명을 부여하기 [ lesson10 단계의 설명 ]
생명을 구현하는 방법은 아주 간단하다. 먼저 변수를 선언했던 곳과 같은 장소에서 변수를 추가하여 생명 수를 저장하게 한다.
var lives = 3; //남은 생명 수
남은 생명 수를 표시하는 방법은 점수 카운터가 그려지는 것과 같은 형태. drawScore()함수 아래에 다음 기능을 추가.
function drawLives() {
ctx.font = "16px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("Lives: "+lives, canvas.width-65, 20);
}
지금까지 바닥에 닿으면 바로 게임을 끝내는 형식이었고 이제는 더 이상 게임을 이용할 수 없게 될 때까지 남은 생명 수를 줄여야합니다. 또한 플레이어가 게임 오버되면 다시 생명과 블럭들을 리셋하여 공과 패들 위치를 재설정해야 합니다. 그렇게 하기 위해 draw() 함수 내에서 다음 세 줄을 다음 블럭의 코드로 대체.
alert("GAME OVER");
document.location.reload();
clearInterval(interval); // Needed for Chrome to end game
이를 통해 아래와 같이 약간 복잡한 논리를 추가:
lives--;
if(!lives) {
alert("GAME OVER");
document.location.reload();
clearInterval(interval); // Needed for Chrome to end game
}
else {
x = canvas.width/2;
y = canvas.height-30;
dx = 2;
dy = -2;
paddleX = (canvas.width-paddleWidth)/2;
}이제 공이 화면의 맨 아래 가장자리에 맞으면 생명(lives)을 하나 빼며, 생명이 없다면 게임이 끝나고 아직 남아있다면 공의 위치와 패들의 위치가 재설정 됩니다.
남은 생명 표시 렌더링하기
이제 draw()함수 내에서 drawLives()에 생명 수를 추가하고 drawLives() 아래에 생명 수를 추가.
drawLives();
requestAnimationFrame()을 사용하여 랜더링 개선하기
이제 게임 메커니즘과 연결이 되지 않지만, 그것이 렌더링되는 방식에 대해 알아야함.
requestAnimationFrame은 우리가 현재 setInterval() (en-US)을 사용하여 구현한 고정된 프레임레이트(fixed framerate)보다 더 낫게 게임을 렌더링합니다.
var interval = setInterval(draw, 10);
위에 코드를 이렇게 변경합니다.
draw();
다음 각 인스턴스를 제거합니다:
clearInterval(interval);
그 다음, draw()함수의 맨 아래 (닫는 '}'바로 전에) 다음 줄을 추가하여 draw()함수가 반복적으로 자신을 호출하게 함: (재귀)
requestAnimationFrame(draw);이 draw() 함수는 현재 requestAnimationFrame() 루프 내에서 반복적으로 실행되고 있지만, 고정된 10ms 프레임 대신 프레임의 제어권을 브라우저에 다시 부여 하기때문에 프레임과 적절하게 일치하고 필요할 때만 모양을 만드는 것.
이것은 이전의 setInterval() 방법보다 더 효율적이고 부드럽게 애니메이션 루프를 만들수 있다.
