1) Card Board Setup

게임 보드에 카드를 생성하고 배열을 섞어 표시합니다. 생성과 셔플 함수를 사용해 랜덤 배치를 구현합니다.

2) Flip & Match Cards

카드를 클릭하면 뒤집고 두 장을 비교해 짝을 맞춥니다. 플립과 매칭 체크 함수로 일치 여부를 판단합니다.

3) Game Over & Reset

모든 카드를 맞추면 게임을 종료하고 초기화합니다. 게임 오버와 리셋 함수를 통해 다음 라운드로 넘어갑니다.

4) New Round

새로운 카드 세트를 로드해 다음 라운드를 진행합니다. 점수 또는 메시지를 통해 사용자의 진행 상황을 안내합니다.

5) Balloon Click & Score

풍선을 클릭하면 점수가 올라가고 풍선이 사라집니다. 덧셈 연산자와 제거 함수로 점수를 실시간으로 표시합니다.

6) Random Color & Shake

풍선에 랜덤한 색상과 흔들림 애니메이션을 추가합니다. CSS 변수와 keyframe을 이용해 시각 효과를 다양화합니다.

7) Random Float Speed

풍선이 랜덤한 속도로 위로 떠오르도록 설정합니다. 지속 시간을 조절해 5~10초 간의 애니메이션을 구현합니다.

8) Auto Balloon Spawn

1.5초마다 풍선이 자동으로 생성되도록 만듭니다. setInterval()을 통해 주기적인 풍선 생성 로직을 실행합니다.

9) Drag Start Effect

드래그 시작 시 ID 저장과 시각 효과를 적용합니다. dragstart 이벤트에서 세팅을 진행합니다.

10) Drag End Reset

드래그 종료 시 스타일을 원래대로 복원합니다. dragend 이벤트에서 dragging 클래스를 제거합니다.

11) Drag Over Target

드래그 대상이 드롭 가능 영역에 들어오면 강조합니다. dragover, dragenter 이벤트로 시각적 피드백을 줍니다.

12) Correct Shadow

드롭한 요소가 올바른 그림자 영역에 위치하도록 배치합니다. ID 비교 후 포지션과 z 인덱스를 통해 정확한 위치에 표시합니다.

수강생의 놀라운 변화

100% 리얼 포트폴리오

이미 많은 수강생들이 크리에이터로 활동하고 있습니다. 

유아부터 성인까지 수강생들의 놀라운 변화를 확인하세요.