4.4 KiB

Raw Permalink Blame History

우주 게임 만들기 Part 4: 레이저 추가 및 충돌 감지

강의 전 퀴즈

이번 강의에서는 JavaScript를 사용해 레이저를 발사하는 방법을 배웁니다! 게임에 두 가지를 추가할 것입니다:

레이저: 이 레이저는 영웅의 우주선에서 발사되어 위로 이동합니다.
충돌 감지: 발사 기능을 구현하면서 다음과 같은 게임 규칙도 추가합니다:
- 레이저가 적을 맞춤: 적이 레이저에 맞으면 제거됩니다.
- 레이저가 화면 상단에 도달: 레이저가 화면 상단에 도달하면 제거됩니다.
- 적과 영웅 충돌: 적과 영웅이 충돌하면 둘 다 제거됩니다.
- 적이 화면 하단에 도달: 적이 화면 하단에 도달하면 적과 영웅이 제거됩니다.

간단히 말해, 당신 -- 영웅 -- 은 적들이 화면 하단에 도달하기 전에 레이저로 모두 제거해야 합니다.

✅ 최초의 컴퓨터 게임에 대해 조금 조사해 보세요. 그 게임의 기능은 무엇이었나요?

함께 영웅이 되어 봅시다!

충돌 감지

충돌 감지는 어떻게 할까요? 게임 객체를 움직이는 사각형으로 생각해야 합니다. 왜냐하면 게임 객체를 그리는 데 사용되는 이미지는 사각형이기 때문입니다: x, y, width, height를 가지고 있습니다.

만약 두 사각형, 즉 영웅과 적이 겹친다면, 충돌이 발생한 것입니다. 그 이후에 어떤 일이 일어날지는 게임 규칙에 따라 달라집니다. 충돌 감지를 구현하려면 다음이 필요합니다:

게임 객체의 사각형 표현을 얻는 방법, 예를 들어 다음과 같은 코드:

rectFromGameObject() {
  return {
    top: this.y,
    left: this.x,
    bottom: this.y + this.height,
    right: this.x + this.width
  }
}

비교 함수, 이 함수는 다음과 같은 형태일 수 있습니다:

function intersectRect(r1, r2) {
  return !(r2.left > r1.right ||
    r2.right < r1.left ||
    r2.top > r1.bottom ||
    r2.bottom < r1.top);
}

객체를 제거하는 방법

게임에서 객체를 제거하려면, 특정 간격으로 트리거되는 게임 루프에서 더 이상 해당 객체를 그리지 않도록 해야 합니다. 이를 위해 어떤 일이 발생했을 때 게임 객체를 죽음 상태로 표시할 수 있습니다:

// collision happened
enemy.dead = true

그런 다음 화면을 다시 그리기 전에 죽은 객체를 정리할 수 있습니다:

gameObjects = gameObject.filter(go => !go.dead);

레이저 발사 방법

레이저 발사는 키 이벤트에 반응하고 특정 방향으로 움직이는 객체를 생성하는 것을 의미합니다. 이를 위해 다음 단계를 수행해야 합니다:

레이저 객체 생성: 영웅의 우주선 상단에서 생성되어 화면 상단을 향해 이동합니다.
키 이벤트에 코드 연결: 레이저 발사를 나타내는 키를 키보드에서 선택해야 합니다.
레이저처럼 보이는 게임 객체 생성: 키가 눌렸을 때 레이저처럼 보이는 객체를 생성합니다.

레이저의 쿨다운

예를 들어 스페이스 키를 누를 때마다 레이저가 발사되어야 합니다. 하지만 너무 짧은 시간에 너무 많은 레이저가 생성되지 않도록 이를 방지해야 합니다. 이를 해결하려면 쿨다운이라는 타이머

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

4.4 KiB Raw Permalink Blame History