💣 장애물이 연속해서 같은 위치에 생성 - FRONTENDBOOTCAMP-13th/JS-07-7zzang-Arcade GitHub Wiki

구분

• 날짜 : 2025.05.20
• 종류 : 버그
• 중요도 : 🔴

---

1. 문제 상황

• 인게임에서 장애물이 연속해서 같은 위치에 생성 되는 경우가 자주 발생함.

  • cellIndex = 2였다면, 다음에도 또 2가 나오는 경우가 많음 → 패턴이 느껴져 게임이 단조로워짐

  function spawnObstacle(): void {
  const cellIndex = getRandomCell();
  console.log("생성된 cellIndex:", cellIndex);
  
  const cell = cells[cellIndex];
  const obstacle = document.createElement('div');
  obstacle.classList.add('obstacle');
  cell.appendChild(obstacle);
  }
  

  • console.log()로 확인한 결과, 같은 열 index가 연속해서 생성됨. cellIndex가 계속 반복됨 → 중복 방지가 필요하다고 판단

---

2. 원인

• 장애물 위치는 Math.floor(Math.random() * 6)으로 완전 랜덤이라 중복을 막지 않음. 결국 중복되지 않도록 직접 막는 로직이 필요함

---

3. 해결 과정

function spawnObstacle(): void {
const cellIndex = getRandomCell();
console.log("이전:" lastCellIndex, "현재:"cellIndex);

const cell = cells[cellIndex];
const obstacle = document.createElement('div');
obstacle.classList.add('obstacle');
cell.appendChild(obstacle);
}

• console.log("이전:" lastCellIndex, "현재:"cellIndex); 로 장애물 생성 위치의 index가 연속해서 반복되는지 확인

  • lastCellIndex === cellIndex 같음을 확인함. 그럼 위치 기억해서 같은 위치면 다시 뽑아야겠다고 생각함

  let lastCellIndex = -1;
  
  function getRandomCell(): number {
    let index: number;
    do {
      index = Math.floor(Math.random() * 6);
    } while (index === lastCellIndex); // 직전과 같으면 다시 뽑기
  
    lastCellIndex = index;
    return index;
  }
  

  • 전역 변수 생성 : 직전 장애물의 열 위치 기억용
  • 중복 방지 함수 : 같은 index일 경우 다시 뽑도록 do-while 사용
  • const prevIndex = lastCellIndex; // 함수 호출 전 상태 기록

  function spawnObstacle(): void {
  const prevIndex = lastCellIndex; // 함수 호출 전 상태 저장
  const cellIndex = getRandomCell();
  console.log("이전:", prevIndex, "현재:", cellIndex);
  const cell = cells[cellIndex];
  const obstacle = document.createElement('div');
  obstacle.classList.add('obstacle');
  cell.appendChild(obstacle);
  }
  

  • 이전 index와 현재 index가 다른지 확인하는 로그 출력함. 디버깅 결과 "이전: 2 현재: 4" → 중복 방지 로직 정상 작동 확인.

---

4. 보완할 점

• 의도한 바가 맞는지 끊임없이 의심하기
• 습관적으로 실행 전/후 값을 비교하는 구조적 로그 찍기
  • 이 부분 때문에 같은 작업을 여러 번 하게 되는 문제가 발생함
• 로직을 분리해서 함수화하는 습관
  • 하나의 함수가 한 가지 역할만 하도록 구성
  • 한 번에 많은 내용을 작업하려고 하다 보니, 디버깅까지도 어려운 상황이 생김
• 상태 기억과 조건 제어 구조 익히기 ⭐⭐⭐⭐⭐
  • 전역 상태, 조건 재시도 (do-while) 패턴 등 자주 써보기