50 States - Geography Learning Game

Seele01-Flash
By
50 States is an engaging educational puzzle game that challenges players to place all US states in their correct locations on the map. Perfect for testing and improving your American geography knowledge while having fun.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "**50 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 stylized, clean, "educational toy" aesthetic. The game scene should look like a high-quality physical puzzle sitting on a desk. * **Map Rendering:** The US Map should be rendered using `THREE.ExtrudeGeometry` derived from SVG paths or GeoJSON data. * **The Board:** An indented base map (slots) representing the USA, colored in a dark matte material (e.g., dark blue or slate grey) to represent the empty slots. * **The Pieces:** Individual state shapes that are slightly thicker than the board slots, colored in a pleasing palette (e.g., pastel gold, coral, teal) to distinguish them from the background. * **Camera:** Use an **Orthographic Camera** positioned top-down (slightly angled) to ensure map accuracy and prevent perspective distortion, making it easier to judge distances. * **Lighting:** Soft Ambient lighting coupled with a Directional Light to cast subtle shadows, giving the puzzle pieces depth and making them feel tactile. * **Performance:** Use simple materials (`MeshLambertMaterial` or `MeshPhongMaterial`). Ensure geometries are simplified (low vertex count per state) to maintain 60 FPS on mobile browsers. ### 2. Audio Requirements * **BGM:** A calm, acoustic guitar or lo-fi "study beat" track that encourages focus without being distracting. * **Sound Effects (SFX):** * **Pickup:** A soft "pop" or "suction" sound when a player touches/lifts a state. * **Snap/Correct:** A satisfying wooden "clack" or magnetic click sound when a state is dropped in the correct slot. * **Wrong:** A gentle "thud" or low-pitched buzz if placed incorrectly. * **Win:** A cheerful chime or fanfare when all 50 states are placed. ### 3. Gameplay Loop * **Initialization:** The empty US map board is centered on the screen. * **Active Phase:** 1. One state appears at a time (floating above the map or in a "staging area" at the bottom). 2. The name of the state is displayed clearly in the UI (e.g., "Find location for: TEXAS"). * **Interaction:** The player drags the state piece around the board. * **Validation Logic:** * Calculate the Euclidean distance between the dropped position and the target slot position. * **Success:** If the distance is within a strict threshold, the piece "snaps" into the slot, turns green briefly, and locks in place. Score increases. * **Failure:** If the drop is outside the threshold, calculate the distance "off" in virtual miles. Display a floating text feedback (e.g., "400 miles off!"). The piece returns to the staging area. * **Hint System:** If the player fails twice on the same state, highlight the correct slot on the board with a glowing outline. * **Victory:** The game ends when all 50 states are successfully placed. Show a summary screen with accuracy stats. ### 4. Mobile Controls & Interaction * **Touch Controls:** Implement a robust `Raycaster` system handling `touchstart`, `touchmove`, and `touchend` events. * **Drag offset:** Ensure the piece is slightly offset above the finger/touch point so the user's hand doesn't obscure the puzzle piece they are moving. * **Screen Orientation:** **Landscape orientation** is mandatory (as the US map is wider than it is tall). If the user is in Portrait, display a "Please Rotate Device" overlay. * **UI Layout:** * HUD elements (Current State Name, Score) should be placed at the top corners, away from the central play area. * Text must be large and legible (minimum 16px-20px equivalent). * **Haptic Feedback:** Trigger `window.navigator.vibrate(50)` when a piece successfully snaps into place to provide tactile satisfaction. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

50 States is an interactive educational puzzle game that transforms learning American geography into an enjoyable challenge. Whether you're a student looking to ace your next geography test, a teacher seeking engaging classroom resources, or simply someone who wants to brush up on US map knowledge, this game offers the perfect blend of education and entertainment.

With a solid rating of 3.99 out of 5 stars, players consistently praise the game's educational value and intuitive gameplay mechanics. The game presents you with the outline of the United States and challenges you to correctly position all 50 states by dragging and dropping them into their proper locations.

Core Features

Interactive Learning Experience

The game employs hands-on learning through its drag-and-drop interface. This tactile approach helps reinforce geographical knowledge more effectively than traditional memorization methods.

Immediate Feedback System

When you place a state incorrectly, the game instantly provides feedback showing how many miles off your guess was. This immediate correction helps you learn from mistakes and gradually improve your accuracy.

Progress Tracking

Built-in statistics track your performance throughout the game, allowing you to monitor your improvement and challenge yourself to beat previous scores.

Educational Assistance

If you place a state incorrectly, the game doesn't just tell you you're wrong - it shows you exactly where that state belongs, turning every mistake into a learning opportunity.

Cross-Platform Compatibility

As an HTML5 game, 50 States works seamlessly across desktop computers, tablets, and mobile devices, making geography learning accessible anywhere.

Game Mechanics

The gameplay mechanics are straightforward yet engaging:

  • Drag and Drop Interface : Simply click and drag each state shape to where you believe it belongs on the US map
  • Distance Feedback : Incorrect placements show you exactly how far off your guess was in miles
  • Guided Learning : The game reveals correct locations when you make mistakes, reinforcing proper geographical knowledge
  • Score System : Track your accuracy and try to improve with each playthrough

Operation Guide

Getting Started

  1. Launch the Game : Open 50 States in your web browser - no downloads required
  2. Understand the Interface : You'll see the US map outline and individual state shapes to place
  3. Begin Placement : Click and drag any state shape to where you think it belongs
  4. Learn from Feedback : Pay attention to distance corrections and proper placement guides
  5. Track Progress : Monitor your statistics to see improvement over time

Tips for Success

  • Start with states you're most confident about to build momentum
  • Use geographical features like coastlines and borders as reference points
  • Pay attention to state sizes and shapes - they're important clues
  • Don't worry about mistakes; they're valuable learning opportunities
  • Challenge yourself to improve your accuracy score with each attempt

Educational Benefits

50 States serves as an excellent educational tool that makes learning American geography engaging and memorable. The game helps develop:

  • Spatial Awareness : Understanding how states relate to each other geographically
  • Visual Memory : Associating state shapes with their locations
  • Problem-Solving Skills : Using logical thinking to determine correct placements
  • Persistence : Encouraging continued learning through score improvement

Why Play This Game

This geography game stands out for several compelling reasons:

Completely Free : Enjoy full access to all features without any cost or hidden fees. The game provides premium educational value at no expense.

Universal Appeal : Suitable for players of all ages, from elementary students to adults looking to refresh their geography knowledge.

Instant Accessibility : No downloads, installations, or account creation required. Simply visit the website and start learning immediately.

Educational Value : Unlike many casual games, 50 States provides genuine learning benefits while maintaining entertainment value.

Self-Paced Learning : Progress at your own speed without time pressure, making it ideal for relaxed learning sessions.

Competitive Element : Challenge friends, family members, or classmates to see who can achieve the highest accuracy score.

Whether you're studying for a geography exam, teaching students about US states, or simply want to test your knowledge, 50 States delivers an educational gaming experience that's both effective and enjoyable.

Frequently Asked Questions (FAQ)