스텝와이즈 교실 · 무한 계단

개요

Three.js를 활용하여 제작된 3D 체험형 교육 콘텐츠입니다. 사용자는 방향 판단력과 리듬감을 바탕으로 무한히 이어지는 계단을 오르며 숫자, 알파벳, 한글 자모를 자연스럽게 익힐 수 있습니다. 다국어(한국어, 영어, 일본어) 지원과 온라인 랭킹 시스템을 갖추고 있습니다.

파일 구조

• index.html: Three.js 기반의 3D 렌더링 엔진, 게임 로직, 다국어 처리(i18n), 랭킹 API 연동 및 전체 UI 레이아웃을 포함합니다.
• styles.css: 반응형 레이아웃, 모바일 최적화 UI, 게임 오버 및 랭킹 오버레이 등 게임 전반의 시각 스타일을 정의합니다.

화면·작동 안내

주요 UI 요소

• 시작 화면: 게임 제목과 활동 안내, 네 가지 학습 모드(숫자, 알파벳, 자음, 모음) 선택 및 상위 10위 랭킹 확인 버튼이 제공됩니다.
• 언어 선택바: 화면 상단에서 한국어, 영어, 일본어 중 원하는 언어로 즉시 전환할 수 있습니다.
• HUD (상태 표시): 현재 점수(계단 수), 진행 시간, 선택된 학습 모드 정보를 실시간으로 보여줍니다.
• 조작 가이드: PC(A/D 키)와 모바일(좌우 터치) 환경에 맞는 조작법을 하단에 안내합니다.
• 결과 화면: 도달한 계단 수, 소요 시간, 스피드 보너스를 합산한 최종 점수를 표시하며 닉네임을 입력해 랭킹을 등록할 수 있습니다.

사용 흐름

1. 모드 및 언어 설정: 원하는 학습 대상(숫자/문자)과 언어를 선택합니다.
2. 게임 진행: 계단이 생성되는 방향에 맞춰 왼쪽(A/터치) 또는 오른쪽(D/터치)으로 점프하여 계단을 오릅니다.
3. 난이도 요소: 캐릭터가 밟은 계단은 일정 시간 후 붉게 변하며 아래로 떨어지므로 빠르게 이동해야 합니다.
4. 점수 산출: 오른 계단 수에 기반하며, 기준 속도보다 빠르게 오를 경우 스피드 보너스가 추가됩니다.
5. 랭킹 등록: 게임 종료 후 자신의 점수를 온라인 서버에 등록하여 다른 사용자들과 경쟁합니다.

프로젝트 진행 상황

• [x] Three.js 기반 3D 계단 및 캐릭터 렌더링
• [x] 숫자, 알파벳, 한글 자음/모음 계단 텍스처 생성 로직
• [x] 계단 붕괴 애니메이션 및 충돌 판정 구현
• [x] 한국어/영어/일본어 다국어 대응(i18n)
• [x] 한뼘코딩 Rank API 연동을 통한 온라인 랭킹 시스템
• [x] 모바일 터치 및 PC 키보드 하이브리드 조작 지원
• [x] 점프, 목표 달성, 게임 오버 효과음 적용