You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
4.4 KiB
91 lines
4.4 KiB
<!--
|
|
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)를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역에는 오류나 부정확성이 포함될 수 있습니다. 원본 문서를 해당 언어로 작성된 상태에서 권위 있는 자료로 간주해야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다. |