📖 목차

• 📅 기간
• 👫 팀원
• 💻 기술 스택
• 🖼 피그마
• 🎶 API 개발
• ⛅ 프로젝트 소개

 

📅 기간

• 2023.02.27 ~ 23.04.07

 

👫 팀원

PART	NAME
Frontend	이채은(팀장)
Frontend	강인주
Frontend	박소현
Backend	이주찬
Backend	이재완
DevOps	이경창

 

💻 기술 스택

Frontend

• React
• TypeScript
• Redux
• Quarks
• Three.js

Backend

• SpringBoot
• Socket
• Pythroch
• Matplotlib
• Librosa
• OpenVidu
• Flask
• MySQL

DevOps

• Jenkins
• Docker
• Nginx
• Blue/Green Deployment

 

✔ 협업 툴

• Git
• Jira
• Notion
• MatterMost
• Figma

 

 

🖼 피그마

 

 

🎶 API 개발

 

 

⛅ 프로젝트 소개

로그인 하여, 홈화면에서 Quick Start를 누르면 게임이 실행됩니다.

게임화면은 이와 같습니다.

로그인 후, Quick Start를 클릭할 시 동시에 접속한 다른 사용자와 게임을 하게 됩니다.

친구 추가 및 친구와 대전 신청이 가능합니다.

• 캐릭터는 이와 같은 것을 볼 수 있습니다.
• 캐릭터 이미지는 AI 도구를 이용해 직접 구현했습니다.

게임에서 사용할 수 있는 덱은 이와 같습니다.

마이페이지에서는 전적, 개인정보, 닉네임 상태메시지, 마이 덱 정보를 조회할 수 있습니다.

• Quick start를 클릭 후, 매칭되는 화면입니다.
• 나의 정보와 상대방의 정보를 볼 수 있습니다.

• 동전 던지기를 통해 공격 선과 후가 결정됩니다.

• COST 현황 : 해당 턴에서 사용 가능한 마나의 양을 조회할 수 있습니다.
• 진행 상태 알림 : 나와 상대방의 진행상태를 비교하여 알림이 표시됩니다.
• 덱 : 유저가 사전에 지정해 둔 마법 카드가 표시됩니다.

• 영창 가이드 : 준비 턴에서 고른 카드의 주문이 표시됩니다.
• 사용자가 영창한(주문을 외치며) 주문을 STT로 비교하여 맞은 부분의 색이 바뀌게 됩니다.
• 준비 턴에서 고른 카드가 표시된 것을 확인할 수 있습니다.

• 스페셜 일러스트 : 콤보 달성 시 캐릭터 별 스페셜 일러스트가 표시됩니다.
• 콤보 영창 : 유저의 감정 분석을 합니다. 분노의 감정이 감지될 경우 공격력이 향상됩니다.

• 불어서 마법진 날리기 : 마이크를 인식해 게이지바 표시합니다. (진행 정도에 따라 효과가 있습니다.)
• 스페이스바 광클로 마법진 부수기 : 스페이스바 인식해 반짝이는 효과 표시합니다. (진행 정도에 따라 효과가 있습니다.)

• HP바 : 공격력, 방어 및 콤보 성공 여부에 따라 체력이 감소합니다.
• 플레이어 중 한명의 HP가 0이 되었을 때 게임이 종료됩니다.
• 마법 이펙트 : 각 마법의 속성에 맞는 이펙트가 표시됩니다. 카메라 시점 변동을 통한 역동감 제공합니다.

• 상대 정보 : 상대방의 닉네임 및 전적이 표시되며, 친구 신청이 가능합니다.
• 퀵 스타트 : 즉시 새로운 게임 매칭이 시작됩니다.