Claude Code로 테트리스 만들기 4부 - 모바일 터치 조작 구현

1. 배경
4부는 모바일에서 터치로 블록을 조작할 수 있도록 구현한 과정이다.
 
2. 터치 조작 방식
스와이프 방향에 따라 블록을 움직이는 방식으로 구현했다.

• 왼쪽 스와이프 → 블록 왼쪽 이동
• 오른쪽 스와이프 → 블록 오른쪽 이동
• 아래 스와이프 → 하드 드롭
• 위 스와이프 → 블록 회전
• 제자리 탭 → 블록 회전

3. 구현 코드

function handleTouchEnd(e) {
  const endX = e.changedTouches[0].clientX
  const endY = e.changedTouches[0].clientY
  const dx = endX - touchStartX
  const dy = endY - touchStartY

  // 탭 감지
  if (Math.abs(dx) < 10 && Math.abs(dy) < 10) {
    rotate()
    playSfxRotate()
    return
  }

  // 너무 짧은 스와이프 무시
  const THRESHOLD = 30
  if (Math.abs(dx) < THRESHOLD && Math.abs(dy) < THRESHOLD) return

  // 방향 판단
  if (Math.abs(dx) > Math.abs(dy)) {
    dx < 0 ? moveLeft() : moveRight()
    playSfxMove()
  } else {
    if (dy > 0) {
      hardDrop()
      playSfxDrop()
    } else {
      rotate()
      playSfxRotate()
    }
  }
}

 
4. 배운 개념 — 탭 vs 스와이프 구분
threshold를 두 단계로 나눴다.

• 10px 미만 → 탭으로 인식 → 회전
• 30px 미만 → 너무 짧은 스와이프 → 무시
• 30px 이상 → 방향 판단 → 이동

이 구조 덕분에 손이 살짝 떨려도 오작동하지 않는다.
 
5. 배운 개념 — includes 패턴

if (['ArrowLeft', 'ArrowRight', 'ArrowDown'].includes(e.key)) {
  stopDas()
}

 
3개 조건을 배열로 만들어서 includes로 체크하면 switch문보다 훨씬 간결하다.
 
6. 마무리
Claude Code가 가이드대로 구현했고 코드 분석하면서 전부 이해가 됐다.
 
완성된 테트리스는 여기서 플레이할 수 있다 → Tetris Retro