게임 소개

한 줄 소개

Online 2P Snake — "브라우저에서 바로 즐기는 실시간 온라인 2인 스네이크 대전."

설치 없이 링크만 열면 두 명이 실시간으로 맞붙는 스네이크 대전. 각자 다른 브라우저·다른 기기에서 접속해도 권위 서버(Durable Object) 가 하나의 게임 상태를 소유하므로 두 화면이 완벽하게 동기화된다.

게임 개요

항목	내용
장르	아케이드 / 실시간 멀티플레이 대전
플랫폼	웹 브라우저 (HTML5 Canvas · PWA · 모바일 터치 지원)
설치	불필요 — URL 접속 즉시 플레이
모드	1P · 2P-로컬(한 키보드 공유) · 2P-온라인(권위 서버 · 매치메이킹 · 리더보드) · vs AI(AI 상대와 대전)

플레이 모드

• 1P — 혼자서 먹이를 먹으며 최고 점수에 도전하는 클래식 모드.
• 2P-로컬 — 한 대의 기기·한 개의 키보드를 나눠 쓰는 오프라인 2인 대전(P1 WASD / P2 방향키).
• 2P-온라인 — 서로 다른 기기에서 접속해 실시간 대전. 방 생성 후 코드 공유 또는 퀵매치로 상대를 매칭하고, 로그인 시 리더보드·유저네임이 반영된다.
• vs AI 🤖 — 사람 상대가 없어도 AI 상대와 대전. 규칙기반 난이도(easy/medium/hard)부터 심층강화학습(DQN)으로 학습한 브레인까지 같은 계약으로 스왑된다. 설계·학습 방법은 AI 상대 (DL-AI) 참고.

게임 방법 (목표 · 조작 · 종료 조건)

목표

먹이를 먹어 뱀을 키우면서, 상대를 벽·몸 충돌로 유도해 살아남는다.

규칙

• 먹이를 먹으면 뱀이 1칸 성장하고 새 먹이가 랜덤 위치에 생성된다.
• 온라인 모드에서는 서버가 소유한 단일 게임 상태를 기준으로 먹이 생성·성장·충돌 판정이 이뤄진다(클라이언트 간 불일치 없음).

종료(승패) 조건

• 뱀의 머리가 벽 / 자기 몸 / 상대 몸에 충돌하면 패배.
• 양쪽이 동시에 충돌하면 무승부.

조작

• P1(Green): W A S D
• P2(Blue): ↑ ↓ ← →
• 온라인: 각 플레이어는 자기 뱀만 조작하며, 방향키·WASD 어느 쪽으로도 입력 가능.
• 모바일: 화면 터치/스와이프 방향 입력 지원.
• 180° 즉시 회전 방지: 진행 방향의 정반대 입력은 무시된다(자기 목에 부딪혀 즉사하는 것을 방지).

기본 설정값

파라미터	값
플레이 필드	800 × 600
그리드 셀	20px
초기 뱀 길이	3칸
게임 tick	150ms

실행 방법

• 플레이 링크(설치 불필요): https://snake.microwiseai.com
• 온라인 대전 흐름:
  1. 온라인 모드 선택 → 방 생성 후 코드 공유, 또는 퀵매치로 랜덤 상대 매칭.
  2. 상대 입장 시 양쪽 화면에서 카운트다운 후 동시 시작.
  3. (선택) Firebase Google 로그인 시 유저네임·리더보드 점수가 반영된다.

기술 스택 개요

레이어	스택
클라이언트	TypeScript · Vite · HTML5 Canvas · PWA(모바일 터치)
실시간 서버	Cloudflare Workers · Durable Objects(권위 GameDO / 매치메이킹 / 로비)
데이터	Cloudflare D1(점수 · 유저네임)
인증	Firebase Auth(Google 로그인 · 안정 uid)
네트코드	플러그블 전략 — raw(스냅샷) / interpolated(60fps 보간 + 서버 리컨실리에이션)

전체 시스템은 20개의 독립 저장소(MWD) — 핵심·온라인 인프라 + 🤖 AI 상대(DL-AI) 트랙 — 로 구성되어 있으며, 순수 도메인(core)은 프레임워크에 의존하지 않는다. 구조 상세는 아키텍처 개요 · 저장소 지도 · AI 상대 참고.

기술 하이라이트 티저

"초기 P2P의 상태 불일치 버그를 권위 서버(Durable Object) 로 재설계해 해결 → 두 브라우저가 완벽 동기화."

이 게임이 어떻게 만들어졌는지 — AI 오케스트레이션과 MWD 툴체인으로 설계·구현·배포한 과정 — 는 개발 개요와 MWD 도구 & AI 자동화 프롬프트에서 다룬다.