Hidden Catch – WebRTC 실시간 차이찾기 게임

WebRTC P2P 연결을 활용하여 실시간으로 두 명이 같은 이미지를 보며 차이 찾기 게임을 즐길 수 있는 프로젝트입니다. Node.js + Express + WebSocket(Signaling Server)로 구성되며, 브라우저 간 실시간 동기화를 제공합니다.

---

프로젝트 개요

이 프로젝트는 다음 기능을 목표로 제작되었습니다:

• 브라우저 간 실시간 게임 동기화(WebRTC DataChannel)
• 방번호 기반 P2P 연결
• 차이 찾기 이미지 8세트 제공
• 클릭 좌표를 상대 플레이어에게 전송하여 실시간 반영
• 간단한 로비 UI + 게임 UI 구성

---

기술 스택

Frontend

• HTML / CSS / JavaScript
• WebRTC (RTCPeerConnection, DataChannel)
• Canvas 기반 클릭 UI

Backend

• Node.js
• Express
• WebSocket(ws) — WebRTC 시그널링 처리
• nodemon (개발 자동 재실행)

---

아키텍처 구조

[ Browser A (client) ]                     [ Browser B (client) ]
  - game.js (WebRTC, DataChannel)              - game.js (WebRTC, DataChannel)
  - Canvas rendering, click 처리                - Canvas rendering, click 처리
        \                                          /
         \-- WebSocket (Socket.io signaling) ----/
                       |
                   [ Node.js Server ]
                   - app.mjs (Express + Socket.io)
                   - 방 관리, offer/answer/ice 중계
                   - game events (start-game, found-difference, next-stage, game-over)

---

게임 동작 방식

1) 로비 화면

• 방 번호 입력 → 입장
• 방 번호 없이 “방 만들기” → 자동 생성 후 /game.html?room=xxxxxxx로 이동
• 다른 브라우저(혹은 탭)에서 같은 방 번호로 입장하면 연결됨

2) 게임 화면

• WebRTC PeerConnection 생성
• offer/answer를 signaling server를 통해 교환
• DataChannel 생성 후 실시간 통신
• 양쪽 화면에 “차이 찾기 이미지” 표시
• 플레이어가 클릭하면 상대방 화면에도 동기화

---

실행 방법

1) 패키지 설치

npm install

2) 개발 서버 실행

npm run dev

또는

node app.mjs

3) 접속

브라우저에서:

http://localhost:3000/lobby.html

---

주요 기능 상세 설명

✔ WebRTC P2P 연결

• 시그널링 서버는 Peer 연결 설정용 메시지만 중계
• 실제 데이터는 DataChannel을 통해 P2P로 전송
• 클릭 좌표, 성공 여부 등 실시간 공유

차이 찾기 이미지 로딩

leftImg.src = `/img/quiz${quizNumber}_left.png`;
rightImg.src = `/img/quiz${quizNumber}_right.png`;

정답 좌표 판정

정답 좌표 배열을 미리 저장해두고 클릭 지점이 범위 내인지 판정함.