2026 Digitalarts Tetris

데스크탑·랩탑 브라우저에서 키보드로 즐기는 초고속 테트리스 웹 게임입니다. 조각이 나오자마자 바닥에 꽂히는 20G 방식이라, 락 딜레이(0.5초, 이동·회전 시 최대 15회 연장) 안에 밀고 돌려서 자리를 잡아야 합니다. 빌드 도구 없이 순수 HTML / CSS / JavaScript로 만들어져 있어 로컬 및 Vercel 등 정적 호스팅에 그대로 올릴 수 있으며, Cloudflare Worker + D1 Database를 통한 실시간 온라인 랭킹 시스템이 기본 연동되어 있습니다.

---

🎮 주요 기능

• 표준 가이드라인 & SRS All-Mini 룰: 7-bag 랜덤, SRS 회전(월 킥), All-Mini 룰(모든 미노 스핀 인정 & B2B 유지), 고스트 피스, 홀드, NEXT 프리뷰
• 즉시 낙하 (20G): 레벨 선택 없이 Enter 한 번으로 바로 시작하는 스릴 넘치는 초고속 게임 플레이
• 점수 및 레벨링: 점수 구간마다 레벨 상승(L2 1,000 / L3 3,000 / L4 6,000 / L5 10,000 …, 최대 20), 레벨이 오를수록 락 딜레이가 0.5초에서 40ms씩 줄어 최소 0.16초까지 단축
• 조작감 최적화: 락 딜레이 + 무브 리셋(15회), DAS/ARR 키 반복으로 바닥에서 미끄러뜨리기
• 실시간 온라인 랭킹 (Cloudflare D1):
  • 전 세계/행사장 플레이어의 실시간 점수 등록 및 TOP 20 랭킹 조회
  • 기록 달성 일시 표시: 상대 시간("방금 전", "오늘 14:30", "10.11 12:30") 및 마우스 호버 시 상세 일시 툴팁 제공
  • 네트워크 단절 시 게임 중단 없이 localStorage 기반 로컬 랭킹으로 자동 폴백
• 실시간 라이브 채팅창 (Cloudflare D1):
  • 랭킹 바로 옆에 사이드 바이 사이드로 배치된 실시간 응원톡 & 소감 채팅창
  • 원클릭 빠른 이모지(🔥, 👏, 💖, 🎮, 🚀, 😱) 반응 지원
  • 닉네임 자동 기억 및 테트리스 랭킹 닉네임과 상호 연동
  • 증분 폴링(Incremental Polling)을 통한 실시간 대화 동기화 및 부드러운 오토스크롤
  • 게임 플레이 중 네트워크 대역폭 보호를 위한 지능형 폴링 일시정지/재개
• 비주얼 & 디자인: 검정 보드 + 밀키 핑크 도트 배경, 테트리스(4줄) 클리어 시 하트 버스트(Heart Burst) 애니메이션, Unbounded & Space Mono 서체
• 오디오 & 멀티 BGM 선택:
  • Web Audio 실시간 신디사이저 기반 사운드 시스템 (효과음 + BGM)
  • 4종 멀티 BGM 트랙 선택 기능:
    • Type A: Korobeiniki (클래식 오리지널 테마)
    • Type B: Troika (경쾌한 게임보이 테마 B)
    • Type C: Kalinka (신나는 축제 댄스 테마)
    • Type D: Cyber Pulse (네온 신스웨이브 아르페지오)
  • 상단 탑바 드롭다운 메뉴, 시작 화면/일시정지 화면 전용 트랙 셀렉터 및 단축키(B) 지원
• 전체화면 모드 (F 키): 행사장 키오스크·프로젝터 디스플레이 지원

---

⌨️ 조작법

키	동작
← →	이동
Space	즉시 고정 (하드 드롭)
↑ / X	시계 방향 회전
Z / Ctrl	반시계 방향 회전
C / Shift	홀드
B	BGM 곡 변경 (다음 트랙)
M	효과음 토글
P / Esc	일시정지
R	다시 시작
F	전체화면
Enter	시작 / 계속 / 랭킹 등록

---

💻 로컬 실행

정적 파일 기반이므로 별도의 빌드 과정 없이 웹 서버로 바로 실행할 수 있습니다.

