Skip to content

README.md

Latest commit

 

History

History
153 lines (115 loc) · 7.38 KB

README.md

File metadata and controls

153 lines (115 loc) · 7.38 KB
Raw

🎉 게임 모음집 (Game Collection)

PPT로 만들어서 했었던 게임들을 관리하기 귀찮아서 만든 게임 모음집

웹 브라우저에서 바로 즐기는 파티 게임 모음집입니다. 설치·빌드 없이 작동합니다.

실행 방법

index.html 파일을 더블클릭해서 브라우저로 열면 끝입니다.

발표/큰 화면용으로 좋습니다. (F11 = 전체화면)

🛠️ 기술 스택 (Tech Stack)

구분 사용 기술 비고
프론트엔드 순수 HTML + CSS + JavaScript (Vanilla) 프레임워크·빌드 도구없음. 화면 전환은 자체 라우터(js/app.js)
스타일 커스텀 CSS (css/style.css) 파티 테마, 애니메이션. 웹폰트Google Fonts(Jua, Gaegu)
QR 코드 qrcodejs CDN 로드, 클라이언트에서 QR 생성
실시간 DB Firebase Realtime Database 밸런스 게임의실시간 투표에만 사용 (없어도 나머지 게임은 동작)
배포/호스팅 Vercel GitHub 연동 →main 브랜치에 push 시 자동 배포
소스 관리 Git + GitHub 저장소:github.com/fuliver/Game-Collection
  • 빌드 과정이 없습니다. 파일을 그대로 브라우저가 읽어 실행하는 정적 사이트(Static Site)입니다.
  • 서버(백엔드)도 없습니다. 유일한 서버측 요소는 실시간 투표용 Firebase(관리형 서비스)뿐입니다.

게임 구성

첫 화면에서 게임을 고릅니다 (게임 선택 → 소개 → 시작).

⚡ 스피드 퀴즈

  • 16개 카테고리, 각 15문제
  • 카테고리 선택 → 타이머(기본 60초) 안에 정답 맞히기
  • 정답! ✓ 버튼 = +1점 / 패스 ✕ = 다음 문제 / 정답 보기 = 답 공개
  • 키보드 단축키: → 또는 O = 정답, ← 또는 X = 패스, Space = 정답 보기
  • 시간이 끝나거나 15문제를 다 풀면 결과 화면

👨‍👩‍👧‍👦 Family Feud

  • 설문/순위 답변 맞히기, 두 팀 점수 대결
  • 답변 칸 클릭 = 공개 + 라운드 합계에 점수 적립 (다시 누르면 취소)
  • 전체 공개, 이전/다음 라운드
  • + 라운드 점수 = 현재 라운드 합계를 해당 팀 점수로 전달
  • ⭐ +45 = 마지막 칸 정답을 맞힌 팀에게 보너스
  • 팀 이름은 직접 입력해서 바꿀 수 있어요

⚖️ 밸런스 게임

  • 두 선택지 중 하나 고르기, 화면에서 투표수·비율 확인
  • 양쪽 칸 클릭 = 그쪽에 +1표 (화면 집계 모드)
  • 📱 실시간 투표(선택): QR을 스캔하면 참가자 휴대폰에 질문이 뜨고, A/B를 누르면 메인 화면에 실시간 집계됩니다 → 아래 "실시간 투표 설정" 참고

📚 현재 수록 콘텐츠

스피드 퀴즈 카테고리 (16종 · 각 15단어)

교회 / 성경인물1 / 성경인물2 / 음식1 / 음식2 / 국가1 / 국가2 / 사물1 / 사물2 / 애니메이션 / 인물1 / 인물2 / 영화 / 브랜드 / 게임 / 명대사

뒤에 **‘2’**가 붙은 카테고리는 난이도가 높고 정답당 20점(나머지는 10점)

