부엉이 게임 파일럿 ( 5, 완 ) - 성공적인 행사

 

부엉이 게임 파일럿 기록 처음부터 보기 : https://helloworld.ai.kr/22

부엉이 게임 파일럿 ( 1 ) - 회고

 

개발 중 맞닥뜨린 문제

문제

 Next.js로 게임 플레이 페이지를 Vercel에 배포. 게임을 테스트하고 있는데 제한시간 타이머가 자꾸 왔다갔다 하는 불쾌한 버그 발생. 50:00 제한 시간인데, 타이머가 50:00->36:48->50:00->36:46 이런 식으로 초기 시간과 정상적인 시간을 오갔다. 초기 시간일 때는 행동을 할 수 없도록 막아두어서 플레이 페이지의 기능이 활성화되었다가 비활성화되었다를 반복했다.

해결

 제한시간을 서버 인메모리에서 관리하는 것이 문제였다. 서버 인메모리에서 타이머 시작 시간을 저장해두고, 클라이언트에서 2초 간격으로 폴링 요청 시 이 타이머 시작 시간을 내려주는 식이다. 근데 Next.js Vercel 배포는 서버리스 방식이라 뭔가를 서버 인메모리에 저장해두고 관리하는 방식은 부적절하다. 서버 인스턴스를 직접 관리할 수가 없기 때문.

 아마 타이머가 오락가락 했던 것은 다음의 시나리오였던 것으로 추정된다. 타이머가 재생되고 있는 인스턴스와 타이머가 초기화되어 있는 인스턴스 2개가 있다. 클라이언트의 폴링 요청을 각 인스턴스가 번갈아가면서 답한다. 클라이언트 타이머는 재생 중인 상태와 진행되는 상태를 오간다.

 타이머의 시작 시각을 DB에서 관리하도록 수정했다.

 서버리스에 특정 상태를 저장해둔다는 게 당연히 하면 안 되는 짓인데 급하게 구현하다보니 까먹었다.

게임 페이지 완성

무사히 각 페이지를 완성했다. 게임별로 플레이 페이지를 정리해보겠다.

이상교통 8번출구

• 상단의 타이머는 DB에 있는 시작 시각을 기준으로, 폴링 방식으로 동기화된다.
• 중앙의 이미지를 보고 플레이어는 앞으로 간다, 뒤로 돌아간다 둘 중 하나를 선택할 수 있다.
• 폴링 방식으로 동기화되어 같은 장소에 있는 플레이어를 알 수 있다.

 

자본주의 마피아

• 게임의 진행 상황을 확인할 수 있다.
• 주식을 사고 팔거나 능력을 사용할 수 있다.

디펜스 딜레마

• 현재 게임 상황을 확인할 수 있다.
• 몬스터 정보를 확인할 수 있다.
• 내 행동을 선택할 수 있다.

성공적으로 행사 진행

게임 플레이 페이지를 잘 만들고, 본 행사에서 잘 활용할 수 있었다.

1회차 행사 후기 : https://blog.naver.com/ddoddony/224122385685
2회차 행사 후기 : https://blog.naver.com/ddoddony/224161743592