Claude Code로 테트리스 만들기 1부 - 충돌 감지 구현

1. 배경
Claude Code로 Vue3 + Vite 기반 레트로 테트리스를 만들면서 배운 것들을 정리한다. 1부는 테트리스의 핵심인 충돌 감지(isValidPosition) 구현 과정이다.
 
2. 충돌 감지란?
블록이 이동하거나 회전할 때 벽, 바닥, 쌓인 블록에 닿는지 확인하는 함수다. 이게 없으면 블록이 벽을 뚫고 지나간다.
 
3. 구현 과정

function isValidPosition(shape, offsetX, offsetY) {
  let valid = true // 플래그 변수

  shape.forEach((row, rowIdx) => {
    row.forEach((cell, colIdx) => {
      if (cell !== 0) {
        const boardX = offsetX + colIdx
        const boardY = offsetY + rowIdx

        if (boardX < 0 || boardX >= BOARD_COLS) valid = false
        if (boardY >= BOARD_ROWS) valid = false
        if (boardY >= 0 && boardY < BOARD_ROWS && board.value[boardY][boardX] !== 0) valid = false
      }
    })
  })

  return valid
}

 
4. 배운 개념
플래그 변수 — true/false로 상태를 기억하는 변수. forEach 안에서 return false를 해도 루프가 멈추지 않아서 플래그 변수를 바깥에 선언해야 한다.
지역 변수 vs 전역 변수 — {} 블록 안에서 선언한 변수는 그 블록에서만 살아있다. valid를 forEach 안에 선언하면 매 칸마다 초기화돼서 결과가 누적되지 않는다.
 
5. 마무리
처음엔 forEach 안에서 return false가 될 줄 알았는데, 콜백 함수라 루프 자체를 멈추지 못한다는 걸 알게 됐다. 대학생 시절 때 배운 내용이 나와서 복습하는 시간이 됐고, 플래그 변수 패턴을 이해하는 것 같다