Guess This Quiz Game 🎯

Test your knowledge with this fun image-based quiz game!

About This Project

Guess This Quiz Game is a web-based quiz game inspired by MBC's variety show 'Earth Arcade'. It reimagines the show's popular image guessing segment as an English-language web game that can be enjoyed with friends from around the world. Just like the show, players are presented with images on various topics and must guess the correct answer within a time limit, capturing the same excitement and tension of the original broadcast.

Game Features

Diverse Categories

• Global Stars: World-famous celebrities and public figures
• Korean Celebrities: Popular Korean entertainers
• K-pop Stars: Your favorite K-pop idols and groups
• Historical Figures: Iconic people who shaped history
• Animals: Wildlife from around the globe
• Dog Breeds: Adorable canine companions of all types
• Flags: National flags from every corner of the world
• Capitals: Match major cities to their countries

Flexible Timer System

• Customizable timing from 2 to 30 seconds
• Quick presets for instant setup (2s, 3s, 5s, 10s, 15s)
• Visual countdown with warning effects as time runs out

User-Friendly Design

• Fully responsive - works great on mobile, tablet, and desktop
• Click-to-reveal intuitive interface
• Beautiful gradients and smooth animations throughout
• Large, clear text for easy reading

Tech Stack

• Backend: Bun + TypeScript + Express
• Frontend: Vanilla JavaScript + HTML5 + CSS3
• Image Source: Automated downloads via Wikipedia API
• Data Management: JSON-based content system

How to Play

1. Pick Your Topic: Choose from 8 exciting categories
2. Set Your Timer: Adjust anywhere from 2-30 seconds
3. Start Guessing: Study the image and think of your answer
4. Reveal the Truth: Click anywhere or wait for the timer to see the answer
5. Keep Going: Click to move on to the next challenge
6. Play Forever: When you've seen everything, start fresh with a new game

Getting Started

1. Install dependencies:

npm install

2. Optimize images for fast loading (Recommended):

npm run optimize-images

This command converts all images to WebP format and compresses them for significantly faster loading.

3. Fire up the server:

bun run dev:bun

4. Jump into the game:

http://localhost:3000

🚀 Performance Optimizations

Image Loading Speed Improvements

• WebP Support: Automatically uses WebP images when supported (60-80% size reduction)
• Image Compression: High-quality compression using Sharp library
• Batch Loading: Prevents network overload with batch-wise image preloading
• Progress Indicator: Visual loading progress for better user experience
• gzip Compression: Server-level compression for all resources
• Browser Caching: Aggressive caching for images and static files

Slow Internet Support

• Fallback Mechanism: Automatic fallback to original images if WebP fails
• Progressive Loading: Priority loading for essential images first
• Offline Handling: Placeholder images for failed loads

Key Features

• No Repeats: Each game session shows unique questions until you've seen them all
• Quick Exit: Bail out anytime with the handy Exit button
• Device Optimized: Seamless experience across all your devices
• Visual Polish: Timer warnings, hover effects, and buttery-smooth animations

Ready to test your knowledge? Let's see what you've got!

---

🇰🇷 한국어 버전 (Korean Version)

Guess This Quiz Game 🎯

이미지를 보고 정답을 맞추는 재미있는 퀴즈 게임입니다!

프로젝트 소개

Guess This Quiz Game은 MBC 예능 프로그램 '지구 오락실'에서 영감을 받아 만든 퀴즈 게임입니다. '지구 오락실'의 인기 코너인 이미지 맞추기를 웹 게임으로 재해석했으며, 특히 외국인 친구들과도 함께 즐길 수 있도록 영어 버전으로 개발했습니다. 방송처럼 다양한 주제의 이미지가 제시되면 정해진 시간 안에 정답을 맞추는 방식으로, 실제 방송의 재미와 긴장감을 그대로 느낄 수 있습니다.

게임 특징

다양한 주제

• Global Stars: 전 세계 유명 인물들
• Korean Celebrities: 한국 연예인들
• K-pop Stars: K-pop 아이돌들
• Historical Figures: 역사적 인물들
• Animals: 다양한 동물들
• Dog Breeds: 강아지 품종들
• Flags: 세계 각국의 국기
• Capitals: 세계 수도 맞추기

타이머 기능

• 2초 ~ 30초 사이에서 타이머 설정 가능
• 프리셋 버튼으로 빠른 설정 (2초, 3초, 5초, 10초, 15초)
• 시간 경과 시 시각적 경고 효과

사용자 친화적 인터페이스

• 반응형 디자인으로 모바일/태블릿/데스크톱 지원
• 직관적인 클릭 인터페이스
• 아름다운 그라데이션과 애니메이션 효과
• 큰 정답 텍스트로 가독성 향상

기술 스택

• Backend: Bun + TypeScript + Express
• Frontend: Vanilla JavaScript + HTML5 + CSS3
• 이미지 소스: Wikipedia API를 통한 자동 다운로드
• 데이터: JSON 파일 기반 콘텐츠 관리

게임 플레이 방법

1. 주제 선택: 8가지 주제 중 하나를 선택
2. 타이머 설정: 원하는 시간(2-30초)으로 설정
3. 게임 시작: 이미지가 나타나면 정답을 생각
4. 정답 확인: 화면을 클릭하거나 시간이 지나면 정답 공개
5. 다음 문제: 클릭해서 다음 문제로 진행
6. 무한 플레이: 모든 문제를 다 보면 게임 재시작 가능

실행 방법

# 서버 실행
bun run dev:bun

# 게임 접속
http://localhost:3000

주요 기능

• 중복 방지: 한 게임 세션 내에서 같은 문제 반복 없음
• 즉시 종료: Exit 버튼으로 언제든 메인 화면으로 복귀
• 반응형: 모든 기기에서 최적화된 경험
• 시각적 피드백: 타이머 경고, 호버 효과, 부드러운 애니메이션

퀴즈를 통해 다양한 지식을 재미있게 익혀보세요!

Screenshots