RPS Arena는 Next.js와 Socket.IO를 기반으로 제작된 실시간 멀티플레이어 가위바위보 순위 결정 게임입니다. 이 게임의 핵심은 단순히 최후의 1인을 가리는 것이 아니라, 복잡하고 정교한 규칙에 따라 1등부터 꼴등까지 모든 플레이어의 순위를 결정하는 데 있습니다. 특히, **'목표 순위'**를 둘러싼 재대결 규칙은 게임에 전략적인 깊이를 더합니다.
-
닉네임 시스템: 모든 플레이어는 자신만의 닉네임을 설정하여 게임에 참여합니다.
-
커스텀 게임 설정: 방 생성 시 최대 인원과 게임의 하이라이트가 될 당첨 순위를 직접 설정할 수 있습니다.
-
정교한 순위 결정 시스템:
- 그룹 탈락: 라운드에서 승자 그룹과 패자 그룹의 인원수가 다를 경우, 더 적은 인원의 그룹이 순위를 확정하고 게임에서 빠집니다.
- 순위 부여 방식: 승자는 상위(1등부터)의 빈자리를, 패자는 하위(꼴등부터)의 빈자리를 채워나갑니다.
- 동수 재대결: 승자와 패자 수가 2명 이상으로 동일할 경우, 순위를 결정하지 않고 재대결합니다.
-
핵심 재대결 규칙 (목표 순위):
- 라운드 결과, 순위가 결정될 그룹의 예상 순위에 '목표 순위'가 포함되고 해당 그룹 인원이 2명 이상일 경우, 이들은 순위가 확정되지 않고 다음 라운드에서 재대결을 펼칩니다.
- 목표 순위와 관련 없는 반대 그룹은 정상적으로 순위가 확정되어 게임의 속도감을 유지합니다.
-
상세한 라운드 결과: 라운드 종료 후, 모든 참가자가 어떤 선택을 했는지와 순위 확정/재대결 여부를 한눈에 볼 수 있는 결과창이 표시됩니다.
-
게임 로그: 서버의
/logs폴더에 각 게임방의 모든 진행 과정이 상세하게 기록되어 디버깅 및 분석이 용이합니다.
- 프론트엔드: Next.js (React), TypeScript
- 실시간 통신 & 서버: Socket.IO, Node.js (Next.js Custom Server)
- 스타일링: CSS Modules
- 의존성 설치:
npm install - 개발 서버 실행:
npm run dev - 브라우저 접속:
http://localhost:3000
.
├── app/
├── components/
├── context/
├── logs/ # 게임 진행 로그 기록 폴더
├── styles/
├── server.ts # 핵심 게임 로직 서버
├── types/index.type.ts # 타입 정의
└── ...