이 포스트를 위해 포크한 글
이 글을 만들 때 직접 이어 만든 원글입니다.
유도탄3.0 · 게임 · 조현성
프로그램 소개
마우스를 따라 움직이는 초록색 사각형을 조작하여 사방에서 무한하게 몰려오는 빨간색 적(세균, 바이러스)들을 피하는 웹 기반 생존 게임입니다. 적들은 플레이어를 지속적으로 추격하며 충돌 시 게임이 즉시 종료되므로 세밀한 컨트롤이 필요합니다. 화면에 나타나는 보라색 아이템(백신)을 획득하면 현재 생성된 모든 적을 제거하여 생존 시간을 연장할 수 있습니다. 게임이 끝나면 자신의 생존 기록과 이름을 입력하여 전역 랭킹 시스템에 점수를 제출할 수 있습니다. 실시간으로 업데이트되는 상위 10위 랭킹 목록을 통해 다른 플레이어들과 기록을 비교하며 경쟁해보세요.
README
개요
본 앱은 웹 기반의 생존 게임 시뮬레이터입니다. 플레이어(녹색 사각형)가 마우스를 따라 움직이며, 화면 밖에서 나타나 플레이어를 추격하는 위험한 오브젝트(빨간색 사각형)로부터 최대한 오래 살아남는 것이 목표입니다. 보라색 전리품 아이템을 획득하면 화면상의 모든 위험 오브젝트를 제거할 수 있습니다. 게임 종료 시 생존 시간을 기록하고, 사용자 이름을 입력하여 전역 랭킹 시스템에 점수를 제출하고 다른 플레이어들의 순위를 확인할 수 있습니다.
파일 구조
유도탄30.html: 게임의 핵심 로직과 렌더링, 스타일, 그리고 랭킹 시스템 연동을 위한 스크립트가 포함된 메인 HTML 파일입니다.
화면·작동 안내
주요 UI 요소
- 게임 캔버스: 플레이어와 오브젝트들이 렌더링되는 주 영역입니다.
- 플레이어 (녹색): 마우스 커서의 위치를 부드럽게 추적하며 이동하는 캐릭터입니다.
- 위험 오브젝트 (빨간색): 플레이어를 지속적으로 추격하며, 충돌 시 게임이 종료됩니다.
- 아이템 (보라색): 획득 시 현재 화면의 모든 위험 오브젝트를 초기화합니다.
- Game Over 오버레이: 게임 종료 시 나타나며 생존 시간, 이름 입력란, 점수 제출 버튼, 재시작 버튼, 상위 10위 랭킹 목록을 표시합니다.
사용 흐름
- 시작: 페이지를 열면 게임이 즉시 시작됩니다.
- 이동 및 생존: 마우스를 움직여 빨간색 사각형들을 피합니다.
- 아이템 활용: 보라색 사각형을 먹어 위험 요소를 제거하며 더 오래 버팁니다.
- 결과 확인 및 등록: 빨간색 사각형에 닿으면 게임이 종료됩니다. 이름을 입력하고 'Submit Score' 버튼을 눌러 점수를 등록하거나 'Restart Game'으로 다시 시작합니다.
- 랭킹 확인: 하단의 랭킹 목록을 통해 현재 자신의 기록과 다른 플레이어들의 순위를 대조합니다.
프로젝트 진행 상황
- [x] 기본 캔버스 렌더링 및 게임 루프 구현
- [x] 마우스 추적 기반 플레이어 이동 로직 구현
- [x] 적 개체(유도탄) 생성 및 추적 로직 구현
- [x] 전리품 아이템 및 화면 클리어 기능 구현
- [x] 충돌 감지 및 게임 오버 처리
- [x] 랭킹 API(점수 제출 및 조회) 연동
- [x] 게임 오버 UI 구성 (점수, 이름 입력, 랭킹 리스트)
- [x] 사용자 이름 입력 및 제출 기능 반영