python3 -m http.server 8766

브라우저에서 http://localhost:8766 접속 시, 배포된 Cloudflare Worker와 자동 연동되어 바로 실시간 온라인 랭킹을 이용할 수 있습니다.

---

☁️ Cloudflare 연동 현황 (D1 & Worker)

본 프로젝트는 Cloudflare의 Serverless 백엔드 및 분산 SQLite 데이터베이스(D1)와 연동되어 있습니다.

연동 인프라 정보

• Database: Cloudflare D1 digitalarts-tetris (86d8182b-aee4-4671-82c5-d751ec75a2ce)
• Worker 엔드포인트: https://digitalarts-tetris.hjahn0523.workers.dev/api/ranking
• 테이블 상태: rankings 테이블 및 인덱스(idx_rankings_score) 구성 완료
• 프론트엔드 설정: js/config.js의 RANKING_API_URL에 배포된 Worker 주소가 기본 설정되어 있어, 어떤 환경에서 접속하든 D1 온라인 랭킹이 즉시 작동합니다.

Worker 재배포 및 D1 관리 명령어

# Cloudflare Worker 재배포
npx wrangler deploy

# 원격 D1 테이블 데이터 확인
npx wrangler d1 execute digitalarts-tetris --remote --command="SELECT * FROM rankings ORDER BY score DESC LIMIT 10;"

# 스키마 재적용이 필요한 경우
npx wrangler d1 execute digitalarts-tetris --remote --file=schema.sql

---

🚀 배포 가이드

1. Cloudflare Pages로 배포 시

1. Cloudflare 대시보드에서 GitHub 저장소(banwol12/2026_festival_Tetris_Game) 연결
2. Framework Preset: None (정적 디렉터리 배포)
3. Settings > Functions > D1 Database Bindings에서:
   • Variable Name: DB
   • D1 Database: digitalarts-tetris 바인딩을 연결하면 functions/api/ranking.js가 활성화되어 풀스택 Pages로 구동됩니다.

2. Vercel 배포 시

1. https://vercel.com/new 에서 저장소 Import
2. Framework Preset: Other, Build/Output 설정은 비워두고 배포
3. 클라이언트가 기본적으로 Cloudflare Worker API를 직접 호출(CORS 허용)하므로 별도 서버 설정 없이 온라인 랭킹이 즉시 연동됩니다.

---

📁 프로젝트 구조

├── index.html                 # 메인 마크업 (게임 아레나, 3단 HUD, 전체화면 오버레이)
├── css/
│   └── style.css              # 밀키 핑크 도트 배경, 사이버 네온 테마, 하트 버스트 애니메이션
├── js/
│   ├── config.js              # 20G 설정, SRS 회전 테이블, 점수 규칙, Cloudflare Worker API URL
│   ├── game.js                # 테트리스 엔진 (7-bag, 20G 즉시 낙하, 락 딜레이 단축, 라인 클리어)
│   ├── render.js              # Canvas 렌더러 (보드, 고스트, 홀드/넥스트 프리뷰)
│   ├── input.js               # 키보드 입력 및 고속 DAS/ARR 처리
│   ├── audio.js               # Web Audio 합성 효과음 및 BGM 사운드 엔진
│   ├── chat.js                # 실시간 라이브 채팅 클라이언트 (증분 폴링, 오토스크롤, 이모지)
│   └── main.js                # UI 상호작용, 하트 버스트, Cloudflare D1 랭킹 비동기 동기화
├── worker.js                  # Cloudflare Worker REST API (/api/ranking, /api/chat)
├── wrangler.toml              # Cloudflare Worker & D1 데이터베이스 바인딩 설정
├── schema.sql                 # D1 rankings & chat_messages 테이블 및 인덱스 DDL
├── functions/api/
│   ├── ranking.js             # Cloudflare Pages Functions 풀스택 랭킹 API
│   └── chat.js                # Cloudflare Pages Functions 풀스택 채팅 API
├── .cursor/mcp.json           # Cursor IDE용 Cloudflare Remote MCP 설정
├── .vscode/mcp.json           # VSCode용 Cloudflare Remote MCP 설정
└── .agents/skills/            # Cloudflare 공식 Agent Skills (Wrangler, D1 등)