득점

이전 정의되었던 변수들 바로 다음에 다음과 같이 새로운 변수 두개를 추가해 주세요.

// …
let scoreText;
let score = 0;

지금 create() 함수 뒤에 다음과 같은 코드를 추가해봅시다.

scoreText = game.add.text(5, 5, "Points: 0", {
  font: "18px Arial",
  fill: "#0095DD",
});

text() 메소드는 4개의 변수를 가질수 있습니다.

• x와 y 좌표값 자리에 글자를 그려냅니다.
• 실제 글자가 나타날 것입니다.
• 폰트도 글자와 함께 나타날 것입니다.

마지막 변수는 CSS와 매우 비슷해 보입니다. 우리의 점수는 파란색에, 18픽셀 크기이며, Arial 폰트를 사용하여 나타날 것입니다.

우리는 공이 블록을 칠때마다 점수를 증가시킵니다 그리고 공이 블록을 칠때마다 동시에 점수판을 갱신하여 화면에 현재 점수를 나타낼 것입니다. 이건 setText()매소드를 써서 해결 할수 있습니다 — ballHitBrick() 함수 아래로 다음과 같은 새로운 코드 두 줄을 추가하세요.

function ballHitBrick(ball, brick) {
  brick.kill();
  score += 10;
  scoreText.setText(`Points: ${score}`);
}

됐습니다, — index.html 을 다시 새로고침 해주고 공이 블록을 칠때마다 점수가 갱신되는지 확인해줍니다.

이번 강좌에서 배운 득점 시스템이 어떻게 작동하는지 이해하고자 한다면, 다음 아래를 이용해 시연해보세요.

우리는 이제 득점 시스템을 게임에 추가했습니다. 그러나 게임에서 이길 수 없다면, 게임하면서 득점하는게 무슨 소용일까요? 그래서 승리 상태를 추가해보려고 합니다. 게임에서 이기게 하고 싶다면 다음으로 넘어갑시다: win the game.

• 이전
• 다음