US States - Interactive Geography Puzzle Game

Seele01-Flash
By
US States is an engaging educational puzzle game that challenges players to identify all 50 American states on an interactive map. Perfect for students, teachers, and geography enthusiasts looking to improve their US map knowledge.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "US States 3D Geo-Puzzle". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style:** A clean, "educational toy" aesthetic. The map should look like a physical wooden or plastic puzzle board sitting on a table. * **Map Assets:** * Use **ExtrudeGeometry** to create 3D meshes for each of the 50 US States based on simplified GeoJSON coordinates (to maintain high FPS on mobile). * **Color Palette:** Use soft pastel colors (Pale Blue, Soft Pink, Mint Green, Light Yellow) assigned so that no neighboring states share the same color. * **State Borders:** Create a slight gap between state meshes to simulate puzzle piece cutouts, or use `LineSegments` to draw distinct borders. * **Positions:** Move Alaska and Hawaii to the bottom-left corner (scaled appropriately) to fit the viewport better, typical of educational maps. * **Environment:** A soft, solid ocean-blue background color (`#a0d8ef`). Add a simple ambient light and a directional light casting soft shadows to give depth to the extruded states. * **Optimization:** Ensure geometry vertex counts are low (simplify paths). Use a shared material type (MeshLambertMaterial or MeshToonMaterial) for performance. ### 2. Audio Requirements * **Background Music (BGM):** A relaxing, looping acoustic guitar or low-fidelity "study beat" track that aids concentration without distraction. * **Sound Effects (SFX):** * **Select/Tap:** A subtle wooden "clack" sound (simulating placing a puzzle piece). * **Correct Answer:** A bright, uplifting major-key chime. * **Wrong Answer:** A soft, low-pitched "thud" or buzzer (not too harsh). * **Victory:** A short fanfare when the quiz is complete. * **UI Sounds:** Crisp clicks for menu buttons. ### 3. Gameplay Loop * **Initialization:** Game loads with a "Start Quiz" button. Score is initialized at 100. * **Question Phase:** * The UI displays: "Find: [State Name]" at the top of the screen. * The game picks a random state from a pool of 30 questions (as per original mechanics). * **Interaction Logic:** * **1st Attempt:** Player taps a state. * *If Correct:* State turns Bright Green, Score stays, play Success SFX, load next question. * *If Wrong:* State flashes Red briefly, Score -10, play Error SFX. Prompt remains. * **2nd Attempt:** * *If Correct:* Same as above. * *If Wrong:* The **correct** state glows Gold/Yellow to show the answer. Score -10. Wait 2 seconds, then load next question. * **End Condition:** After 30 questions, show a "Report Card" modal with the final score and a "Replay" button. ### 4. Mobile Controls & Interaction * **Camera Controls (Crucial):** * Use `OrbitControls` but restrict rotation (allow slight tilting but mostly top-down view). * **Gestures:** Enable **Pinch-to-Zoom** (essential for small states like Rhode Island or Delaware) and **One-finger Pan**. * Limit zoom in/out distance to prevent the camera from clipping through the map or getting lost. * **Touch Interaction:** * Use a **Raycaster** triggered by `touchstart` events (avoid `click` to remove 300ms delay on mobile). * Increase the hit-box sensitivity for smaller states if possible. * **Haptic Feedback:** Trigger `navigator.vibrate(50)` on a wrong answer and `navigator.vibrate(20)` on a correct answer for tactile feedback. * **UI Layout:** * **Portrait Mode:** Map centered, Question text at top (large font), Score and Progress at bottom. * **Landscape Mode:** Map on left (70% width), Question/UI sidebar on right (30% width). * **Reset View Button:** A floating action button (FAB) in the corner to quickly reset the camera zoom/position to see the whole map. 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 States is a comprehensive educational puzzle game designed to help players master American geography. With a solid 4.38/5 rating, this interactive learning tool transforms the challenge of memorizing all 50 states into an engaging gaming experience. Whether you're a student preparing for geography tests or simply want to brush up on your US map knowledge, this game provides an effective and entertaining way to learn.

The game presents players with 30 carefully selected questions each round, covering states from the easily recognizable California and Alaska to the more challenging smaller northeastern states. The interactive format makes geography learning more engaging than traditional memorization methods.

Core Features

Interactive Learning Experience

Unlike static geography quizzes, this game offers a fully interactive map where you can click directly on states to answer questions. The visual learning approach helps reinforce memory through spatial recognition, making it easier to remember state locations long-term.

Progressive Difficulty System

The game intelligently mixes easy-to-identify states with more challenging ones, ensuring players of all skill levels can enjoy and learn. Beginners can start with obvious states like Texas and Florida, while advanced players are challenged with smaller states like Rhode Island and Delaware.

Educational Value

Designed specifically for educational purposes, the game serves as an excellent supplement to geography curriculum. Teachers can use it in classrooms, parents can engage children in learning at home, and students can practice independently to improve their test scores.

Mobile-Friendly Design

Built with HTML5 technology, the game runs smoothly on all devices including smartphones, tablets, and desktop computers. This cross-platform compatibility ensures you can practice your geography skills anywhere, anytime.

Gameplay Mechanics

The game follows a straightforward yet effective format that balances challenge with learning support:

Scoring System

Each round starts with a perfect score of 100 points. Players lose points for incorrect answers, creating motivation to think carefully before clicking. This scoring system encourages accuracy while still allowing room for learning from mistakes.

Second Chance Feature

Recognizing that learning involves trial and error, the game provides two attempts for each question. If you answer incorrectly the first time, you get another chance before the correct answer is revealed. This forgiving approach reduces frustration while maintaining educational value.

Visual Learning Aids

When you answer correctly or after the game reveals the correct answer, the state remains highlighted throughout the session. This visual reminder prevents repeated mistakes and helps reinforce the correct locations in your memory.

Operation Guide

Getting Started

  1. Launch the Game : Click the play button to begin your geography challenge
  2. Read Questions Carefully : Each question will ask you to identify a specific US state
  3. Click to Answer : Simply click on the state you believe is correct
  4. Use Zoom Features : Utilize the zoom controls in the upper left corner to better see smaller states
  5. Learn from Mistakes : Pay attention to highlighted correct answers to improve future performance

Pro Tips for Success

  • Start with larger, more recognizable states to build confidence
  • Use the zoom feature liberally when dealing with northeastern states
  • Pay attention to state shapes and relative positions
  • Take your time - there's no time pressure
  • Review highlighted states after each question to reinforce learning

Why Play This Game

Perfect Educational Tool

This game excels as both a learning resource and an assessment tool. Students can use it to prepare for geography tests, while teachers can incorporate it into lesson plans to make learning more interactive and engaging.

Suitable for All Ages

The game's easy difficulty level and educational focus make it appropriate for elementary students learning basic geography, middle schoolers studying US history, high school students preparing for standardized tests, and adults who want to refresh their knowledge.

Completely Free Access

As a free online educational resource, the game provides valuable learning opportunities without any cost barriers. No downloads, registrations, or payments required - just immediate access to quality educational content.

Proven Effectiveness

The game's high rating of 4.38 stars reflects its effectiveness as both an educational tool and an entertaining game. Players consistently report improved geography knowledge and increased confidence in identifying US states after regular gameplay sessions.

Frequently Asked Questions (FAQ)