아이들의 첫 숫자 공부를 위한 '피자 만들기' 웹 게임 (수 개념 익히기)

HTML5와 자바스크립트로 구현한 저사양 교육용 브라우저 게임

아이들이 처음 숫자를 접할 때 가장 중요한 것은 '양'에 대한 감각, 즉 수 개념을 익히는 것입니다. 단순히 숫자를 쓰는 법을 배우기보다, 직접 눈으로 보고 손으로 조작하며 수량을 맞추는 과정이 훨씬 효과적입니다. 이번에 제작한 '피자 만들기 숫자 게임'은 이러한 기초 학습을 돕기 위해 담백하게 설계되었습니다.

💻 권장 플레이 환경
본 게임은 PC 브라우저 환경에서의 플레이를 강력히 권장합니다. 화면 상단바 등으로 인해 하단 버튼이 가려질 경우 아래의 '전체 화면' 모드를 이용해 주세요. (PC는 ESC 키로 종료 가능)

📺 플레이 미리보기 영상

상세 조작 가이드:

1. 주문 확인: 왼쪽 상단 '손님의 주문서'에 적힌 각 재료의 숫자를 확인합니다.
2. 재료 선택: 아래 팔레트에서 원하는 재료를 클릭하면 마우스에 재료가 붙습니다.
3. 재료 배치: 피자 도우 위를 클릭해 재료를 놓습니다. 이때 주문서의 숫자가 자동으로 카운트됩니다.
4. 재료 삭제: 만약 숫자를 넘겼다면, 도우 위의 재료를 다시 클릭해 삭제할 수 있습니다.
5. 요리 완성: 모든 숫자를 정확히 맞춘 뒤 '요리 완성!' 버튼을 누르면 성공입니다.

이번 게임은 DOM 조작과 드래그 앤 드롭 로직을 활용해 순수 HTML/JS로 제작되었습니다. 아이들이 재료를 너무 촘촘하게 배치하지 않도록 최소 거리를 계산하는 로직을 넣어 조작감을 높였으며, 시각적인 수량 인지에 최적화된 SVG 아이콘을 사용했습니다. 또한 0.01%의 확률로 등장하는 '황금 피자' 이스터 에그를 통해 소소한 즐거움도 담았습니다.