socket.io, svelte 및 node를 사용하여 멀티플레이어 영화 퀴즈/퀴즈 게임을 만들어 봅시다. 데브로그 #8

404 영감을 찾을 수 없습니다..

그래서 저는 UI 디자인이 정말 형편없었습니다. 멀티플레이어와 싱글플레이어 게임 모두에서 온라인 퀴즈 게임을 시도하여 아이디어를 얻으려고 했습니다.

글쎄요.. 전혀 도움이 되지 않았습니다. UI 디자인에 대한 영감을 얻지 못했습니다. UI뿐만 아니라 일부 UX의 경우 정말 나쁜 대부분의 게임은 전혀 좋지 않았습니다. 어떤 사람들은 모든 플레이어가 응답했더라도 카운트다운 동안 앉아 있어야 했습니다.

일부는 멋진 UI를 가지고 있었지만 저와 제가 만들고 있는 것에 정말 맞는 것은 없었습니다.

무언가를 짜맞추기 전에 UI에 대해 좀 더 생각해야 할 것입니다.

여전히 여러 페이지로 나누고 SPA 라우터를 사용해야 하는지 생각하고 있습니다. 이전에 Svelte에서 소켓 코드를 사용한 적이 없고 소켓 코드를 처리하는 방법을 잘 모르겠습니다. 지금은 구성 요소로 유지하고 작업을 더 쉽게 만듭니다.

진행...채팅

음, 테스트용으로 채팅을 추가했습니다. Svelte 구성 요소는 완료되기 전에 훨씬 더 많은 작업이 필요하지만 작동합니다.
백엔드 코드는 지난 로그에 기록된 것처럼 간단합니다. 코드 한 줄만 있으면 작동합니다. 2개는 글로벌 채팅용이고 다른 하나는 게임 채팅용입니다.

아래는 그에 대한 코드입니다.

socket.on('game-chat', (msg, gameid) => socket.to(games.get(gameid).id).emit('game-chat', msg));
socket.on('global-chat', (msg, name) => socket.broadcast.emit('global-chat', msg, name, avatar));

나중에 글로벌 채팅에 대한 모든 인수를 개체로 대신 던질 것이지만 지금은 충분합니다.

게임 목록

서버에서 열린 게임이 포함된 게임 목록을 가져오는 간단한 구성 요소를 만들었습니다. ofc는 나중에 더 많은 CSS 작업과 적절한 코드가 필요하지만 그 전에 일부 다른 논리를 리팩토링하므로 게임 참여를 위한 중복 논리가 없습니다.

구현 방법도 모르겠고.. 그냥 모달로 표시하는 것에 대해 생각하고 있었지만 모바일에서는 그렇게 좋지 않을 것입니다... bleeh UI, 정크.

최종 게임 결과

최종 게임 결과를 Game 클래스에서 총 점수 및 게임 위치와 함께 컴파일하기 위한 논리를 작성했습니다. 게임이 끝나면 종료 라운드 화면이 표시되지 않으므로 마지막 라운드의 결과도 표시됩니다.

지금까지의 Svelte 구성 요소는 간단하고 예, 최종은 아니지만 하하 최소한 결과를 볼 수 있습니다.

다가오는

게임 생성 시 게임 설정 화면 구성 요소입니다.

지금까지의 진행...

대부분의 서버 측 논리가 제자리에 있다고 생각하고 필요할 때 여기 저기 들어가서 몇 가지 기능과 변경 사항을 추가합니다.

프론트엔드에서는 정반대입니다. 실제로 수행된 작업은 아무 것도 없는 것처럼 빠르게 함께 던지는 것입니다. 피곤한 부분이 남아 있습니다 .. 멋진 CSS를 표시하기 위해 어리석은 CSS로 조롱합니다 ... bleeh ..

현재 할 일 목록

고객

빌드 결과 구성 요소 -시작됨

최종 게임 구성요소 빌드 -시작됨

빌드 게임 목록 구성 요소 -시작됨

몇 가지 질문 구성 요소 빌드 -시작됨

빌드 채팅 구성 요소 시작됨

빌드 로드 구성 요소

게임 설정 구성 요소 생성

사전 로드 로직 구현

섬기는 사람

채점 시스템 - 예제 완료

질문 생성기 - 예제 완료

라운드 결과를 클라이언트로 전송 -완료

게임 결과를 클라이언트로 전송 -완료

게임 목록 요청 처리기 -완료

게임 채팅 추가 -시작됨

질문용 논리 사전 로드

라운드 점수를 게임 개체 내부의 플레이어 개체로 이동합니까? -완료

오버앤아웃... 일단은 여기까지..!!!

어제는 또 다른 redis 해커톤 제출에 대해 생각했습니다. 이 프로젝트를 사용하고 redis에서 질문을 로드하면 됩니다.

동시에 나는 마감일 전에 모든 것을 끝내야 한다는 압박을 받을 것입니다. 이 프로젝트는 시간이 걸릴 것입니다.

가끔은 내가 왜 이걸 만들고 있는지 의구심이 들기도 합니다. 이미 너무 많은 퀴즈 게임과 것들이 있습니다. 그래서 미완성 프로젝트 더미에 빠지지 않도록 마무리하려고 노력할 것입니다. 많은 것들이 있습니다.. 히..

내 다른 쓰레기를보고 싶니?? 내 새 제품portfolio site을 확인하세요.