Bubble Battle

원작을 복제하지 않고, 전투의 재미를 다시 만들기

Bubble Battle은 물풍선을 두고 길을 만들며 상대를 가두는 아케이드 전투의 재미에서 출발했습니다. 다만 기존 게임의 리소스나 화면을 가져오는 방식이 아니라, 맵·캐릭터·사운드·UI를 모두 별도로 만들고 핵심 규칙만 독립적으로 다시 설계했습니다.

처음부터 온라인 멀티플레이를 만들기보다, 브라우저에서 바로 시작해 AI와 한 판을 즐길 수 있는 로컬 1대1 경험에 집중했습니다. 방향키 또는 WASD로 움직이고, Space로 물풍선을 놓고, E로 바늘을 사용합니다. 모바일에서는 조이스틱과 액션 버튼으로 같은 규칙을 조작할 수 있습니다.

한 판이 끝날 때까지 필요한 규칙

게임에는 15×13 맵, 파괴 가능한 블록과 아이템, 물풍선의 연쇄 폭발, 물방울에 갇히는 상태, 바늘로 구조하는 규칙, 150초 라운드와 서든데스가 들어 있습니다. 맵도 하나만 고정하지 않고 네온 가든, 메트로 크로싱, 코럴 메이즈 세 가지를 만들었습니다.

AI는 단순히 플레이어를 향해 움직이는 방식이 아닙니다. 물풍선이 터질 경로를 피하고, 길을 막을 기회를 찾고, 난이도에 따라 공격성과 판단 속도를 다르게 가집니다. 그래서 쉬운 봇은 규칙을 익히기 좋고, 어려운 봇은 탈출 경로까지 압박하는 상대가 되도록 구성했습니다.

화면과 판정을 분리한 이유

처음에는 화면을 그리는 코드 안에서 규칙까지 같이 다루고 싶어지기 쉽습니다. 하지만 충돌, 폭발, 아이템, AI 판단이 한곳에 섞이면 수정할수록 무엇이 잘못됐는지 찾기 어려워집니다.

그래서 30Hz로 동작하는 결정론적 게임 판정 코어를 화면과 분리했습니다. 맵, 난수, 이동·충돌, 물풍선과 폭발, AI 판단은 게임 코어가 맡고, Phaser는 게임 세계를 그립니다. 메뉴·HUD·결과 화면은 HTML UI로 분리해 게임 판정에 직접 손대지 않게 했습니다.

이 구조 덕분에 게임 규칙은 브라우저 표현과 독립적으로 테스트할 수 있고, 화면을 바꾸더라도 전투 결과가 바뀌지 않습니다. 나중에 온라인 대전을 고민하게 되더라도 같은 판정 코어를 서버 권위 구조에 재사용할 수 있도록 여지를 남겼습니다.

Codex와 게임을 만든 방식

Codex에게 처음부터 “물풍선 게임 하나 만들어 줘”라고 맡기지는 않았습니다. 먼저 한 판에서 반드시 지켜야 하는 규칙을 쪼갰습니다. 이동과 벽 충돌, 물풍선 배치, 폭발 범위와 연쇄, 잡힌 상태와 구조, 시간 제한과 승패 판정 순서로 질문을 나눴습니다.

각 규칙을 정리한 뒤에는 기존 코드에서 이미 있는 맵·입력·상태 처리 구조를 먼저 찾게 했습니다. 새 기능을 추가할 때도 비슷한 로직을 새로 만들기보다, 어떤 모듈을 확장해야 하는지와 그 이유부터 확인했습니다. 화면이 커진 뒤에는 렌더러를 역할별로 나누고, Phaser가 HTML UI 상태를 직접 바꾸지 않도록 경계를 다시 잡았습니다.

구현 뒤에는 Codex에게 코드만 보게 하지 않았습니다. 단위 테스트로 판정 규칙을 확인하고, 실제 Chrome에서 메뉴 선택, 이동, 물풍선 설치, 일시정지, 모바일 터치 조작까지 반복해서 검증했습니다. 이 페이지의 화면도 그 과정에서 실제로 플레이하며 캡처한 장면입니다.

AI가 빠르게 코드를 만드는 것보다 중요한 것은, 어떤 규칙을 먼저 합의하고 어떤 흐름으로 검증할지라고 생각합니다. 게임처럼 작은 규칙 하나가 전체 경험을 바꾸는 작업에서는 특히 그 차이가 컸습니다.

다음에 남은 것

현재는 로컬 AI 대결에 집중한 프로토타입입니다. 한 판의 손맛과 조작, 규칙의 일관성을 먼저 다듬고 있습니다. 이후에는 더 다양한 맵과 아이템, 관전 가능한 리플레이, 그리고 같은 게임 코어를 활용한 온라인 대전까지 단계적으로 검토할 수 있습니다.