HTML, CSS, JavaScript로 디펜스 게임을 만들면서 가장 먼저 부딪힌 건 “게임이 재밌으려면 숫자가 먼저 맞아야 한다”는 부분이었다.
<게임 시작 화면 이미지 필요>
적 유닛이 계속 나오는 구조라서 자원 수급이 조금만 과해도 유닛을 무한으로 뽑게 되고, 반대로 너무 빡빡하면 아무것도 못 하고 버티기만 하게 됐다.
그래서 처음에는 기능 추가보다도 미네랄 수급 주기, 유닛 생산 비용, 쿨타임을 계속 바꿔 보면서 기본 경제 흐름부터 잡았다.
전투 쪽은 좌표 기반 충돌 판정과 사거리 체크로 단순하게 시작했지만, 웨이브가 겹치기 시작하면 화면 요소가 많아져서 브라우저 프레임이 바로 떨어졌다.
특히 DOM 업데이트가 잦아지면 입력 반응까지 느려져서 플레이가 답답해졌기 때문에, 전투 계산 루프와 화면 갱신 루프를 분리해서 처리했다.
유닛과 이펙트도 매번 새로 만들지 않고 재사용하는 방식으로 바꿔서 장시간 플레이에서 버벅임이 덜하도록 조정했다.
웨이브 설계는 시간 기반 스케줄링으로 관리했고, 같은 패턴 반복이 지루해지지 않도록 라운드마다 조합을 조금씩 바꿨다.
<웨이브 진행 장면 이미지 필요>
생산 시스템은 큐 방식으로 처리해서 한 번에 과도하게 생산되지 않게 제한했고, 타겟 선택도 가장 가까운 적 또는 선두 적 기준으로 분기해 상황별 대응이 되도록 만들었다.
결과적으로 단순한 구조여도 데이터와 루프를 어떻게 설계하느냐에 따라 전략성이 크게 달라진다는 걸 배웠다.
P.S
이 프로젝트는 웹 기술로도 충분히 게임다운 전투 템포를 만들 수 있고, 결국 핵심은 알고리즘보다 그것을 게임 흐름에 맞게 튜닝하는 과정인 것 같다.
