Cleave: 재료를 다지는 게임

Cleave — 도마 위 재료를 제한 시간 안에 최대한 잘게 다지는 게임입니다.

칼로 자른 조각이 사라지지 않고 남아서 계속 다시 잘립니다. 흩어진 조각은 칼로 모아서 다시 다질 수 있습니다. 당근, 토마토, 파 세 가지 재료가 있습니다.

플레이: https://ossca-thorvg.github.io/Hackathon-Cleave/ 저장소: https://github.com/OSSCA-thorvg/Hackathon-Cleave

핵심 규칙

1. 화면에 도형이 하나 제시됩니다.
2. 마우스 드래그로 직선을 그으면 도형이 그 각도로 갈라집니다.
3. 잘린 조각은 무작위 방향으로 조금씩 밀려나며 흩어집니다.
4. 흩어질수록 한 번에 여러 조각을 관통하기 어려워집니다. 즉 초반에 뭉쳐 있을 때 얼마나 잘 긋느냐가 실력이 됩니다.
5. 정해진 절단 횟수 안에 만든 조각 수로 별 등급이 결정됩니다.

왜 ThorVG인가

• 자를 대상을 재생 중인 Lottie 애니메이션으로 확장할 계획입니다. 잘린 조각들은 각자 자기 영역의 애니메이션을 계속 재생합니다. Canvas 2D에는 Lottie 지원이 없어 구현할 수 없습니다.
• 조각이 수십 개로 늘어나면 각 조각에 클리핑과 효과가 누적됩니다. Canvas 2D의 filter는 draw 호출 단위라 이 규모에서 무너지지만, ThorVG는 유지형 씬 그래프에 얹어두고 변환만 갱신합니다.

목표

• 직선-다각형 교차점 계산
• 경계 추적 방식 분할 (볼록·오목 모두, N조각 대응)
• 드래그 입력 + 조각 흩어짐
• 절단 횟수 제한 + 조각 수 판정 + 별 등급
• 스테이지 5개
• (확장) 자를 대상을 Lottie로 교체, 조각별 재생 유지
• (확장) 조각별 드롭섀도우·블러
• GitHub Pages 배포

기술 스택

@thorvg/webcanvas · TypeScript · Vite

팀

• 조정민 - 개인 참가

일정

저장소

https://github.com/OSSCA-thorvg/Hackathon-Cleave