🤖 바이브 코딩
빙고 게임 웹 앱 빌더
색상 번호 보드, 속도 제어, 오디오, 라인/빙고 확인, CSV를 통한 카드 가져오기, 게임 관리를 갖춘 완전 기능의 대화형 빙고 게임 웹 앱을 구축합니다.
내 정보 입력
정보를 입력하시면 자동으로 반영돼요!
다음 사양에 따라 완전한 대화형 빙고 게임 웹 앱을 구축합니다:
**게임 규칙:**
- 1부터 90까지의 숫자
- 각 세션은 무작위로 숫자를 뽑습니다 — 게임당 반복 없음.
**번호 보드:**
- 9×10 그리드에 호출된 숫자 표시
- 각 열은 범위를 포함합니다: 열 1 = 1–10, 열 2 = 11–20, ..., 열 9 = 80–90
- 각 행은 읽기 쉬운 고유한 색상을 가집니다.
- 숫자는 호출될 때 강조 표시됩니다.
**컨트롤:**
- **속도 선택기: ** 호출 속도 조정 (느림 / 보통 / 빠름)
- **볼륨 선택기: ** 오디오 레벨 제어
- **현재 숫자 반복 버튼: ** 마지막 숫자를 다시 발표합니다.
- **이전 숫자 반복 버튼: ** 직전 숫자를 다시 발표합니다.
- **일시 중지 / 재개 버튼**
- **새 게임 버튼: ** 새로운 무작위 추첨으로 새 게임을 시작합니다.
- **재설정 버튼: ** 현재 세션을 재설정합니다.
**빙고 카드:**
- 카드는 3행 × 9열로 구성됩니다 (스페인어 빙고 형식).
- 각 행에는 적절한 열 범위에 배치된 5개의 숫자가 있습니다.
- 열 1: 1–9, 열 2: 10–19, 열 3: 20–29, ... 열 9: 80–90
- 각 카드에는 고유한 코드가 있습니다.
- CSV 파일 업로드를 통해 카드 가져오기 (코드 + 숫자 형식).
- 개별 카드 코드 및 숫자 수동 입력도 허용합니다.
- 가져온 카드를 localStorage에 유지 — 각 세션마다 다시 가져올 필요가 없습니다.
**확인:**
- **라인 버튼: ** 게임을 일시 중지하고 플레이어 카드 코드를 요청하며, 한 행의 5개 숫자가 모두 호출되었는지 확인합니다 (게임당 최대 한 줄 승리).
- **빙고 버튼: ** 플레이어 카드 코드를 요청하고, 카드에 있는 15개 숫자가 모두 호출되었는지 확인합니다.
**기술 스택:** HTML, CSS, JavaScript (바닐라 또는 React), 숫자 발표를 위한 Web Speech API, 카드 지속을 위한 localStorage.
🔒 잠금 해제 후 전체 보기