<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "a6ce295ff03bb49df7a3e17e6e7100a0",
  "translation_date": "2025-08-29T15:38:55+00:00",
  "source_file": "6-space-game/4-collision-detection/README.md",
  "language_code": "ko"
}
-->
# 우주 게임 만들기 Part 4: 레이저 추가 및 충돌 감지

## 강의 전 퀴즈

[강의 전 퀴즈](https://ff-quizzes.netlify.app/web/quiz/35)

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

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

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

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

함께 영웅이 되어 봅시다!

## 충돌 감지

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

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

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

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

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

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

## 객체를 제거하는 방법

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

```javascript
// collision happened
enemy.dead = true
```

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

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

## 레이저 발사 방법

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

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

## 레이저의 쿨다운

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

---

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