FastMind는 창의적이고 상호작용이 풍부한 웹 애플리케이션입니다. 이 프로젝트는 그림판과 게임, 채팅 기능을 통합하여 아래 두 가지 주요 방식으로 사용됩니다.
- 게임 모드: 사용자 중 한 명이 출제자가 되어, 퀴즈를 내고 관련된 그림을 그립니다. 그 후, 다른 참여자들이 그림을 바탕으로 퀴즈의 답을 맞추는 대화형 웹 게임입니다.
- 협업 모드: 사용자들은 그림판에 직접 그림을 그리며, 실시간으로 공유하고 채팅을 통해 아이디어를 교환합니다. 이 모드는 회의, 브레인스토밍, 또는 일반 대화에 이상적으로 활용됩니다.
프론트엔드는 이곳을 클릭해 주세요.
채팅 서버는 이곳을 클릭해 주세요.
피그마는 이곳을 클릭해 주세요.
그림판
- 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