🎓 대학전쟁 (University War)

실시간 멀티플레이어 두뇌 서바이벌 게임 플랫폼 포트폴리오

🌐 지금 바로 플레이하기 (Live Demo)

🚀 프로젝트 개요 (Project Overview)

TV 프로그램 '대학전쟁'에서 영감을 받아 제작된 웹 기반 실시간 멀티플레이어 게임 플랫폼입니다. 다양한 미니게임을 통해 참가자들은 지략과 협동심, 전략을 겨루며, 단독 연습(AI 모드)과 실시간 1:1 유저 대전을 모두 지원합니다.

Socket.io 실시간 동기화 Three.js 3D 렌더링 Vanilla JS 객체지향 설계 Supabase DB 연동 반응형 웹 디자인

🏗 시스템 아키텍처 및 기술 스택

🗺 UI / UX 시스템 흐름도 (Storyboard)

직관적이고 끊김없는 단일 페이지(SPA) 흐름을 바탕으로 게임을 시작합니다.

📝
1. 프로필 설정
(소속 및 닉네임 지정)
🚪
2. 메인 로비
(방 개설 및 리스트 참가)
⚔️
3. 게임 대기실
(시각적 매치업 렌더링)
🎮
4. 인게임 플레이
(실시간 액션 동기화)
🏆
5. 결과 및 랭킹
(DB 반영 및 재도전)
프로필 설정 화면

1단계: 초기 진입 화면 (Profile UI)

유저는 6개의 명문 대학교 중 본인의 진영을 선택하고, 게임에 활용될 닉네임을 설정하게 됩니다. 이렇게 선택된 정보는 Socket.io를 통해 실시간 매치메이킹 및 게임 내 UI 텍스처, 아나운싱에 활용됩니다.

메인 로비 화면

2단계: 메인 로비 (Main Lobby)

프로필 작성을 마치면 진입하는 공간으로, 현재 개설된 게임 방 목록을 확인하거나 새로운 방을 직접 생성할 수 있습니다. 상단에는 유저의 프로필 카드가 표시되며, 실시간으로 업데이트되는 전체 랭킹보드를 통해 자신의 위치를 확인할 수 있습니다.

📸 핵심 게임 라인업 상세 가이드 (Gameplay Details)

플랫폼에서 제공하는 6가지 오리지널 두뇌 게임의 룰과 구현 특징을 소개합니다.

블록 오목

1. 블록 오목 (Block Omok - 3D 입체 오목)

z축(높이)이 추가된 3차원 입체 보드판에서 교대로 블록을 쌓아 5목을 먼저 완성하는 고도의 공간 지각 게임입니다.

🎯 규칙 및 전략

  • 격자판 위에 자신의 색상 블록을 중력에 맞추어 하나씩 쌓아 올립니다.
  • 가로, 세로, 수직, 그리고 입체 대각선 방면 등 어떤 방향으로든 내 블록 5칸을 일렬로 먼저 잇는 쪽이 승리합니다.
  • 또한 각 플레이어가 블록을 5개 이상 배치한 후부터는, 보드 위에 놓인 본인의 '최상단 블록'을 집어들어 다른 위치로 재배치하는 전략적 변수 창출이 가능합니다.

💻 프로그래밍 특징

  • Three.js 렌더링: `OrbitControls`를 통한 자유로운 시점 변환 및 Raycasting 기반의 마우스 조준 착수 로직을 구현했습니다.
무지개 체스

2. 무지개 체스 (Rainbow Chess - 블라인드 심리전)

기물의 강약 숫자가 암막 속에 가려진 상태에서 서로의 배치를 예측하고 공격하는 변형 체스 게임입니다.

🎯 규칙 및 전략

  • 게임 시작 전, 보유한 7개의 무지개색 폰(Pawn)에 주어지는 여유분 8포인트를 자유롭게 분배하여 총 15의 스탯으로 라인업을 구성합니다. (각 기물 최소 1)
  • 상대방 기물의 스탯은 완전한 블라인드(물음표) 상태입니다. 교전 시 공격 측의 스탯이 수비 측 스탯보다 엄격히 초과해야만 파괴할 수 있습니다.(동점 시 공격자 소멸)
  • 상대방의 이동 패턴을 파악하여 어느 기물에 높은 포인트를 투자했는지 유추하고, 우위를 점하는 심리전이 포인트입니다.

💻 프로그래밍 특징

  • DOM 기반 체스 보드: CSS Grid와 Transition 효과를 활용하여 기물의 부드러운 이동을 구현했으며, 상태와 뷰를 분리하여 동기화 안정성을 확보했습니다.
평행 수식

