프로젝트 개요
- 서비스 소개: AI 캐릭터 생성 플랫폼
- 담당 역할: 머지 게임 클라이언트 전체 설계 및 개발
- 기간: 2024.07.21 - 진행중
- 기술스택:
- 프레임워크: SvelteKit / TypeScript
- 게임 엔진: phaser3
- 애니메이션: GSAP
- 상태관리: Svelte Store
주요 성과
게임 시스템 구현
- Phaser3 기반 7*8 그리드 게임 보드 전체 구조 설계 및 개발
- UI/UX 부터 게임 로직, 서버 연동까지 클라이언트 측 전 과정 담당
- 9단계 아이템 진화 시스템
인터렉션 구현
- 아이템 이동 - Move
- 드래그로 빈셀로 아이템 이동
- 스냅 효과로 셀 안에 자동 정렬
- 아이템 교환 - Swap
- 서로 다른 아이템 위치 교환
- 인접한 빈 공간 발견시 밀어내기 동작 실행
- 공간이 없을 경우 두 아이템 위치 교환
- 아이템 병합 - Merge
- 동일 레벨 아이템 드래그 시 병합 가능 글로우 효과 표시
- 병합시 축소 → 팝업 → 바운스 효과로 레벨업 효과 시각화
- Easing 활용 모션 구현
- 아이템 생성 - Spawn
- 스포너 아이템 클릭시 신규 아이템 생성
- 빈 셀을 찾아 포물선 궤적 애니메이션으로 생성 과정 시각화
- 스포너 주변 빈 공간 우선 배치 로직
실시간 게임 상태 동기화 시스템
- 모든 게임 액션을 순차적 로그로 기록 (Spawn/Move/Merge/Swap)
- 액션마다
sequence_index 부여로 서버와 동기화 지점 추적
- 서버 검증 실패시 마지막 유효 상태로 자동 롤백 및 재 동기화
스포너 리차지 타이머 시스템