handler를 활용한 타워 디펜스 개발

핸들러 이벤트 (Handler Event)

핸들러 이벤트 시스템은 특정 이벤트가 발생할 때 미리 정의된 함수(핸들러)를 호출하여 해당 이벤트를 처리하는 방식이다. 이 시스템에서는 이벤트와 핸들러 함수 간의 매핑을 관리한다.

 

코드 설명

1. 핸들러 매핑:

const handlerMappings = {
  21: monsterKillHandler,
  2: towerClearHandler,
  3: towerAddOnHandler,
  4: upgradeTower,
  5: towerRemoveHandler,
  6: goldChangeHandler,
  7: InitGoldHandler,
  11: gameStart,
  12: gameEnd,
};

 

여기서 handlerMappings 객체는 이벤트 코드와 해당 핸들러 함수를 매핑한다. 예를 들어, 이벤트 코드 2가 발생하면 towerClearHandler 함수가 호출된다.

 

 

• 2. 타워 핸들러:
  • towerAddOnHandler: 클라이언트에서 타워를 추가하려는 요청을 처리한다. 클라이언트의 타워 정보와 서버의 타워 정보를 비교하여 차이가 없으면 새로운 타워를 추가한다.
  • towerClearHandler: 서버에 저장된 모든 타워를 삭제한다.
  • towerRemoveHandler: 특정 좌표의 타워를 삭제한다.
  • upgradeTower: 타워를 업그레이드하는 기능을 담당할 예정인 함수다.
• 3. 타워 모델:
  • addTower: 새로운 타워를 추가한다.
  • getTowers: 특정 유저의 모든 타워를 반환한다.
  • removeTower: 특정 좌표의 타워를 삭제한다.
  • clearTower: 모든 타워를 삭제한다.
• 4. 비교 함수:

function compareTowers(currentTowers, gameTowers) {
  if (currentTowers.length !== gameTowers.length) {
    return true;
  }

  for (let i = 0; i < currentTowers.length; i++) {
    const currentTower = currentTowers[i];
    const gameTowerPosition = gameTowers[i];

    if (
      currentTower.tower.X !== gameTowerPosition.x ||
      currentTower.tower.Y !== gameTowerPosition.y
    ) {
      return true;
    }
  }

  return false;
}

 

 

 

클라이언트와 서버의 타워 정보를 비교하여 차이가 있는지 확인합니다. 차이가 있으면 true를 반환합니다.

 

5. 타워 배치 함수:

 

function placeInitialTowers() {
  sendEvent(2); // 게임이 시작될 때 타워를 비우기

  for (let i = 0; i < numOfInitialTowers; i++) {
    const { x, y } = getRandomPositionNearPath(200);

    sendEvent(3, { X: x, Y: y, gameTowers: towers });

    const tower = new Tower(x, y, towerCost);
    towers.push(tower);
    tower.draw(ctx, towerImage);
  }
}

 

게임 시작 시 초기 타워들을 배치하는 함수다. 타워를 배치하기 전에 서버와 타워 정보를 검증한다.

 

웹소켓과 핸들러 이벤트의 장점

• 실시간 통신: 웹소켓을 이용하면 클라이언트와 서버 간에 실시간으로 데이터를 주고받을 수 있어 게임과 같은 실시간 애플리케이션에 적합하다.
• 효율적인 자원 사용: 지속적인 연결을 유지하여 HTTP 요청-응답의 오버헤드를 줄일 수 있다.
• 확장성: 이벤트 핸들러 매핑을 통해 쉽게 기능을 확장하거나 수정할 수 있다.