3. 평행 수식 (Parallel Equation - 수식결과 매칭)

양쪽 스크린에 나열된 수식 카드들 중에서 동일한 연산 결과를 갖는 카드 쌍을 찾아내는 암기 매칭 게임입니다.

🎯 규칙 및 전략

  • 게임 보드는 좌측 그리드와 우측 그리드 두 가지로 나뉘어지며, 각각 사칙연산 수식이 적힌 수십 개의 카드가 배치됩니다.
  • 플레이어는 좌측과 우측에서 카드를 한 장씩 골라, 수식의 '계산된 결과값'이 완전히 동일한 쌍을 맞춰야 합니다.
  • 숨겨져있는 정답 쌍의 위치를 기억하며 상대방보다 먼저 더 많은 쌍을 맞추어내는 유저가 우승합니다.
수식 데스노트

4. 수식 데스노트 (Death Note - 스피드 수식 도출)

주어진 타겟 넘버(50~1000 범위)를, 화면의 숫자와 연산 버튼을 마음껏 조합하여 가장 빠르게 도출해내야 하는 계산력 게임입니다.

🎯 규칙 및 전략

  • 게임판 상단에 이번 라운드의 [타겟 숫자]가 등장합니다. (예: 254)
  • 플레이어에게는 여러 개의 숫자 버튼(1~6)과 사칙연산 버튼(+, -, ×, ÷), 괄호가 제공되며 이를 무제한으로 클릭하여 수식을 짤 수 있습니다.
  • 수식 입력창에 문맥상 하자가 없는 올바른 수식을 구성하여 타겟 넘버와 동일한 결과값을 제출해야 합니다. 가장 빨리 맞추어 총 3점을 먼저 득점하는 사람이 승리합니다.
채굴과 투자

5. 채굴과 투자 (Investment - 모의 투자 시뮬레이션)

제공되는 뉴스 정보 스크립트를 분석하여 코인의 가치 변동을 예측하고 수식 퀴즈를 풀어 재산을 극대화하는 투자 게임입니다.

🎯 규칙 및 전략

  • 매 라운드 진행되는 사칙연산 '채굴 퀴즈'를 맞혀 코인 구매용 추가 현금(골드)을 1초라도 빨리 확보해야 합니다.
  • 라운드 시작 직전 화면에 [호재] 및 [악재] 경제 뉴스 스크립트가 팝업되며 이를 종합 분석하여 비트코인, 이더리움, 리플 등의 가치 방향성을 간파해야 합니다.
  • 총 10라운드 이후 평가 자산 총합이 더 큰 쪽이 승리합니다. 매 라운드의 자산 변동폭은 상세한 정산 보고서를 통해 시각적으로 제공됩니다.
럭키 21

6. 럭키 21 (Lucky 21 - 스피드 합산 게임)

보드에 놓인 카드들 중 합이 21이 되는 3장의 카드를 기억하여 가장 빠르게 찾아내는 게임입니다.

🎯 규칙 및 전략

  • 게임 시작 시 카드들이 10초간 앞면으로 공개되며, 이때 카드들의 숫자와 위치를 남들보다 빠르게 암기해야 합니다.
  • 10초 후 카드들이 모두 뒷면으로 뒤집히고 본격적인 게임이 시작됩니다.
  • 내 턴이 오면 기억력을 바탕으로 합이 정확히 21이 되는 카드 3장을 재빠르게 클릭해 뒤집습니다. 가장 빨리 3장으로 21을 완성하는 유저가 플레이 타임(Clear Time)을 기준으로 승리합니다.
시그널 수사 단계 1 시그널 수사 단계 2

7. 시그널 수사 (Signal Investigation - 추리 매칭)

단편적인 증언들을 조합하여 용의자의 직업을 유추하고, 확보한 단서로 진범을 검거하는 추리 게임입니다.

🎯 규칙 및 전략

  • 1단계 (직업 추리): 나열된 문장 파편들을 매칭하여 4명 용의자의 직업을 모두 맞혀야 합니다. 모든 직업을 정확히 맞히면 금고 비밀번호를 획득합니다.
  • 2단계 (범인 검거): 획득한 비밀번호로 금고를 열어 CCTV 스냅샷과 용의자 상세 인명부를 확인합니다.
  • 제공된 증거들을 종합하여 사건의 모순을 찾아내고, 여러 명의 용의자 중 단 한 명의 진범을 지목하여 검거에 성공해야 합니다.

💻 프로그래밍 특징

  • JSON 데이터 기반 사건 관리: 매 게임마다 다른 시나리오와 인물 관계도가 로드되도록 설계되어 재플레이성을 높였습니다.

💡 추가 개발 주안점 (Development Highlight)