RuleAdd

한국어 · English

룰이 한 줄씩 늘어나는 3D 회피 퍼즐. 흰 구를 움직여 다가오는 벽의 빈 칸으로 빠져나가세요.

▶ 지금 플레이 — rule-add.netlify.app

---

이게 뭔가요?

RuleAdd 는 WebGL(three.js) 로 만든 3D Hole-in-the-wall 회피 퍼즐입니다. Chrome 공룡 미니게임의 3D 발전형으로, 흰 배경 위 흰 구(플레이어)를 좌우로 움직여 Z축에서 다가오는 벽의 빈 칸(gap) 으로 통과합니다.

핵심은 이름 그대로 룰이 점차 추가된다(Rule + Add) 는 것. 라운드가 오를 때마다 새 룰이 우측 패널에 하나씩 쌓이고, 게임은 점점 머리를 써야 하는 공간지각 + 논리 퍼즐이 됩니다. 벽 속도로 어렵게 만들지 않습니다 — 난이도는 오직 누적되는 룰에서 나옵니다. 끝은 없고, 살아남아 하이스코어를 노리는 게임입니다.

핵심 메커니즘

• 벽이 다가오며 일부 칸을 막고 최소 1칸의 빈 칸(gap) 을 남깁니다.
• 구를 빈 칸으로 옮겨 통과하세요. 막힌 칸에 부딪치면 목숨이 줄고, 0이 되면 게임오버.
• 벽 1세트를 통과할 때마다 점수가 쌓이고, 10세트마다 라운드가 오르며 새 룰이 활성화됩니다.

조작법

키	동작
A / D	좌 · 우 이동
W / S	상 · 하 이동 (2차원 모드)

룰 — 라운드마다 하나씩 누적

뒤에 추가된 룰이 충돌 시 우선합니다(later-wins).

룰	효과
룰 1	벽에 부딪치면 죽는다. 좌우 이동.
룰 2	화살표가 붙은 벽은 근접 시 화살표 방향으로 1칸 이동.
룰 3	특정 색 벽은 화살표가 있어도 움직이지 않는다(정지).
룰 4	특정 색 벽은 구와 충돌하지 않는다(통과).
룰 5	ⓧ 마커 벽이 그 방향으로 자라난다 — 빈 칸처럼 보이는 함정.
룰 6	그리드가 한 변 +1 확장 (4칸 → 5칸, 4×4 → 5×5).
라운드 7+	무한 진행 — 속도 +5% / 추가 확장 / 새 색 룰(반대 방향 포함)이 계속 추가됩니다.

난이도 5종

모드	특징
쉬움	느린 속도 · 목숨 5 · 진행 룰 느슨
보통	기본 속도 · 목숨 3 · 라운드마다 룰 점진 추가
어려움	빠른 속도 · 목숨 3 · 모든 정적 룰로 시작(5칸)
블라인드	보통과 같지만 룰 패널을 숨김 — 직접 간파해야 함
2차원	처음부터 4×4 그리드 + 상하(W/S) 조작 추가

점수 & 랭킹

• 세트 통과 시 기본점(100) × 라운드² — 후반 라운드일수록 점수가 급증합니다.
• 게임오버 시 로컬 top5 와 글로벌 top10(Firebase) 에 이름·코멘트와 함께 기록됩니다.
• 한국어 / English 전환 지원.

기술 스택

• three.js — WebGL 3D 씬 / 카메라 / 메시
• TypeScript + Vite — 타입 안전 + 빠른 dev 서버 / 번들
• Firebase — 글로벌 리더보드
• 배포: Netlify (rule-add.netlify.app)

룰은 데이터 주도(data-driven)로 설계되어, 새 룰을 {appliesTo, modify} 데이터 객체로 끼워넣기만 하면 엔진이 누적 순서대로 적용합니다.

로컬에서 실행

npm install
npm run dev        # Vite dev 서버 (브라우저에서 플레이)
npm run build      # 타입체크 + 프로덕션 빌드
npm run typecheck  # 타입체크만

글로벌 리더보드를 쓰려면 .env.example 을 참고해 Firebase 설정을 .env 에 채우세요. 설정이 없어도 게임 자체와 로컬 점수 기록은 동작합니다.

크레딧

Computer Graphics 개인 과제 — youner119