ksc-dev 님의 블로그

1. 배경3부는 모바일에서도 잘 보이도록 반응형 레이아웃을 구현한 과정이다. 2. 핵심 문제테트리스 보드는 10×20 고정 비율이라 CSS vw/vh 단위만으로는 화면에 맞추기 어렵다. 높이 기준으로 맞추면 가로로 삐져나오고, 가로 기준으로 맞추면 세로로 삐져나온다. 3. 해결 방법 — JS로 동적 셀 크기 계산 const CELL_SIZE = computed(() => { const byHeight = Math.floor((windowHeight.value * 0.75) / BOARD_ROWS) const byWidth = Math.floor((windowWidth.value * 0.62) / BOARD_COLS) return Math.max(16, Math.min(byHeight, byW..

1. 배경1부에서 충돌 감지를 구현했다. 2부는 꽉 찬 줄을 삭제하고 점수를 계산하는 로직이다. 2. 줄 삭제 구현 function clearLines() { const remainingLines = board.value.filter(row => !row.every(cell => cell !== 0) ) const deletingLines = BOARD_ROWS - remainingLines.length const emptyLines = Array.from( { length: deletingLines }, () => Array(BOARD_COLS).fill(0) ) board.value = [...emptyLines, ...remainingLines] return de..

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..