주사위 수박게임 “다이스 드랍” 설계

2026-07-13

목적

동호회원들이 홈페이지에 가입하고 재방문하게 만드는 두 번째 미니게임. 2048 리더보드가 검증한 경쟁 심리를 재활용한다. 완성 후 카톡 단톡방에 링크를 공유해 유입시킨다.

게임 규칙

수박게임(Suika Game) 방식의 물리 낙하 퍼즐.

• 플레이어는 컨테이너 위에서 공을 좌우로 움직여 떨어뜨린다. 조작: 터치/마우스 드래그로 좌우 이동, 놓으면 낙하. 모바일 우선.
• 같은 단계의 공 두 개가 닿으면 다음 단계 공 하나로 합체한다.

• 진화 단계 (9단계, 물리적으로는 전부 원):

  단계	이름	합체 점수
  1	d4	— (합체로 생성되지 않음)
  2	d6	3
  3	d8	6
  4	d10	10
  5	d12	15
  6	d20	21
  7	d30	28
  8	d100	36
  9	장단콩 (최종)	66

  점수는 합체로 새 공이 생성될 때 그 결과 단계의 점수를 얻는다. 장단콩 두 개가 닿으면 둘 다 소멸하고 66점을 다시 얻는다.

• 떨어뜨리는 공은 1~5단계(d4~d12) 중 랜덤. 다음 공 미리보기 1개 표시.
• 게임오버: 공이 상단 경계선 위에 일정 시간(약 2초) 머물면 종료.
• 렌더링: 캔버스에 색깔 원 + 라벨 텍스트(“d8” 등). 단계별 고유 색과 크기(단계가 오를수록 반지름 증가). 이미지 에셋 없음. 최종 단계만 콩 이모지/라벨로 구분.

기술 구성

• 물리엔진: Matter.js (CDN). 원형 강체, 중력, 충돌만 사용.
• 새 파일:
  • suika.html — game.html 구조 복제 (레이아웃/리더보드 마크업).
  • assets/js/suika-logic.js — 순수 로직: 단계 테이블, 합체 규칙, 점수 계산, 주차 키 계산. DOM/Matter.js 의존 없음. 테스트 대상.
  • assets/js/suika-logic.test.mjs — 순수 로직 테스트 (2048 테스트와 같은 방식, node --test).
  • assets/js/suika.js — 컨트롤러: Matter.js 연결, 입력 처리, 렌더, Firestore 점수 제출, 리더보드 표시.
• 스타일: assets/css/board.css 등 기존 스타일 재활용, 게임 전용 스타일은 2048 방식을 따라 추가.

리더보드

• Firestore 컬렉션 suika_scores/{uid}:

  { nickname, best, weekBest, weekKey, updatedAt }
  

• 점수 제출 시:
  • best보다 높으면 갱신.
  • 현재 주차 키(ISO 주차, 예: “2026-W29”)가 저장된 weekKey와 다르면 weekBest를 새 점수로 교체하고 weekKey 갱신 — 크론 없이 주간 리셋이 이뤄진다.
• 리더보드 UI: 기존 2048 리더보드 마크업/스타일 재활용. 탭 2개:
  • 전체: best 내림차순 TOP 10.
  • 이번 주: weekKey가 현재 주차인 문서만 weekBest 내림차순 TOP 10.

접근 제어

2048과 동일: requireApproved — 승인된 회원만 플레이/기록.

네비게이션

_config.yml navigation에 2048 옆 항목 추가 (제목: “다이스 드랍”, url: /suika).

테스트

• 순수 로직(suika-logic.js)은 node --test로 단위 테스트: 합체 규칙, 단계별 점수, 주차 키 계산(연말 경계 포함).
• 물리/렌더는 수동 확인: 모바일 터치 조작, 게임오버 판정, 점수 제출과 리더보드 갱신.

하지 않는 것

• 비로그인 플레이 (회원 전용 유지)
• 사운드, 파티클 등 연출
• 이미지 에셋 (도형 + 텍스트 렌더링)
• 서버 측 점수 검증 (동호회 규모에서 불필요)

구현 노트

구현은 Sonnet 5 서브에이전트로 진행한다 (사용자 지시).