vue canvas websocket

vue+캔버스+웹소켓+없음

캔버스, 웹소켓, 노드를 연습하기 위해 작은 게임을 만들었습니다. 여기를 클릭하면 온라인으로 볼 수 있습니다.

프로젝트 스크린샷

빌드 설정

//clone
npm install
//start server
node app.js
//start vue in another terminal
npm run dev

완료 진행

• 로그인합니다. 로그인 후 사용자 이름은 sessionStorage에 저장됩니다.
• 로그인 후 좌석을 선택하고 ws를 통해 모든 사람에게 좌석을 알릴 수 있습니다.
• 콘텐츠 보내기 로그인 후 ws를 통해 모든 사람에게 입력 콘텐츠를 게시할 수 있습니다.
• 채팅 기록은 모든 사람의 채팅 입력 내용을 수신하고 화면을 지울 수 있습니다.
• 게임을 시작하려면 1층에 있는 게임 시작 버튼을 클릭하면 됩니다. 게임을 시작한 후에는 좌석을 조정할 수 없습니다.
• 차례대로 그림을 그리고 좌석 순서에 따라 그림을 보면서 단어를 추측해 보세요. 그림을 그리는 플레이어는 콘텐츠를 입력하거나 보낼 수 없습니다.
• 어휘 목록에서 무작위로 단어를 선택합니다. 연습용으로 12단어만 썼습니다.
• 전송된 내용이 올바른 단어일 때 특별 표시됩니다(게임 시작 후 유효).
• 점수 유지
• 멀티룸 게임
• 모바일 단말기