Level 1: Adding Game Feel

🎯 목표

Level 0에서 만든 게임에 파티클, 사운드, 스크린 셰이크를 추가합니다. 같은 게임이라도 이 세 가지만 넣으면 "느낌"이 완전히 달라집니다.

📋 준비물

Level 0에서 만든 index.html 게임 파일
AI 채팅 (Claude 권장)

💡 Level 0을 안 했다면 먼저 시작하세요.

단계별 가이드

Step 1. 파티클 효과 추가

AI에게 아래 프롬프트를 보내세요 (기존 게임 코드와 함께):

이 게임에 파티클 효과를 추가해줘:

1. 플레이어가 점프할 때 — 발 밑에서 작은 원 3~5개가 아래로 흩어짐
2. 장애물에 부딪힐 때 — 충돌 지점에서 빨간 파편 10~15개가 방사형으로 퍼짐
3. 점수 +10마다 — 화면 위에서 반짝이는 별 파티클

각 파티클은:
- 크기: 2~6px 원
- 수명: 0.3~0.8초
- 알파값이 수명에 따라 0으로 감소
- 중력 영향 받음 (y += gravity * dt)

Step 2. 사운드 효과 추가 (Web Audio API)

외부 파일 없이 코드로 사운드를 만듭니다:

이 게임에 Web Audio API로 사운드를 추가해줘. 외부 파일 없이 코드로 생성:

1. 점프: 짧은 상승 톤 (200Hz → 400Hz, 0.1초)
2. 장애물 통과: 코인 소리 (800Hz 짧은 핑, 0.05초)
3. 게임오버: 하강 톤 (400Hz → 100Hz, 0.3초)
4. 배경음: 낮은 드론 + 랜덤 비프 (볼륨 작게)

AudioContext는 첫 사용자 입력(클릭/탭) 후 생성.
모바일에서도 동작하게 해줘.

⚠️ Web Audio API는 사용자 인터랙션 이후에만 시작됩니다. "게임 시작" 버튼 클릭 후 AudioContext를 생성하세요.

Step 3. 스크린 셰이크 추가

이 게임에 스크린 셰이크를 추가해줘:

1. 장애물 충돌 시 — 강한 셰이크 (진폭 8px, 0.3초)
2. 착지 시 — 약한 셰이크 (진폭 3px, 0.1초)

구현 방법:
- canvas의 translate를 랜덤 오프셋으로 흔들기
- 진폭이 시간에 따라 0으로 감쇠
- requestAnimationFrame 기반

Step 4. 세 가지 통합 테스트

모든 효과를 넣은 후 체크:

점프 → 파티클 + 사운드 동시 발생?
장애물 충돌 → 파티클 + 사운드 + 스크린 셰이크 동시?
모바일 → 사운드가 재생되고 셰이크가 보이는지?
성능 → 파티클 100개+ 일 때 프레임 드랍 없는지?

문제가 있으면 AI에게 에러 메시지와 함께 수정 요청하세요.

Step 5. 느낌 조정하기

게임필은 숫자 조정이 핵심입니다. AI에게 이렇게 요청하세요:

"셰이크 강도를 반으로 줄여줘" — 너무 어지러울 때
"파티클 수를 2배로 늘려줘" — 더 화려하게
"사운드 볼륨을 30%로 줄여줘" — 너무 시끄러울 때
"점프 사운드 주파수를 300Hz→600Hz로 바꿔줘" — 톤 변경

✅ 체크포인트

[ ] 점프할 때 파티클이 발생한다
[ ] 충돌 시 빨간 파편 파티클이 보인다
[ ] 점프 사운드가 재생된다
[ ] 게임오버 사운드가 재생된다
[ ] 충돌 시 화면이 흔들린다
[ ] 모바일에서도 사운드와 셰이크가 동작한다
[ ] 파티클이 많아져도 프레임이 유지된다

🐛 잘 안 될 때

"사운드가 안 나와요"

AudioContext가 사용자 인터랙션 이후 생성되었는지 확인
AI에게: "AudioContext를 첫 클릭 이벤트에서 resume하는 코드를 추가해줘"

"파티클이 화면에 쌓여요"

수명이 끝난 파티클을 배열에서 제거하지 않는 경우
AI에게: "파티클 배열에서 alpha가 0 이하인 것을 매 프레임 제거해줘"

"셰이크 후 화면이 어긋나 있어요"

ctx.save() / ctx.restore() 호출이 빠진 경우
AI에게: "스크린 셰이크에 save/restore를 추가해서 원래 위치로 복원해줘"

"모바일에서 소리가 안 나요"

iOS Safari는 무음 모드에서 Web Audio 제한
AI에게: "iOS에서 AudioContext 활성화를 위한 터치 이벤트 핸들러를 추가해줘"

🤖 AI 모델별 접근법

무료로 시작

Gemini 3.1 Pro — Web Audio API 코드 생성에 강함. 무료 티어로 파티클+사운드 동시 요청 가능.
DeepSeek-V3.2 — 무료 API. 물리 기반 파티클 시스템 구현에 뛰어남.

상용 모델

Claude Opus 4.6 — 파티클 시스템과 사운드를 한 번에 정확하게 통합. 복잡한 셰이크 로직에 강점.
GPT-5.4 — 구체적인 수치 조정 요청에 정확한 응답. AudioContext 호환성 처리 우수.

로컬 실행

Ollama + Qwen2.5-Coder 32B — 오프라인 반복 작업에 적합. 파티클 수/속도 미세 조정을 빠르게.

IDE 통합

Cursor — 기존 코드에 게임필 추가할 때 인라인 편집이 편리. 변경 전후 diff 확인 가능.

🎉 축하합니다!

같은 게임인데 완전히 다른 느낌이 되었죠? 🎵✨

게임필(game feel)의 세 기둥: 파티클 + 사운드 + 스크린 셰이크. 이 패턴은 거의 모든 게임에 적용할 수 있습니다.

다음 레벨에서는 3sec-score SDK를 연동해서 리더보드와 플레이 클립을 활성화합니다.

Level 2: SDK 연동 →

게임필(feel) 추가하기