Javascript 빙고 로직

JavaScript로 빙고 게임을 구현하는 방법을 정리합니다.

HTML 구조

사용자가 입력한 숫자(2~10)로 그리드 크기를 결정하고, 클릭하여 셀을 마킹하는 인터랙티브 빙고 보드를 생성합니다.

핵심 기능

• 랜덤 숫자 생성: 보드 전체에 중복 없는 랜덤 숫자를 배치
• 2차원 배열: 게임 로직 추적을 위해 보드 데이터를 2차원 배열에 저장
• 클릭 핸들러: bingoCheck 클래스로 마킹된 셀을 관리
• 승리 조건 판별: 가로, 세로, 대각선 방향으로 빙고 완성 여부를 확인

승리 판별 함수

4가지 방향에 대해 각각 검증 함수를 구현합니다:

• colCheck() - 가로줄(열) 검증
• rowCheck() - 세로줄(행) 검증
• xy1Check() - 좌상단에서 우하단 대각선 검증
• xy2Check() - 우상단에서 좌하단 대각선 검증

스타일링

• 그리드 셀: 50px x 50px 크기, 트랜지션 효과 적용
• 마킹된 셀: crimson 색상으로 변경
• 승리 메시지: 별도 색상으로 표시

게임 흐름

1. 플레이어가 셀을 클릭하여 마킹
2. 완성된 빙고 라인 수를 카운트
3. 목표 라인 수에 도달하면 승리 선언
4. 승리 후 추가 클릭 비활성화