Show GN: edge-yacht - Cloudflare Workers에서 동작하는 멀티플레이어 게임
(yacht.seokmin.dev)안녕하세요, 평소에 GeekNews를 구독만 하고 있었지만, 최근 Cloudflare Developer Challenge (https://challenge.developers.cloudflare.com/)에 참여한 프로젝트를 공유하고 싶어서 글 남깁니다 :)
게임 방법은 메인 화면의 Create Room 버튼을 누르시고, 다음 화면에서 보이는 링크를 공유하시면 됩니다. 해당 링크로 접속한 두 브라우저끼리 세션을 구성하여 멀티플레이어 게임을 진행하고, 이 모든 과정은 Cloudflare Workers에서 일어납니다. 저장소는 이쪽입니다.
https://github.com/SeokminHong/edge-yacht
---
Cloudflare Developer Challenge는 Cloudflare의 프로덕트인 Cloudflare Workers, Cloudflare Pages, Workers KV, Durable Objects들을 2개 이상 활용하여 재미난 작품들을 만들어 투고하는 프로그램인데요, 이러한 프로덕트를 알고 참가하게 된 계기가 GeekNews라서 더더욱 공유하고 싶었네요!
Cloudflare Workers는 서버리스 코드를 글로벌 엣지에 배포할 수 있도록 하고, 웹소켓과 Durable Objects를 통한 coordination을 지원합니다. 실제로, 이를 활용해 이미 온라인 상에서 멀티플레이어 Doom을 돌리는 데모를 시연한 바 있죠. (https://blog.cloudflare.com/doom-multiplayer-workers/) 이에 영감을 받아, 한 달 남짓한 개발 기간 동안 2인용 멀티플레이어 게임을 밑바닥부터 제작해보고자 했습니다.
게임의 디자인과 룰은 닌텐도 스위치의 51 Worldwide Games라는 미니게임 모음의 Yacht을 참고했습니다. 클라이언트에서 게임 상태를 변조할 수 없도록 게임 상태의 뮤테이션은 모두 Workers에서 수행되고, 클라이언트는 자바스크립트 3D 라이브러리 three.js를 활용하여 상태를 시뮬레이션합니다. 개발 기간이 짧아 오디오나 이펙트, 디자인 등에서 타협한 부분이 많지만, 하나의 돌아가는 게임을 완성했기에 여기에 올립니다 ㅎㅎ
와!! 야찌 네요. 주사위만 있으면 할 수 있어서 저도 좋아하는 게임입니다. 완성 축하드립니다.
시험삼아 브라우저 두개로 연결해보니 너무 깔끔하게 잘 실행되네요.
엣지에서 돌아가는 멀티플레이어 게임은 충분히 의미가 있는 것 같아요.