마우스·터치 불꽃놀이 — 하트·스마일·곰돌이 찾기
이 마우스 불꽃놀이 게임은 화면을 클릭하거나 터치할 때마다 화려한 불꽃이 터지는 인터랙티브 미니게임입니다. 일반 불꽃 외에도 곰돌이·하트·스마일 모양의 히든 불꽃이 무작위 확률로 등장하며, 발견한 개수는 화면 결과창에 실시간으로 기록됩니다. 사용법은 간단합니다. ① 아래 캔버스 아무 곳이나 클릭 또는 터치 ② 터지는 불꽃 감상 ③ 히든 모양이 나오면 결과창 문구를 확인하세요. 이 세 단계면 누구나 3초 만에 즐길 수 있습니다.
🎆 마우스 클릭 불꽃놀이 🎆
⚙️ 작동 원리와 계산 로직
이 게임의 불꽃은 파티클 시스템(Particle System) 원리로 구현됩니다. 클릭 좌표를 중심으로 수십 개의 점(파티클)이 무작위 각도와 속도로 방출되고, 매 프레임마다 velocity += gravity, alpha -= decay 공식에 따라 위치와 투명도가 갱신되며 자연스럽게 사라집니다. 히든 불꽃은 Math.random() 기반 확률 로직으로 클릭 시마다 약 15% 확률로 발동되며, 이때 파티클은 무작위 방향 대신 지정 좌표로 수렴합니다. 하트 모양은 매개변수 방정식 x = 16·sin³t, y = 13·cos t − 5·cos 2t − 2·cos 3t − cos 4t를 사용해 좌표를 계산하고, 스마일과 곰돌이는 원 방정식 x = r·cosθ, y = r·sinθ를 조합해 얼굴·눈·귀 위치를 배치합니다.
실제 활용 예시 1) 초등학교 컴퓨터 수업에서 마우스 클릭·드래그 연습용 교구로 활용해 아이들의 흥미를 유도할 수 있습니다.
실제 활용 예시 2) 이벤트 페이지나 랜딩 페이지에 삽입해 방문자의 체류 시간을 늘리고 상호작용을 유도하는 용도로 활용할 수 있습니다.
❓ 자주 묻는 질문
Q1. 히든불꽃(곰돌이·하트·스마일)은 어떻게 나오나요?
A. 클릭할 때마다 내부 확률 로직이 작동해 약 15% 확률로 무작위 등장합니다. 여러 번 클릭할수록 세 가지 모양을 모두 만날 확률이 높아집니다.
Q2. 모바일에서도 정상적으로 작동하나요?
A. 네, 터치 이벤트를 지원하며 화면 크기에 맞춰 자동으로 조정되는 반응형 레이아웃으로 제작되어 PC와 모바일 모두에서 동일하게 즐길 수 있습니다.
Q3. 클릭 횟수나 점수가 저장되나요?
A. 현재 세션 동안의 클릭 수와 히든불꽃 발견 횟수만 화면에 표시되며, 페이지를 새로고침하면 기록은 초기화됩니다. '초기화' 버튼으로 언제든 직접 리셋할 수도 있습니다.