Play Geography: 50 States

Seele01-Flash
By
Play Geography: 50 States is an engaging educational quiz game that challenges your knowledge of US geography. Click on the correct locations of all 50 American states while racing against time to improve your geographical skills.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Play Geography: 50 States". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style**: A "2.5D" Interactive Map. Use flat, slightly extruded geometry for each of the 50 US States to create a tactile "puzzle piece" aesthetic. The map should look like a high-quality, clean political atlas. * **Color Palette**: Use the pastel colors seen in the reference image (Soft Pink, Muted Green, Pale Yellow, Lavender) for the states to distinguish borders clearly. The ocean/background should be a vibrant Cyan/Blue. * **Geometry**: Import or generate simplified geometry (low-poly) for the US map (compatible with GeoJSON data converted to `THREE.ExtrudeGeometry`). * **Camera**: Use an **Orthographic Camera** looking top-down to preserve map proportions and avoid perspective distortion. * **Optimization**: Use `BufferGeometry` for all meshes. Ensure materials utilize simple `MeshLambertMaterial` or `MeshToonMaterial` for performance on mobile devices. Avoid high-cost dynamic shadows; use baked ambient occlusion if necessary. ### 2. Audio Requirements * **BGM**: A light, intellectual, and looping instrumental track (think "Quiz Show" or "Classroom" vibe)—calm but encouraging focus. * **Sound Effects (SFX)**: * **Selection**: A crisp "pop" or "paper rustle" sound when a state is tapped. * **Success**: A bright, harmonious major-chord chime when the correct state is found. * **Failure**: A soft, non-punishing "buzzer" or low tone. * **Victory**: A short fanfare loop when all 50 states are completed. ### 3. Gameplay Loop * **Game Flow**: 1. **Start**: Display a "Start Quiz" button overlay. 2. **Prompt**: The HUD displays the name of a target state (e.g., "Find Texas"). 3. **Action**: The player taps a state on the map. 4. **Validation**: * **Correct**: The state turns bright green, emits a small particle burst, and the game moves to the next state immediately. Score increases. * **Incorrect**: The tapped state flashes red briefly. The *correct* state flashes yellow to teach the player the location. No score increase. 5. **End**: After all 50 states are queried, show a Summary Screen with "Total Time" and "Accuracy Percentage". * **Timer**: A persistent timer counts upward in the UI to encourage speed-running (beating personal bests). ### 4. Mobile Controls & Interaction * **Touch Interaction**: Implement a Raycaster linked to touch events (`touchstart`). * **Single Tap**: Selects a state. * **Pinch & Drag**: **Crucial for mobile**. Allow the user to Zoom in/out and Pan the camera to find smaller states (like Rhode Island or Delaware). * **Feedback**: * **Visual**: When a finger touches a state (before lifting), the state should highlight (change color brightness) or lift slightly on the Z-axis to confirm selection intent. * **Haptic**: Trigger a short vibration (`navigator.vibrate(10)`) on valid state clicks. * **UI Layout**: * **Top Bar**: Displays "Find: [State Name]" in large, bold text. * **Bottom Bar**: Displays "Score: X/50" and "Time: 00:00". * Ensure all UI elements are outside the main map interaction area but easily readable on portrait and landscape modes. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

Play Geography: 50 States is an interactive educational game that transforms learning US geography into an exciting challenge. With a solid 3.4/5 rating from players, this browser-based quiz game tests your ability to locate all 50 American states on an interactive map. Whether you're a student studying geography or someone looking to refresh your knowledge of American states, this game provides an entertaining way to learn.

The game combines education with entertainment, featuring a colorful, easy-to-read map of the United States where you'll need to identify states ranging from obvious ones like Texas and California to trickier locations like Delaware and Rhode Island.

Core Features

Educational Learning System

The game doesn't just test you - it teaches you. When you make an incorrect guess, the game immediately shows you the correct location and provides helpful feedback. This instant correction system ensures you learn from mistakes and improve with each playthrough.

Timed Challenge Mode

Race against the clock as you identify states across America. The timer adds excitement and helps you track your improvement over multiple sessions. Challenge yourself to beat your previous best times while maintaining accuracy.

Performance Tracking

The game keeps track of both your speed and accuracy, allowing you to: - Monitor correct answers vs. incorrect guesses - Compare completion times across different attempts - Set personal goals for improvement - Challenge friends to beat your scores

Mobile-Friendly Design

Built with HTML5 technology, the game works seamlessly across all devices. Whether you're using a computer, tablet, or smartphone, you can enjoy the same smooth gaming experience.

Game Mechanics

Each round presents you with a question asking you to locate a specific US state. Simply click on the area of the map where you think that state is located. The game covers all 50 states, from the largest (Alaska) to the smallest (Rhode Island), ensuring comprehensive geographic coverage.

The interactive map is designed for clarity, with distinct state boundaries and colors that make identification easier. States are presented in random order, so you can't rely on patterns - you need genuine geographic knowledge.

Operation Guide

Basic Controls: - Mouse Click : Select the state location on the map - Read Questions : Pay attention to which state you need to find - Visual Feedback : Correct answers are highlighted in green, incorrect ones in red

How to Play: 1. Read the state name that appears on screen 2. Locate that state on the US map 3. Click on the correct area 4. Learn from feedback if you're wrong 5. Continue until you've identified all requested states 6. Check your final score and completion time

Tips for Success: - Start with states you're most confident about - Pay attention to regional clusters (New England, Southwest, etc.) - Remember geographic landmarks (coastlines, Great Lakes, mountain ranges) - Use the learning feedback to memorize difficult states

Why Play This Game

Perfect for Students : This game is an excellent study tool for geography classes, social studies, or anyone preparing for citizenship tests. The interactive format makes memorizing state locations much more engaging than traditional flashcards.

Brain Training : Regular play helps improve spatial memory, pattern recognition, and general knowledge. It's a fun way to exercise your brain while learning useful information.

Family-Friendly Competition : Challenge family members to see who knows US geography best. The scoring system makes it easy to create friendly competitions and track everyone's progress.

No Cost, No Downloads : Completely free to play with no registration required. Simply open your web browser and start playing immediately.

Curriculum Support : Teachers can use this game as a classroom activity or homework assignment to reinforce geography lessons in an interactive way.

Whether you're studying for a test, teaching geography, or simply want to challenge your knowledge of American states, Play Geography: 50 States offers an engaging and educational gaming experience that makes learning geography both fun and effective.

Frequently Asked Questions (FAQ)