50개의 단어 속에 정답을 찾아라 🔎 (구 AI 워드 배틀)
실시간 멀티플레이 단어 퀴즈 게임입니다.
화면에 흩어진 50개의 단어 중에서, 문제에 맞는 답을 가장 먼저 찾아 클릭하세요.
제한 시간 안에 더 많이 맞힌 사람이 승리합니다!
문제 세트 (6종)
선생님이 게임 시작 전에 고를 수 있습니다. 각 세트 = 문제 50개.
- 🤖 AI 용어 · 🌍 세계 수도 · 📜 속담 완성 · ✍️ 사자성어 · 🔬 과학 상식 · 🌱 SDGs 생활 상식
- 세트 추가/수정:
src/questionSets.js (같은 형식으로 {q, a} 50개를 넣으면 됨. 정답은 세트 안에서 중복 금지)
점수 규칙
- 가장 먼저 정답을 클릭한 1명만 점수를 얻습니다.
- 100점에서 시작해 1초에 1점씩 줄어듭니다 (최소 40점).
- 오답을 누르면 그 문제는 더 못 누릅니다. 20초 안에 아무도 못 맞히면 정답이 3초간 공개되고 다음 문제로 넘어갑니다.
- 규칙은 로그인 화면·대기실에 항상 표시되고, 문제 진행 중에는 "지금 맞히면 +N점"이 실시간으로 보입니다.
효과음 · 참가자 표시
- 입장 / 문제 시작 / 정답 / 오답 / 시간 초과 / 마지막 10초 째깍 / 게임 종료 효과음 (파일 없이 브라우저에서 합성). 상단 🔊 버튼으로 끌 수 있습니다.
- 상단 👥 N명 버튼: 접속 중인 학생 수. 누르면 전체 참가자 목록(순위·점수·접속 여부)이 열립니다.
- 대기실에 입장한 사람 전원이 표시되며, 10초마다 보내는 생존 신호가 30초 넘게 없으면 회색 "나감?"으로 바뀝니다. 선생님은 "나간 사람 정리" 버튼으로 한 번에 지울 수 있습니다.
🎮 바로 해보기
https://ai-word-battle.vercel.app
게임 방법
- 학생: 닉네임을 입력하고 입장 → 문제를 읽고 화면에서 정답 단어를 클릭
- 선생님: 문제 수를 정하고 게임 시작 → 실시간으로 학생들의 점수·순위 확인
- 제한 시간(라운드당 20초) 동안 가장 많이 맞힌 사람이 승리!
선생님 모드 들어가는 법
- 주소 뒤에
?mode=admin 을 붙이세요 (예: 사이트주소/?mode=admin)
- 예전 방식인
#leethemom 도 그대로 동작합니다
- 선생님 비밀번호를 입력하면 관리 화면이 나옵니다
- ⚠️ 포크해서 쓰실 분은
src/App.jsx의 T_PASSES 배열을 본인 비밀번호로 바꾸세요 (여러 개 등록 가능)
기술 스택
- React + Vite
- Firebase Realtime Database (실시간 동기화)
실행 방법
npm install
npm run dev
배포용 빌드는 npm run build → dist/ 폴더를 올리면 됩니다.
포크해서 직접 쓰려면 (중요)
이 게임은 Firebase 데이터베이스를 사용합니다.
본인 Firebase 프로젝트를 만들어 연결하지 않으면 원본과 데이터가 섞입니다.
- 이 저장소를 Fork
- Firebase 콘솔에서 프로젝트 생성 → Realtime Database 만들기
src/App.jsx 맨 위의 FIREBASE_CONFIG 를 본인 프로젝트 설정으로 교체- Authentication → 익명(Anonymous) 로그인 사용 설정
- Realtime Database 규칙을 아래 보안 규칙으로 설정
- Vercel 등에 배포
보안 규칙:
{
"rules": {
".read": "auth != null",
".write": "auth != null"
}
}
라이선스
자유롭게 수업에 활용하세요. 개선 제안(Pull Request) 환영합니다! 🙌
