CH4. 과제 스테이지 변경 -본캠프 12/17

웹소켓을 활용하여 만드는 사이드뷰 점프 액션 게임 과제의

12/17일 진행내용을 담은 TIL이다.

 

게임 스테이지 시스템 구현하기

 

1. 초기 문제 상황

 

• 아이템 획득 시 점수가 증가하지 않는 문제 발견
• 스테이지 시스템이 하드코딩되어 있어 유연하지 않음
• JSON 파일로 관리되는 게임 데이터를 활용하지 못하고 있었음

 

2. 단계별 해결 과정

 

 2.1 아이템 휙득 점수 수정

### 2.1 아이템 획득 점수 수정
```javascript
// 이전 코드 (버그)
getItem(itemId) {
  this.score + 20;  // 연산만 하고 할당하지 않음
}

// 수정된 코드
getItem(itemId) {
  this.score += 20;  // 실제로 점수 증가
}
```

 

 2.2 스테이지 시스템 구현

 

   2.2.1 서버의 에셋 활용 

     

•  asset/stage.json: 스테이지별 요구 점수 정보
• asset/item.json: 아이템별 점수 정보
• asset/item_unlock.json: 스 테이지별 아이템 잠금해제 정보

     2.2.2 서버의 에셋 활용 

   // 스테이지 변경 이벤트 발송
   sendEvent(11, { 
     currentStage: currentStage,
     targetStage: this.currentStage
   });

 

 

 

   2.2.3스테이지 변경 로직 구현

 

 

• 점수에 따른 자동 스테이지 업그레이드
•  
• 서버의 스테이지 데이터 검증

 

• 클라이언트에 스테이지 변경 알림

 2.3 UI 변경

draw() {
  // 스테이지 표시
  this.ctx.fillText(`STAGE ${this.currentStage - 999}`, stageX, y);
  
  // 점수 표시
  this.ctx.fillText(scorePadded, scoreX, y);
  this.ctx.fillText(`HI ${highScorePadded}`, highScoreX, y);
}

 

왼쪽 상단에 현재 진행 중인 스테이지 표시

 

3. 주요 기술 포인트

 

 3.1 JSON 기반 데이터 관리

 

• 게임 데이터를 외부 파일로 분리하여 유지보수성 향상
• 서버와 클라이언트가 동일한 데이터 참조

 3.2 이벤트 기반 아키텍쳐

 

• Socket.IO를 활용한 실시간 통신
• 커스텀 이벤트를 통한 컴포넌트 간 통신

 

 3.3 서버 사이드 검증

• 스테이지 진행 순서 검증
• 부정 행위 방지

4. 이번 추가 기능을 통한 학습 포인트

 

 4.1 상태 관리의 중요성

• 점수, 스테이지 등의 게임 상태를 올바르게 관리하는 방법
• 서버와 클라이언트 간 상태 동기화

 4.2 모듈화와 유지보수성

• JSON 파일을 통한 데이터 분리
• 관심사 분리를 통한 코드 구조화

 4.3 실시간 통신

• Socket.io를 활용한 양방향 통신
• 이벤트 기반 프로그래밍

 4.4 디버깅과 에러 처리

• 콘솔 로그를 통한 상태 모니터링
• 적잘한 에러핸들링