패스트캠퍼스 토이프로젝트2 한조팀의 FastMind 게임 💻 백엔드

📝 프로젝트 소개

FastMind는 창의적이고 상호작용이 풍부한 웹 애플리케이션입니다. 이 프로젝트는 그림판과 게임, 채팅 기능을 통합하여 아래 두 가지 주요 방식으로 사용됩니다.

1. 게임 모드: 사용자 중 한 명이 출제자가 되어, 퀴즈를 내고 관련된 그림을 그립니다. 그 후, 다른 참여자들이 그림을 바탕으로 퀴즈의 답을 맞추는 대화형 웹 게임입니다.
2. 협업 모드: 사용자들은 그림판에 직접 그림을 그리며, 실시간으로 공유하고 채팅을 통해 아이디어를 교환합니다. 이 모드는 회의, 브레인스토밍, 또는 일반 대화에 이상적으로 활용됩니다.

프론트엔드는 이곳을 클릭해 주세요.
채팅 서버는 이곳을 클릭해 주세요.
피그마는 이곳을 클릭해 주세요.

🛠️ 기술 스택

FrontEnd

Development

CI/CD

Design

Chatting BackEnd

Language

Framework

DB

Infra

CI/CD

Game BackEnd

Language

Framework

Infra

📚 주요 로직

그림판

• Canvas API: 본 프로젝트의 그림판 기능은 HTML5의 Canvas API를 활용하여 구현되었습니다.
• 실시간 통신: 실시간 사용자 상호작용을 위해 Socket.io를 사용하였으며, 사용자 간의 그림 데이터 공유 및 통신을 위해 자체적으로 구축한 백엔드 서버에 연결합니다.
• 서버 배포: 프로젝트의 백엔드 서버는 Heroku를 통해 배포되었습니다. node.js/Express/Babel 등을 사용했습니다.

주요 기능

• 색상 선택: 사용자는 다양한 색상 팔레트에서 마음대로 색을 선택할 수 있습니다.
• 그리기 도구: 부분 지우개와 전체 지우기 기능을 통해 사용자는 쉽게 그림을 수정할 수 있습니다.
• 굵기 조절: 사용자는 선의 굵기를 자유롭게 조절하여 다양한 표현을 할 수 있습니다.

그림판에서의 사용자 작업은 다음과 같은 형식으로 서버로 전송됩니다.

originalMousePosition: {
  x: number;
  y: number;
};
  newMousePosition: {
  x: number;
  y: number;
};
  option: {
    color: string;
    lineWidth: number;
    roomId: string;
  };

• originalMousePosition: 현재 마우스 위치 (x, y 좌표)
• newMousePosition: 새로운 마우스 위치 (x, y 좌표)
• option: 작업 옵션 (선택된 색상, 선의 굵기, 방 ID)

게임 로직

• 유저 진입 시 게임 소켓에 연결하고 roomId를 기준으로 방을 선정해 유저를 나눕니다.
• 게임 시작 버튼 클릭 시 퀴즈 배열의 roomId번 인덱스에 클릭한 클라이언트의 쿠키 내 userId를 지정합니다.
• 게임 시작 버튼 클릭 후 모달 내 답안 입력 시 정답 배열의 roomId번 인덱스에 정답을 설정합니다.
• 채팅을 친 유저, 채팅 값, roomId와 쿠키 내 userId을 서버에 보냅니다.
• 만약 답변을 한 유저가 퀴즈 배열의 roomId번 인덱스와 다르고 답변을 한 유저의 답안이 정답 배열의 roomId번 인덱스와 같다면, 출제자가 아니면서 답변을 맞혔다는 뜻이므로 해당 하는 방 내 모든 클라이언트들에게 승자를 선정해 데이터를 보냅니다.
• 다음 게임을 위해 서버에서는 해당하는 roomId번 인덱스의 퀴즈 배열과 정답 배열을 초기화 해줍니다.
• 승자 데이터가 쿠키 내 userId와 같다면 정답을 맞혔다는 모달을 띄워줍니다.
• 다르다면 타 유저가 정답을 맞혔다는 모달을 띄워줍니다.
• 이 후, 게임 시작 버튼 클릭 시 게임이 재시작 됩니다.
• ⏰ 게임 중, 언제든 게임 시작 버튼을 눌러도, 해당하는 roomId번 인덱스의 정답 배열 및 퀴즈 배열의 덮어씌움으로 언제든 재 시작이 가능합니다.

🖌️ 프로젝트 아키텍처

🧑🏻‍💻 팀 소개

장호진 (FE & BE)	양재혁 (FE & BE)	소유나 (FE & BE)
leHiHo	yangjaehyuk	seacrab808
게임 로직 게임 소켓 배포	게임 로직 게임 소켓	그림판 소켓 게임 서버

📆 기간

2023.11.06 ~ 2023.11.17