우주 슈팅 · SOURCE GUIDE
STAR SWARM
편대를 이루는 적을 피하고 격파하는 우주 슈팅 게임입니다. 적 생성, 대기·돌진 상태와 웨이브 전환을 나누어 읽을 수 있습니다.
AI Tools Lab · · 소스 v1.0.0

적의 숫자보다 움직임의 변화를 보기
STAR SWARM의 적은 편대에 들어온 뒤 위치를 유지하거나 돌진합니다. 같은 적이라도 대기 중인지 내려오는 중인지에 따라 위험한 구간이 달라집니다. 플레이어는 좌우 이동과 발사를 사용하고, 자동 발사를 선택하면 회피에 더 집중할 수 있습니다.
한 웨이브를 정리한 뒤에는 다음 편대가 등장합니다. 화면에 적이 없어진 순간과 다음 웨이브를 시작하는 순간을 구분하는 구조를 살펴보기에 적합합니다.
편대가 만들어지는 코드
dist/engine.mjs의 Game 클래스에 적·탄환·플레이어 상태가 있습니다. makeWave()는 행과 열을 돌며 편대를 만들고, slot()은 편대에서 각 적이 위치할 곳을 계산합니다. app.mjs는 입력, 효과음과 픽셀 형태의 그리기를 연결합니다.
적의 delay는 한꺼번에 화면에 놓이는 대신 순서대로 등장하도록 하는 값입니다. 적 숫자만 늘렸는데 초반 압박이 크게 달라졌다면 등장 지연과 이동 상태도 함께 살펴봐야 합니다.
플레이어 피해와 탄환 정리
damage()는 무적 시간과 현재 게임 상태를 확인한 뒤 남은 기회를 줄입니다. 피해 직후 일정 시간 다시 피해를 받지 않게 하고 일부 탄환을 정리하는 흐름이 있습니다. 한 번의 충돌이 여러 프레임에 걸쳐 반복 피해가 되는 것을 막는 설계로 읽을 수 있습니다.
start()는 점수·웨이브·탄환·플레이어 위치를 새 경기 값으로 돌립니다. 새 게임을 열었는데 이전 판의 적이나 탄환이 남지 않게 하는 초기화 범위를 확인해 보세요.
직접 바꿔볼 과제: 적 수보다 등장 간격부터
makeWave()에서 적마다 주는 등장 지연을 조금 바꿉니다.- 편대 숫자는 그대로 두고 화면이 채워지는 속도를 비교합니다.
- 자동 발사를 켠 경우와 끈 경우에 이동 판단의 여유가 어떻게 다른지 기록합니다.
발사 속도와 적 수를 동시에 높이면 위험의 원인을 분리하기 어렵습니다. 처음에는 한 웨이브의 등장 흐름만 바꾸고, 이후 돌진이나 탄환 속도를 살펴보세요.
확인할 부분
시작·재시작 후 웨이브와 남은 기회가 초기화되는지, 일시정지 중 탄환이 진행되지 않는지 확인합니다. 최고 기록은 현재 브라우저의 star-swarm-best 항목에 저장되며 계정 기반 온라인 기록이 아닙니다. 브라우저 저장 공간을 지우거나 다른 기기에서 열면 기록이 같지 않을 수 있습니다.
내 컴퓨터에서 실행하기
- 소스 ZIP을 내려받고 압축을 풉니다.
README.md와dist가 있는 폴더에서 터미널을 엽니다.- 아래 명령을 실행한 뒤
http://127.0.0.1:8080/에 접속합니다.
python3 -m http.server 8080 --bind 127.0.0.1 --directory distWindows에서는 python3 대신 py를 사용할 수 있습니다. Python이 없다면 코드 편집기의 로컬 정적 서버를 dist에 연결하세요. 종료는 Ctrl + C입니다.
HTML 파일 더블 클릭보다 로컬 서버를 권장합니다. 모듈·이미지 경로를 일관되게 읽을 수 있습니다. 포트가 사용 중이면 8081 등으로 바꾸고 접속 주소에도 반영하세요. npm 설치나 별도 게임 빌드는 필요하지 않습니다.
이 소스로 할 수 있는 일
이 ZIP에 포함된 AI Tools Lab 제작 소스와 게임 에셋은 개인·상업 목적으로 사용, 복제, 수정, 재배포할 수 있습니다. 저작권 소유권이 양도되는 것은 아닙니다. 이 허락은 AI Tools Lab 사이트의 다른 콘텐츠에는 적용되지 않습니다. 포함되지 않은 외부 폰트·상표 등 제3자 자료는 각 권리자의 조건을 따릅니다.
설명에 있는 수정 과제는 직접 비교해 볼 실습 제안입니다. 수행하지 않은 테스트 결과나 제작 당시의 경험을 의미하지 않습니다. 오류를 발견했다면 게임명·브라우저·조작 순서와 함께 알려주세요.