본문 바로가기
Projects
Hexillion

Hexillion

Coming Soon

같은 숫자의 칩을 연결해 합성하고, 끝내 1,000,000을 만드는 육각형 퍼즐 게임

TypeScriptReactViteCapacitorWeb AudioPWAAndroid

Overview

Hexillion은 육각형 보드 위에서 같은 숫자의 칩을 인접 경로로 이어 붙여 더 큰 숫자로 합성하는 모바일 우선 퍼즐 게임입니다. 칩을 누른 채 같은 값의 이웃 칩으로 드래그하고, 필요한 최소 개수를 채운 뒤 손을 떼면 합성됩니다.

1이 다섯 개면 5가 되고 5가 두 개면 10이 되는 식으로 자릿수를 올려, 최종적으로 500,000 두 개를 이어 1,000,000을 완성하는 것이 목표입니다. 합성 애니메이션이 재생되는 동안 다음 경로를 예약하면 콤보 배수가 붙어 점수가 크게 오릅니다.

Features

  • 11행 × 9열 flat-top 육각 보드에서 인접 경로를 드래그해 합성
  • 1×5→5, 5×2→10, 10×5→50 … 500,000×2→1,000,000 자릿수 합성 규칙
  • 전환 중 다음 합성을 예약해 연쇄를 만드는 콤보 배수 점수
  • 연결 길이에 따른 펜타토닉 음계와 합성 결과에 맞춘 화음 (Web Audio 프로시저럴 사운드)
  • 한 수 되돌리기와 막다른 상황에서의 합성 가능 경로 안내
  • 진행 상태·최고 점수·설정 자동 저장, 오프라인 플레이와 PWA 설치 지원
  • Google Play 게임즈 리더보드 연동과 광고 없는 서포터 인앱 구매
  • 터치·마우스·스타일러스를 같은 Pointer Event 경로로 처리

Tech Stack

Rendering

DOM/CSS transform과 SVG 연결선 - 별도 게임 엔진 없이 육각 보드와 전환 애니메이션 구성

Language

TypeScript strict mode + React - 순수 함수 reducer로 보드 상태 전이 관리

Native

Capacitor 8 Android 패키징, Google Play Billing과 Play Games Services v2 연동

Audio

Web Audio API - 오디오 파일 없이 효과음과 멜로디를 코드로 합성, 볼륨·미리듣기 제공

Architecture

한 수는 합성 → 열 단위 중력 → 상단 Spawn → 유효 수 검사 순서의 명시적 transition timeline으로 진행됩니다. 논리 보드는 각 단계 전에 미리 계산하고 화면에는 계산된 결과를 애니메이션으로 재생하므로, 전환 도중 입력이 들어와도 상태가 어긋나지 않습니다.

보드·선택·합성·중력·Spawn·게임오버 판정을 각각 순수 모듈로 분리해 Vitest로 검증하고, 저장 데이터는 버전을 포함한 localStorage 스키마로 관리해 이전 버전 세이브와도 호환됩니다.