[Project] <라이어게임:비밀의문> Game rule 구현하기

JavaScript와 React, webSocket(sockjs, stomp)을 사용하여 라이어게임을 web으로 구현한 방식에 대한 간단한 설명.

이번 포스트는 제가 작성한 방식을 간단하게 설명하는 내용이며 더 좋은 다른 방식이 있을 수 있습니다. 😃
Git : https://github.com/HangHae-TheFinalProject/FrontEnd

라이어 게임의 룰을 살펴보면 크게 몇 단계의 스테이지로 이루어져 있다는 걸 알 수 있다.

• 각 유저에게 할당된 라이어여부/키워드를 공개하는 스테이지
• 각 유저마다 키워드에 대해 발표하는 스테이지
• 라이어로 예상되는 유저를 투표하는 스테이지
• 라이어로 지목된 유저가 정답을 맞추는 스테이지
• 승/패를 출력하는 스테이지

이를 stageNumber라는 변수로 표현하여 게임 룰을 진행한다.
(+) : enum 문을 사용했다면 더 좋았을 것 같다.

일반적인 web은 user interaction에 따른 제어가 대부분이나, 실시간 다대다 통신을 지원하는 웹게임은 websocket으로 전송받는 server 응답에 따라 모든 유저의 stageNumber를 동시에 변경해야한다.

때문에 user interation 또는 timer를 통해 상태가 변경되어야 하는 경우 아래 예시와 같이 서버로 그 내용을 전송하며 stageNumber를 변경하여 게임을 진행하지는 않는다.

// lier를 투표한 경우 그 nickname을 서버로 보내는 역할을 하는 함수.
const vote = (nickname) => {
  if (!client.current.connected) return;

  client.current.publish({
    destination: `/pub/lier/game/${id}/vote`,
    body: JSON.stringify({
      value: nickname,
    }),
  });
};

// 투표 화면 내 onClick 이벤트에 위 vote함수 연결
<figure onClick={() => {vote(member);}}>
  <figcaption>{member}</figcaption>
</figure>

stageNumber는 아래 예시와 같이 서버에서 약속한 값이 전송해주었을 때 변경한다.
아래 예시의 LIER 케이스는 모든 유저가 투표를 마친 후 투표 결과가 라이어를 맞춘 경우 전송되는 값이다.

const subscribe = () => {
  client.current.subscribe(`/sub/gameroom/${id}`, ({ body }) => {
    const data = JSON.parse(body);
    switch (data.type) {
        case 'LIER':
          setStageNumber(7);
        break;
    }
  });
};

위 내용 및 예시는 최대한 간단하게 작성된 내용이며 실제로는 게임에 사용되는 다양한 변수들의 제어가 필요하여 코드가 꽤 길고 복잡해질 수 밖에 없었다.

다양한 형태의 변수를 보다 용이하게 제어하는데에 enum문을 사용했다면 좋을 것 같다.
또한 게임 내 사용되는 다수의 컴포넌트 내에 stageNumber가 사용되므로 enum문을 사용한다면 해당 enum문의 형태를 공용으로 관리하는 파일을 따로 두는 편이 좋았을 것 같다.