폭탄 미로 · SOURCE GUIDE

BOMB GRID

상자를 부수며 탈출 경로를 만드는 폭탄 미로 게임입니다. 격자 이동, 십자 폭발과 연쇄 반응이 작은 규칙에서 어떻게 만들어지는지 살펴봅니다.

AI Tools Lab · · 소스 v1.0.0

BOMB GRID 실제 실행 캔버스 화면
로컬 브라우저에서 실행한 게임 캔버스입니다. 주변 메뉴·점수판 등은 제외했으며, 게임 내 순간에 따라 화면이 달라집니다.

폭탄을 놓기 전에 퇴로부터 보기

BOMB GRID에서는 폭탄을 설치한 자리에서 빠져나오는 것이 공격만큼 중요합니다. 불꽃은 십자로 뻗고 벽과 상자가 진행을 막습니다. 길을 여는 폭탄이 동시에 자신의 이동 경로를 막을 수 있어, 설치 전 모퉁이나 안전한 칸을 살펴야 합니다.

상자를 파괴하면 통로가 넓어지고 아이템을 얻을 기회가 생깁니다. 시간이 흐르면 경기장 바깥쪽이 좁아지는 구조도 있어 한 구석에 머무르는 전략만으로 끝까지 버티기 어렵습니다.

격자 규칙을 담당하는 파일

dist/engine.js의 ArenaGame이 맵, 이동, 폭탄과 경기 상태를 관리합니다. dist/game.js는 키·터치 입력을 연결하고 Canvas와 점수판을 갱신합니다. 규칙을 수정하려면 CSS보다 엔진의 상태와 판정 함수를 먼저 읽는 편이 좋습니다.

맵 크기는 W=13, H=11입니다. solid()와 canMove()가 다음 칸으로 갈 수 있는지 확인합니다. 캐릭터의 화면상 이동이 부드러워도 판단의 기준은 칸 좌표라는 점을 구분해서 읽어보세요.

능력치와 폭발을 함께 읽기

캐릭터에는 cap, power, speed가 있습니다. 각각 동시에 놓는 폭탄 수, 화력, 이동 속도와 연결됩니다. 기본 화력은 2이며 아이템을 얻는 과정은 collect()에서 처리합니다.

폭탄을 놓는 place()는 현재 상태, 생존 여부, 같은 칸의 폭탄, 보유 한도를 확인합니다. 버튼이 눌렸다는 사실만으로 폭탄이 생기지 않는 이유를 이 조건들에서 찾을 수 있습니다.

직접 바꿔볼 과제: 강한 폭탄의 대가

  1. 캐릭터 생성 부분에서 초기 power를 2에서 3으로 바꿉니다.
  2. 같은 통로에서 상자를 부술 수 있는 범위와 피해야 하는 범위를 비교합니다.
  3. 다음 실습에서는 화력을 원래대로 돌리고 상자 배치 확률만 조정합니다.

폭발 범위를 키우는 것이 반드시 쉬운 난이도를 뜻하지는 않습니다. 이동 가능한 길이 얼마나 남는지, 연쇄 폭발이 어디까지 이어질 수 있는지 함께 관찰해 보세요.

수정 뒤 확인할 부분

외벽 밖으로 나갈 수 없는지, 폭탄 한도가 지켜지는지, 불꽃이 벽을 통과하지 않는지 확인합니다. 재시작하면 폭탄·불꽃·아이템과 시간이 새 경기 상태로 돌아와야 합니다. 맵 크기 자체를 바꾸는 실습은 출발 좌표와 렌더러까지 영향을 주므로 첫 과제로는 권하지 않습니다.

내 컴퓨터에서 실행하기

  1. 소스 ZIP을 내려받고 압축을 풉니다.
  2. README.md와 dist가 있는 폴더에서 터미널을 엽니다.
  3. 아래 명령을 실행한 뒤 http://127.0.0.1:8080/에 접속합니다.
python3 -m http.server 8080 --bind 127.0.0.1 --directory dist

Windows에서는 python3 대신 py를 사용할 수 있습니다. Python이 없다면 코드 편집기의 로컬 정적 서버를 dist에 연결하세요. 종료는 Ctrl + C입니다.

HTML 파일 더블 클릭보다 로컬 서버를 권장합니다. 모듈·이미지 경로를 일관되게 읽을 수 있습니다. 포트가 사용 중이면 8081 등으로 바꾸고 접속 주소에도 반영하세요. npm 설치나 별도 게임 빌드는 필요하지 않습니다.

이 소스로 할 수 있는 일

이 ZIP에 포함된 AI Tools Lab 제작 소스와 게임 에셋은 개인·상업 목적으로 사용, 복제, 수정, 재배포할 수 있습니다. 저작권 소유권이 양도되는 것은 아닙니다. 이 허락은 AI Tools Lab 사이트의 다른 콘텐츠에는 적용되지 않습니다. 포함되지 않은 외부 폰트·상표 등 제3자 자료는 각 권리자의 조건을 따릅니다.

설명에 있는 수정 과제는 직접 비교해 볼 실습 제안입니다. 수행하지 않은 테스트 결과나 제작 당시의 경험을 의미하지 않습니다. 오류를 발견했다면 게임명·브라우저·조작 순서와 함께 알려주세요.