US State Capitals - Geography Quiz Game

Seele01-Flash
By
US State Capitals is an engaging educational quiz game that challenges players to match American state capitals with their corresponding states on an interactive map. Perfect for students, teachers, and geography enthusiasts looking to improve their US geography knowledge.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "**US State Capitals - 3D Map Trivia**". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style**: Create a clean, educational aesthetic. The centerpiece is a **low-poly, extruded 3D map of the United States**. * **State Meshes**: Each of the 50 states should be an individual 3D mesh (using `ExtrudeGeometry` from path shapes). * **Color Palette**: Use a **pastel color scheme** to differentiate adjacent states (Pale Orange, Soft Green, Lavender, Muted Pink), similar to the reference image. The background (ocean) should be a vibrant, flat Cyan/Blue (`#00BFFF`). * **Lighting**: Use `AmbientLight` for base visibility and a `DirectionalLight` casting soft shadows to emphasize the 3D depth of the states. * **Effects**: When a state is selected, it should slightly "pop up" (animate along the Y-axis) and glow. * **Mobile Optimization**: Use `BufferGeometry` for all state meshes to ensure 60FPS on mobile devices. Keep polygon count low for state borders. ### 2. Audio Requirements * **BGM**: A calm, "thinking-style" looped track. Light marimba or soft synth chimes to encourage focus without being distracting. * **Sound Effects (SFX)**: * **Tap/Select**: A subtle "wooden block" click sound. * **Correct Answer**: A bright, ascending major triad chime (Reward sound). * **Wrong Answer**: A soft, low-pitched "thud" or "buzzer" (not too harsh). * **Win/Round Complete**: A short celebratory fanfare. ### 3. Gameplay Loop * **Question Phase**: The UI displays a text prompt at the top: *"What is the capital of [State Name]?"* OR *"Where is [Capital City] located?"* (Randomize between these two modes if possible, or stick to the reference: Show Capital Name -> Find State). * **Interaction Phase**: The player navigates the 3D map and taps a state. * **Validation Logic**: * **Correct**: The state turns **Bright Green**, the score increments, and a "Correct!" message overlays. After 1.5 seconds, a new question appears. * **Incorrect**: The selected state turns **Red**, and the *actual* correct state briefly pulses **Yellow** to educate the player. The player loses a "Heart/Life" or resets their streak. * **Win Condition**: Successfully identify all 50 states (or achieve a high score within a time limit). ### 4. Mobile Controls & Interaction * **Camera Controls**: Implement `OrbitControls` with restricted angles. * Allow **Pinch-to-Zoom** (essential for small states like Rhode Island/Delaware). * Allow **One-finger Drag** to pan around the map. * Limit rotation (keep the map generally facing "North/Up") to prevent user disorientation. * **Touch Input**: Use a `Raycaster` for precise state selection. The touch area for smaller states should be slightly padded if possible to prevent frustration. * **UI Layout**: * **Question Box**: A large, high-contrast distinct box at the top center (taking up top 15% of the screen). Text must be readable on small screens (min 18px). * **Score/Streak**: Floating UI in the top-left corner. * **Feedback**: Haptic feedback (vibration) via `navigator.vibrate()` on valid taps. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

US State Capitals is an interactive geography quiz game designed to test and improve your knowledge of American state capitals. With 50 states to master, this educational puzzle game offers an engaging way to learn one of the fundamental aspects of US geography. The game presents capital cities and challenges you to identify the correct state on a colorful, interactive map of the United States.

This brain-teasing quiz game is perfect for students preparing for geography tests, teachers looking for classroom resources, or anyone interested in expanding their knowledge of American geography. The game's simple yet effective format makes learning state capitals both fun and memorable.

Core Features

Interactive Learning Experience

The game features a vibrant, user-friendly interface with a detailed map of the United States. Each state is clearly marked and color-coded, making it easy to navigate and identify different regions. The interactive design ensures that learning feels more like playing than studying.

Comprehensive Coverage

All 50 US state capitals are included in the game, from well-known capitals like Sacramento (California) and Austin (Texas) to lesser-known ones like Pierre (South Dakota) and Montpelier (Vermont). This comprehensive approach ensures complete coverage of US geography.

Educational Value

Beyond simple memorization, the game helps develop geographical awareness and spatial reasoning skills. Players learn to associate capital cities with their states' locations, building a mental map of the United States that extends far beyond just names.

Instant Accessibility

As an HTML5 game, US State Capitals loads instantly in any modern web browser without requiring downloads or installations. This makes it perfect for quick study sessions or classroom use where immediate access is essential.

Gameplay

How to Play

The gameplay mechanics are straightforward yet effective:

  1. Capital Presentation : The game displays the name of a state capital at the top of the screen
  2. State Selection : Players must click on the corresponding state on the interactive US map
  3. Immediate Feedback : Correct and incorrect answers are indicated instantly, promoting learning through repetition
  4. Progressive Challenge : As you advance, the game may increase difficulty by presenting less familiar capitals

Learning Strategy

The game encourages active learning by requiring players to make connections between capital names and state locations. This visual-spatial approach to learning is often more effective than simple text-based memorization, as it engages multiple cognitive processes.

Operation Guide

Mouse/Touch Controls : Simply click or tap on the state you believe corresponds to the displayed capital city. The game's responsive design works equally well on desktop computers, tablets, and smartphones.

Visual Cues : Use the map's color coding and state shapes to help identify locations. Larger states like Texas and Alaska are easier to spot, while smaller northeastern states may require more careful attention.

Learning Tips : Start with capitals you already know to build confidence, then work on memorizing the more challenging ones. Pay attention to patterns - many capitals are major cities, but some surprising exceptions exist.

Why Play This Game

Educational Benefits

This game transforms geography learning from passive memorization into active engagement. Students can improve their test scores while actually enjoying the learning process. The immediate feedback helps reinforce correct answers and quickly correct mistakes.

Perfect for All Ages

Whether you're a middle school student studying for a geography test, a high school student preparing for standardized exams, or an adult looking to brush up on American geography knowledge, this game adapts to all skill levels.

Classroom Ready

Teachers can easily incorporate this game into lesson plans, use it for warm-up activities, or assign it as homework. The game's educational focus and appropriate content make it suitable for classroom environments.

Convenient Learning

With no downloads required and full mobile compatibility, you can practice US state capitals anywhere, anytime. Perfect for studying during commutes, lunch breaks, or whenever you have a few spare minutes.

Frequently Asked Questions (FAQ)