🕸️ 플레이 팝업 버튼 - FRONTENDBOOTCAMP-13th/JS-07-7zzang-Arcade GitHub Wiki

구분

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

---

1. 코드 첨부

  window.addEventListener('DOMContentLoaded', () => {
  const game = new MoleGame();
  const infoPopup = document.getElementById('infoPopup');

  // clickStart 버튼 클릭 시 팝업 띄우기 + 버튼 
  document.getElementById('clickStart')?.addEventListener('click', () => {
    window.parent.postMessage({ type: 'STOP_BGM' }, '*');
    game.hide('introScreen');
    game.show('gameScreen');
    infoPopup?.classList.remove('hidden');

    if (!(window as any).soundMuted) {
      game.playBgm('/sounds/smash-bgm.mp3');
    }

    setTimeout(() => {
      const bgmOffBtn = document.getElementById('bgmOffBtn');
      const bgmOnBtn = document.getElementById('bgmOnBtn');

      bgmOffBtn?.addEventListener('click', () => {
        (window as any).soundMuted = true;
        game.stopBgm();
      });

      bgmOnBtn?.addEventListener('click', () => {
        (window as any).soundMuted = false;
        game.playBgm('/sounds/smash-bgm.mp3');
      });
    }, 0);
  });

  // ESC 키로 팝업 닫기 + 게임 시작
  document.addEventListener('keydown', e => {
    if (e.key === 'Escape' && !infoPopup?.classList.contains('hidden')) {
      infoPopup?.classList.add('hidden');
      game.startGame();
    }
  });
});

2. 문제 해결 순서

1. 기존 흐름:
   • 인트로 화면 → 메인 BGM 유지
   • 인게임 진입 시 메인 BGM → 인게임 BGM으로 변경
2. 문제 발생:
   • 팝업 코드 추가 후 BGM 전환이 꼬임
   • 예상대로 인게임 BGM으로 변경되지 않음
   • 팝업 버튼의 ON/OFF 기능도 정상 작동하지 않음
3. 수정 작업:
   • BGM 전환 로직 정리: 기존 흐름을 다시 점검
   • 팝업이 열릴 때 window.parent.postMessage({ type: 'STOP_BGM' }) 추가하여 메인 BGM을 중지
   • 인게임 진입 시 다시 인게임 BGM이 정상적으로 시작되도록 설정
   • 팝업 버튼 ON/OFF 기능 정상 작동 확인
4. 결과:
   • 팝업이 BGM을 중지하고, 인게임 진입 시 인게임 BGM이 정상적으로 재생됨
   • 팝업 버튼 ON/OFF 기능도 정상 작동