[CH 4 타워 디펜스 게임 프로젝트] 트러블슈팅 1014

 

🖥️ 일단, 클라이언트에서 시작해보기

개인 프로젝트에서 웹소켓을 다뤄보기는 했지만, 이해도가 낮은 상태였기 때문에 클라이언트와 서버 간에 데이터를 주고 받는 로직을 처음부터 짜보려고 하니, 오류 메세지가 터미널에 도배되기 일쑤였다.

 

어떻게 데이터를 보내고, 받아야 하는지도 헷갈릴 정도로 내실이 부족한 상태임을 인정해야만 했다. 그래도 타워 디펜스 게임에서 '타워'를 담당하게 된 만큼, 클라이언트에서라도 기능이 돌아갈 수 있도록 코드를 짜보기로 했다. 

 

function placeNewTower() {
  if (towers.length >= 10) {
    alert('타워는 10개까지만 건설할 수 있습니다.');
  } else if (userGold < towerCost) {
    alert('잔액이 부족합니다.');
  } else if (userGold >= towerCost) {
    const { x, y } = getRandomPositionNearPath(200);
    const tower = new Tower(x, y, 0);
    towers.push(tower);
    tower.draw(ctx, towerImage);
    towerId++; // 타워 건설 후, 타워 Id를 더한다.
    console.log(towerId);
    userGold -= towerCost;
  }
}

 

스켈레톤 코드를 최대한 활용하고, 다양한 자료들을 찾다보니 위와 같은 형태로 클라이언트에서 타워 구매/판매/강화 기능이 어떻게든 돌아가게 되었다. 이제 문제는 서버에서 거의 모든 데이터를 검증하고, 처리해야 하기 때문에, 소켓을 적극적으로 활용해야 한다는 점이었다.

 

 

🛠️ 클릭 이벤트가 발생했습니다만, 그만 들어주세요...

타워 강화와 판매 기능 모두 클릭으로 지정하는 방식을 사용하고 싶었는데, 판매 버튼을 누르면 addEventListener가 event 발생을 계속 listen하고 있기 때문에 강화를 하고 싶어도 판매가 되거나 오류가 발생하는 문제가 이어졌다. 

 

팀원 분들과 방법을 찾아본 결과, addEventListener 관련 코드 끝에  { once : true } 를 붙여주면 이벤트를 듣는 것을 멈출 수 있었다. 강화하려는 타워를 클릭하고, 강화가 완료되면 addEventListener가 비활성화 되는 로직이 드디어 완성된 것이다.