Battle City 3D: 끝없는 탱크 디펜스

1. 프로젝트 목표 1985년 패미컴 클래식에서 영감을 받은 브라우저 탱크 방어 게임 Battle City 3D를 제작합니다. 플레이어는 탱크를 조종해 적 20대를 한 웨이브에서 처치하고, 보급품을 수집하며 독수리 본부를 지킵니다. 레퍼런스 미디어에 표시된 현재의 원근 3D 버전을 재현하고, 시드 기반 무한 캠페인과 선택 가능한 클래식 레이아웃 35종을 포함합니다. 탱크, 벽, 배경에 실제 깊이감을 부여하되, 이해하기 쉬운 아케이드 규칙은 유지합니다. 2. 비주얼 스타일 Three.js PerspectiveCamera를 사용하고 시야각은 60도로 설정합니다. 기본 전장은 플레이어 뒤쪽 위에서 바라보며, 약 13월드 유닛 거리와 0.43라디안 높이에 배치합니다. 탱크의 위치와 탱크 앞쪽의 한 지점을 부드럽게 추적하되, 탱크가 회전할 때 카메라가 자동으로 회전하지 않도록 합니다. 더 높은 전술 시점, 수동 드래그 오비트, 휠 줌을 제공합니다. 이동과 사격에는 맵의 네 가지 기본 방향 축을 사용합니다. 오비트 후에는 방향키를 카메라 기준으로 가장 가까운 기본 방향에 매핑하되, 키보드 입력으로 대각선 이동이 발생하지 않도록 합니다. 차체의 진행 방향은 발사 방향과 즉시 일치시키고, 각 모델의 실제 포신 위치에 맞춰 탄환과 포구 섬광의 높이를 조정합니다. 지면에 안정적으로 놓인 궤도형 탱크, 금속 포탑, 테라코타 벽돌, 짙은 강철 블록, 푸른 물, 낮은 식생과 반사되는 얼음을 사용합니다. 플레이 가능 영역 너머의 지면도 나무, 폐허 건물, 안개가 있는 배경으로 이어지게 합니다. 따뜻한 방향광, 부드러운 그림자, 주변광, ACES 톤 매핑을 사용하고, 포구 섬광·반동·불꽃·튀어 오르는 파편은 절제된 수준으로 표현합니다. 설원 스테이지에서는 지면과 나무의 색상 팔레트를 바꾸고, 산업 스테이지에서는 강철과 폐허 건물을 중심으로 구성합니다. 게임 화면은 짙은 올리브색 지휘 인터페이스로 구성하고, 주요 액션은 따뜻한 노란색으로 강조합니다. 점수, 공유 목숨 수, 남은 적 아이콘, 스테이지 이름, 레이더를 표시합니다. 전장 위에는 큰 Tripo 3D / Three.js 모델 전환 UI를 배치해 현재 선택된 모드와 회전하는 탱크 미리보기를 보여 줍니다. 현지화된 일러스트 보급품 가이드와 지속시간 효과 표시기를 사용합니다. 좁은 화면에서도 플레이 영역과 필수 터치 조작부가 계속 보이게 합니다. 3. 월드와 씬 전장은 26×26 타일 그리드로 표현하고, 탱크 충돌 반너비는 0.72로 설정합니다. 독수리는 (13,25)에 배치하며, 파괴 가능한 U자형 벽돌 방어 시설로 둘러쌉니다. 플레이어 스폰 위치는 (9,25)와 (17,25), 적 게이트 위치는 (1,1), (13,1), (25,1)입니다. 두 가지 캠페인을 제공합니다. 하나는 적 20대 웨이브 테이블이 포함된 클래식 레이아웃 35종 전체를 사용하고, 다른 하나는 풀밭·설원·산업 바이옴을 순환하는 시드 기반 무한 생성기입니다. 전체 차체가 통과할 수 있을 만큼 넓고 연결된 통로를 생성하며, 플레이어 스폰 지점·적 게이트·아이템 위치 사이에 통행 가능한 연결을 확보합니다. 중앙에는 어긋나게 배치한 강철 엄폐물을 추가해 스폰 지점에서 독수리로 곧장 사격할 수 없도록 하되, 교차로를 통한 접근은 유지합니다. 시작 바이옴이나 클래식 스테이지를 선택하고 무작위 맵을 다시 생성할 수 있게 합니다. 런 시드, 점수, 목숨, 생존한 플레이어의 업그레이드를 다음 스테이지로 이어 갑니다. 벽돌은 파괴할 수 있고, 강철 블록은 일반 포탄과 탱크를 막습니다. 물은 탱크의 통과를 막지만 포탄은 통과시키며, 식생은 적 모델을 가리고, 얼음은 접지력을 낮춥니다. 원거리 환경은 장식용으로 유지하고 게임플레이 충돌과 분리합니다. 4. 에셋 목록 안정적으로 관리하고 개별 교체할 수 있는 다음 3D 모델 슬롯을 사용합니다. 플레이어, 적, 중전차, 독수리를 우선 배치한 뒤 보급품 모델 10종을 모두 추가합니다. 모든 에셋은 가장 낮은 지점이 지면에 닿도록 배치하고, 정면 방향·중심·스케일을 정규화합니다. 적마다 모델을 새로 로드하지 말고 템플릿을 재사용합니다. - player: 식별하기 쉬운 포탑과 전방 포신을 갖춘 겨자색 궤도형 탱크입니다. 플레이어 탱크에 사용하며, 두 번째 플레이어에는 별도의 링 색상을 적용합니다. - enemy: 소형 궤도형 적 탱크입니다. 기본형, 고속형, 강력형 변종에는 서로 다른 색조를 적용해 재사용합니다. - heavy: 표준 적 메시와 분리된, 눈에 띄게 무거운 장갑 탱크입니다. 차체 위에는 네 개의 장갑 세그먼트가 보이게 합니다. - eagle: 본부 받침대 위에 놓인 금속성 황금 독수리 동상입니다. - pickup-star: 다섯 꼭짓점을 가진 금색 업그레이드 별입니다. - pickup-helmet: 일시적인 방어막 효과를 위한 군용 보호 헬멧입니다. - pickup-clock: 적의 움직임을 멈추는 데 사용하는 식별하기 쉬운 시계입니다. - pickup-shovel: 본부를 강화하는 삽입니다. - pickup-life: 목숨 하나를 나타내는 미니어처 탱크입니다. - pickup-grenade: 활성 상태인 적을 파괴하는 수류탄입니다. - pickup-ammo: 연사 효과를 위한 탄약 상자입니다. - pickup-repair: 장갑을 복구하는 수리 공구 상자입니다. - pickup-magnet: 원거리에서 보급품을 수집하는 말굽 자석입니다. - pickup-boost: 일시적인 속도 증가 효과를 위한 에너지 배터리입니다. - environment-building: 풍화된 폐허 아파트 건물, Tripo P2.0, 요청 예산 1,800 트라이앵글입니다. - environment-tree: 줄기가 드러난 불규칙한 소나무, Tripo P2.0, 요청 예산 1,100 트라이앵글입니다. - environment-bush: 낮은 잎 관목과 풀숲, Tripo P2.0, 요청 예산 650 트라이앵글입니다. 보급품은 색상 링과 일치하는 가이드 썸네일을 함께 사용하고, 회전하며 공중에 떠 있는 수집 가능 모델로 표시합니다. 반복되는 건물, 나무, 관목은 공유 지오메트리와 머티리얼 인스턴스로 렌더링합니다. 건물과 나무의 뿌리는 지면에 맞추고, 관목 밑부분은 지형과 자연스럽게 섞이도록 약간 묻습니다. 설원 스테이지에서는 위를 향한 표면에 눈을 추가합니다. 타일 벽, 물, 얼음, 탄환 메시, UI, 조명, 파티클, 충돌 프록시는 절차적으로 생성합니다. 물은 월드 공간에서 흐르는 파동, 변화하는 노멀, 작은 표면 변위를 사용해 애니메이션하며, 인접한 타일 사이에서도 끊김 없이 이어지게 합니다. Tripo 버전은 생성 모델 17개를 사용하고, 비교 버전은 동일한 규칙과 충돌을 유지하면서 탱크와 환경을 모두 코드로 제작한 지오메트리로 전환합니다. 두 버전 모두 Three.js로 렌더링합니다. 5. 게임플레이와 피드백 공유 목숨 3개를 사용하는 싱글 플레이와 로컬 2인 협동 플레이를 지원합니다. 싱글 플레이에서는 WASD 또는 방향키로 이동하고 Space/J로 사격합니다. 협동 플레이에서는 1P가 WASD와 Space/J를 사용하고, 2P가 방향키와 Enter/Numpad 0을 사용합니다. P/Escape로 일시정지하고, C로 카메라를 변경하며, 1/2로 모델 모드를 선택합니다. 터치스크린에서는 방향 패드와 발사 버튼을 동시에 누를 수 있게 하고, 포인터 취소 시 입력을 해제합니다. 스크롤하지 않고도 일시정지, 재개, 다음 스테이지, 재시도 동작을 사용할 수 있게 합니다. 플레이어 속도는 초당 4.2유닛이며, 부스트 사용 시 6.3입니다. 적은 기본형, 고속형, 강력형, 중전차로 구성합니다. 중전차는 체력 4를 가지며, 방어막이 없는 상태에서 처음 세 번 피격되어도 생존합니다. 적 처치 점수는 유형별로 100, 200, 300, 400점이며, 보급품을 수집할 때마다 500점을 획득합니다. 적 20대를 처치하면 스테이지를 클리어합니다. 독수리가 파괴되거나, 생존한 플레이어가 없는 상태에서 공유 목숨이 모두 소진되면 패배합니다. 즉시 재시도, 명확한 다음 스테이지 진행, 로컬에 저장되는 최고 점수를 제공합니다. 보급품 10종을 모두 구현합니다. 별은 세 단계로 업그레이드되며, 빠른 포탄, 포탄 2발 동시 발사, 강철을 파괴하는 포탄 순서로 효과가 강화됩니다. 헬멧은 12초 동안 방어막을 제공하고, 시계는 9초 동안 적을 멈춥니다. 삽은 16초 동안 기지를 강화하며, 미니 탱크는 목숨 1개를 추가합니다. 수류탄은 활성 상태인 적을 파괴하고, 탄약은 최대 4발의 포탄을 동시에 유지하는 14초 연사 효과를 부여합니다. 수리는 체력을 2 회복하되 최대 체력은 3으로 제한하고, 자석은 5유닛 이내에 보이는 보급품을 20초 동안 수집합니다. 부스트는 12초 동안 지속됩니다. 보급품 모델은 25초 동안 유지되며 도달 가능한 위치에 나타납니다. 종류가 다양하게 나오도록 섞은 덱을 사용합니다. 자석 수집은 단단한 장애물을 무시하지 않아야 합니다. 수집한 NES 스타일 샘플을 4.333초 길이의 스테이지 오프닝, 발사, 주행, 대기, 벽돌·강철 충돌, 적·플레이어 폭발, 보급품 생성·수집, 추가 목숨, 장갑 피격, 얼음, 일시정지, 게임 오버에 사용합니다. 현재 프로젝트는 JustoSenka/BattleCity의 OGG 큐 15개와 커밋 3a07004ba8e53baea74ff70d2ecc22b017eb9b20을 사용합니다. 출처 표기와 저장소 라이선스 고지를 유지하고, 비트 단위로 완전히 동일한 하드웨어 캡처라고 주장하지 말고 수집된 리메이크 오디오로 설명합니다. 사용자 제스처로 오디오를 활성화하고, 샘플 게인을 조정하며, 볼륨·음소거 기능을 제공하고, 사운드를 이벤트에 동기화합니다. 관련 없는 연속 배틀 음악은 추가하지 않습니다. 6. 기술 구현 TypeScript, Three.js 0.180.0, Vite 7을 사용하고, package.json과 lockfile은 별도로 격리합니다. 시뮬레이션은 렌더링과 분리하고 120Hz로 업데이트합니다. 단단한 차체 AABB, 축 분리 이동, 경계 처리와 탱크 간 분리, 가장 가까운 접점을 연속적으로 검사하는 탄환 스윕을 사용하며, 서로 반대 방향으로 움직이는 탄환 사이의 상대 운동 충돌도 처리합니다. 탄환은 차체에서 생성되어 앞으로 스윕되므로 근거리에서 벽을 뚫고 지나가는 현상을 방지합니다. 얼음 위의 가속·감속과 감쇠된 바운스를 적용한 파편의 중력을 추가합니다. 이는 서스펜션 시뮬레이터가 아닌 아케이드 지상 물리입니다. GLTFLoader로 동일 출처의 GLB 에셋을 로드합니다. 충돌 프록시는 에셋 지오메트리와 분리합니다. 현재 런타임은 양자화된 속성과 WebP 텍스처를 사용하며(차량·기지는 1024px, 보급품·환경은 512px), 지오메트리 단순화나 WASM 디코더는 사용하지 않습니다. 로딩 워커는 4개로 제한하고, 해시 버전 URL과 256KiB 범위 요청을 사용하며, 각 범위 요청의 타임아웃은 20초, 시도 횟수는 최대 3회로 설정합니다. 핵심 모델 4개와 오디오가 준비되면 플레이를 활성화하고, 보급품과 환경 에셋은 백그라운드에서 로드합니다. 모델이 준비된 보급품 유형만 생성합니다. 모델 모드를 전환해도 게임플레이 상태는 유지합니다. 영어, 중국어 간체, 일본어, 한국어 UI를 제공합니다. 기기 언어를 기준으로 기본 언어를 선택하되, zh-TW, zh-HK, zh-MO, zh-Hant는 영어를 기본값으로 사용합니다. 사용자가 명시적으로 선택한 언어는 저장합니다. 키보드, 데스크톱 포인터, 멀티터치를 지원하고 포커스를 잃으면 일시정지합니다. 모든 에셋, 크레딧, 재현 가능한 스크립트는 소스 프로젝트에 로컬로 포함하고, 비공개 자격 증명이나 런타임 백엔드 의존성 없이 정적 dist 디렉터리를 배포합니다. 7. 완료 기준 편집 가능한 소스, 에셋 출처와 라이선스 고지, npm 개발·빌드 워크플로, 플레이 가능한 정적 미리보기를 제공합니다. 기본 Tripo 씬, 모델 비교, 모든 바이옴, 네 번 피격되어야 하는 중전차, 모든 보급품 효과, 일시정지·재개, 패배·재시도, 스테이지 진행을 검증합니다. 차체 폭 기준 연결성과 안전한 스폰을 위해 시드 기반 맵 1,000개를 테스트하고, 모든 클래식 맵, 벽 관통, 대각선 사격, 탱크 분리, 얼음 관성, 여러 요에서의 카메라 상대 입력, 상태를 보존하는 모드 전환도 테스트합니다. 현지화된 UI와 좁은 화면의 두 손가락 조작을 검증하되, 실제 기기 테스트를 에뮬레이션만으로 수행한 경우에는 실제 기기에서 테스트했다고 주장하지 않습니다. 실제 시작 화면과 전투 프레임을 레퍼런스 이미지·영상과 비교하고, 모델 17개와 오디오 큐 15개가 모두 로드되는지 확인합니다. 기존 CMS Web Page 워크플로를 통해 게시한 뒤 최종 공개 페이지를 검증합니다. 저장된 CMS 레코드를 배포 완료로 간주해서는 안 됩니다.