7.7 KiB

Raw Permalink Blame History

우주 게임 만들기 Part 5: 점수와 목숨

강의 전 퀴즈

이번 강의에서는 게임에 점수를 추가하고 목숨을 계산하는 방법을 배웁니다.

화면에 텍스트 그리기

게임 점수를 화면에 표시하려면 텍스트를 화면에 배치하는 방법을 알아야 합니다. 이를 위해 캔버스 객체의 fillText() 메서드를 사용할 수 있습니다. 또한, 사용할 글꼴, 텍스트 색상, 정렬(왼쪽, 오른쪽, 가운데) 등도 제어할 수 있습니다. 아래는 화면에 텍스트를 그리는 코드입니다.

ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "right";
ctx.fillText("show this on the screen", 0, 0);

✅ 캔버스에 텍스트 추가하는 방법에 대해 더 읽어보고, 여러분만의 스타일로 꾸며보세요!

게임 개념으로서의 목숨

게임에서 목숨이라는 개념은 단순히 숫자일 뿐입니다. 우주 게임의 맥락에서는, 우주선이 피해를 입을 때마다 목숨이 하나씩 줄어드는 방식으로 목숨을 설정하는 것이 일반적입니다. 숫자 대신 미니 우주선이나 하트 같은 그래픽으로 이를 표시하면 더 보기 좋습니다.

만들 내용

게임에 다음 요소를 추가해 봅시다:

게임 점수: 적 우주선이 파괴될 때마다 영웅이 점수를 얻습니다. 우주선 하나당 100점을 추천합니다. 게임 점수는 화면 왼쪽 하단에 표시됩니다.
목숨: 플레이어의 우주선은 3개의 목숨을 가집니다. 적 우주선과 충돌할 때마다 목숨이 하나씩 줄어듭니다. 목숨 점수는 화면 오른쪽 하단에 표시되며, 아래 그래픽으로 구성됩니다.

추천 단계

your-work 하위 폴더에 생성된 파일을 찾아보세요. 이 폴더에는 다음과 같은 파일이 포함되어 있을 것입니다:

-| assets
  -| enemyShip.png
  -| player.png
  -| laserRed.png
-| index.html
-| app.js
-| package.json

your_work 폴더에서 프로젝트를 시작하려면 다음 명령어를 입력하세요:

cd your-work
npm start

위 명령어는 http://localhost:5000 주소에서 HTTP 서버를 시작합니다. 브라우저를 열고 해당 주소를 입력하세요. 현재는 영웅과 모든 적들이 렌더링되고, 왼쪽 및 오른쪽 화살표 키를 누르면 영웅이 움직이며 적을 쏠 수 있습니다.

코드 추가

필요한 에셋 복사: solution/assets/ 폴더에서 your-work 폴더로 필요한 에셋을 복사하세요. 여기에는 life.png 에셋이 포함됩니다. window.onload 함수에 lifeImg를 추가하세요:
```
lifeImg = await loadTexture("assets/life.png");
```

lifeImg를 에셋 목록에 추가하세요:

let heroImg,
...
lifeImg,
...
eventEmitter = new EventEmitter();

변수 추가: 총 점수(0)와 남은 목숨(3)을 나타내는 코드를 추가하고, 이 점수를 화면에 표시하세요.

updateGameObjects() 함수 확장: 적과의 충돌을 처리하도록 updateGameObjects() 함수를 확장하세요:

enemies.forEach(enemy => {
    const heroRect = hero.rectFromGameObject();
    if (intersectRect(heroRect, enemy.rectFromGameObject())) {
      eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
    }
  })

목숨과 점수 추가:

변수 초기화: Hero 클래스의 this.cooldown = 0 아래에 목숨과 점수를 설정하세요:
```
this.life = 3;
this.points = 0;
```

변수를 화면에 그리기: 이 값을 화면에 표시하세요:

function drawLife() {
  // TODO, 35, 27
  const START_POS = canvas.width - 180;
  for(let i=0; i < hero.life; i++ ) {
    ctx.drawImage(
      lifeImg, 
      START_POS + (45 * (i+1) ), 
      canvas.height - 37);
  }
}

function drawPoints() {
  ctx.font = "30px Arial";
  ctx.fillStyle = "red";
  ctx.textAlign = "left";
  drawText("Points: " + hero.points, 10, canvas.height-20);
}

function drawText(message, x, y) {
  ctx.fillText(message, x, y);
}

게임 루프에 메서드 추가: updateGameObjects() 아래에 이 함수를 window.onload 함수에 추가하세요:
```
drawPoints();
drawLife();
```

게임 규칙 구현: 다음 게임 규칙을 구현하세요:

영웅과 적의 충돌마다 목숨을 하나 차감합니다.

Hero 클래스를 확장하여 이 차감을 처리하세요:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```

레이저가 적을 맞출 때마다 게임 점수를 100점 증가시킵니다.

Hero 클래스를 확장하여 이 증가를 처리하세요:

  incrementPoints() {
    this.points += 100;
  }

충돌 이벤트 방출기에 이 함수를 추가하세요:

eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
   first.dead = true;
   second.dead = true;
   hero.incrementPoints();
})

eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
   enemy.dead = true;
   hero.decrementLife();
});

✅ JavaScript/Canvas를 사용해 만들어진 다른 게임들을 조사해 보세요. 이 게임들의 공통된 특징은 무엇인가요?

이 작업을 완료하면 화면 오른쪽 하단에 작은 '목숨' 우주선이 표시되고, 왼쪽 하단에 점수가 표시됩니다. 적과 충돌할 때 목숨이 줄어들고, 적을 쏠 때 점수가 증가하는 것을 확인할 수 있습니다. 잘하셨습니다! 이제 게임이 거의 완성되었습니다.

🚀 도전 과제

코드가 거의 완성되었습니다. 다음 단계는 무엇일지 상상해 보세요.

강의 후 퀴즈

복습 및 자기 학습

게임 점수와 목숨을 증가시키고 감소시키는 방법을 조사해 보세요. PlayFab 같은 흥미로운 게임 엔진도 있습니다. 이러한 엔진을 사용하면 게임이 어떻게 향상될 수 있을까요?

과제

점수 게임 만들기

면책 조항:
이 문서는 AI 번역 서비스 Co-op Translator를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역에는 오류나 부정확성이 포함될 수 있습니다. 원본 문서를 해당 언어로 작성된 상태에서 권위 있는 자료로 간주해야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다.

7.7 KiB Raw Permalink Blame History