Family Feud 라운드 (총 9개)

  1. 2026 산리오 캐릭터 종합 인기순위 TOP10
  2. 세계에서 가장 부자 순위 TOP10 (Forbes)
  3. 역대 한국영화 관객수 TOP10
  4. 세계에서 인구가 가장 많은 나라 TOP10
  5. 성경(영어 KJV)에 가장 많이 나오는 단어 TOP10
  6. 2025 멜론 연간차트(국내) TOP10
  7. 외국인이 좋아하는 한식 TOP10
  8. 넷플릭스 한국 오리지널 드라마 누적 뷰수 TOP10
  9. 대한민국 OTT 앱 이용자 점유율(MAU) 순위 (2026.05 기준)

밸런스 게임

가볍고 재밌는 밸런스 질문 20개 (평생 치킨 vs 피자, 과거 vs 미래 여행 등)

📱 실시간 투표 설정 (밸런스 게임 - 선택 사항)

휴대폰 참여 기능은 무료 Firebase 실시간 DB가 필요합니다. 설정 안 하면 이 기능만 꺼지고 나머지는 그대로 동작합니다.

  1. https://console.firebase.google.com → 프로젝트 만들기(무료)
  2. 빌드 > Realtime Database > 데이터베이스 만들기 → "테스트 모드로 시작"
  3. 규칙을 아래처럼 설정 (게임용, 누구나 읽기/쓰기): 
    { "rules": { "rooms": { ".read": true, ".write": true } } }
  4. 프로젝트 설정(⚙️) > 내 앱 > 웹앱(</>) 추가 → firebaseConfig 값 복사
  5. js/firebase-config.js 열어서 값 붙여넣기 (특히 databaseURL 필수)
  6. 배포(git push) 후, 밸런스 게임에서 "📱 실시간 투표 켜기" → QR 표시 → 참가자 스캔!

⚠️ 위 규칙은 누구나 읽고 쓸 수 있는 공개 설정입니다. 잠깐 쓰는 게임용으로는 괜찮지만, 민감한 데이터는 넣지 마세요. 참가자 페이지 주소는 vote.html?room=코드 입니다.

문제 내용 수정 (가장 중요!)

모든 문제는 data/ 폴더의 파일만 고치면 됩니다. 코드는 건드릴 필요 없습니다.

스피드 퀴즈 — data/speedquiz.js

설명하기(제시어) 방식. 카테고리마다 { points, words }.

"음식1": {
  points: 10,                    // 정답당 점수 ('2' 카테고리는 20)
  words: ["햄버거", "김밥", ...], // 단어 15개
},

Family Feud — data/familyfeud.js

순위/설문 라운드. 점수는 1위 10점 → 10위 1점.

{
  question: "질문 (예: 세계 인구 많은 나라 TOP10?)",
  answers: [
    { text: "1위 답", points: 10 },
    { text: "2위 답", points: 9 },
    // ... 10개 (마지막 칸 정답 = ⭐+45 보너스)
  ],
},

밸런스 게임 — data/balancegame.js

{ a: "선택지 A", b: "선택지 B" },

폴더 구조

JUST/
├─ index.html            # 메인 화면(허브/각 게임)
├─ vote.html             # 참가자 휴대폰 투표 페이지(밸런스 실시간)
├─ css/style.css         # 디자인
├─ js/
│  ├─ app.js             # 화면 전환(라우팅)
│  ├─ speedquiz.js       # 스피드 퀴즈 로직
│  ├─ familyfeud.js      # Family Feud 로직
│  ├─ balancegame.js     # 밸런스 게임 로직(로컬+실시간)
│  ├─ live.js            # Firebase 실시간 공용 헬퍼
│  ├─ firebase-config.js # Firebase 설정값 (실시간 투표)
│  └─ vote.js            # 참가자 투표 페이지 로직
└─ data/
   ├─ speedquiz.js       # ← 스피드 퀴즈 단어 (여기 수정)
   ├─ familyfeud.js      # ← Feud 라운드 (여기 수정)
   └─ balancegame.js     # ← 밸런스 문제 (여기 수정)

게임 더 추가하기

허브(index.html의 screen-hub)에 카드를 하나 더 넣고, 새 screen-* 섹션과 js/ 로직 파일을 추가하면 모음집에 새 게임을 계속 붙일 수 있습니다.