States of Mexico - Geography Quiz Game

Seele01-Flash
By
States of Mexico is a free educational geography game that challenges players to identify Mexican states on an interactive map. Perfect for learning Mexico's geography while having fun.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "**States of Mexico - Interactive 3D Geography Quiz**". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style**: A clean, "Educational Low-Poly" aesthetic. The map of Mexico should be presented like a tactile puzzle board floating in a soft, gradient void (light blue to white). * **Map Assets**: * Use `SVGLoader` or `FileLoader` (GeoJSON) logic to parse the shapes of Mexico's 32 states. * Convert these shapes into **Extruded Geometries** with a slight depth to give them a 3D physical feel. * **Color Palette**: Use a distinct 4-color theorem palette (pastel shades of green, orange, yellow, pink) so adjacent states never have the same color. * **Borders**: Add white `LineSegments` on the edges of the meshes to clearly define state boundaries. * **Performance Optimization**: * Simplify the geometry (reduce vertex count) for complex coastlines to ensure 60FPS on mobile devices. * Use a shared `MeshStandardMaterial` where possible to reduce draw calls. * Shadows: Use a simple baked shadow plane underneath the map instead of expensive real-time dynamic shadows. ### 2. Audio Requirements * **BGM**: A relaxing, acoustic guitar track with a subtle Mexican rhythm (son jarocho style but very slow and ambient) to encourage focus without distraction. * **Sound Effects (SFX)**: * **Touch/Select**: A soft "wooden block" tap sound. * **Correct Answer**: A bright, pleasant major-key chime or a "ding". * **Incorrect Answer**: A gentle, low-pitched "thud" (avoid harsh buzzers). * **Win State**: A short, celebratory Mariachi trumpet flourish. ### 3. Gameplay Loop * **Initialization**: The camera zooms in on the full map of Mexico. * **The Prompt**: The UI displays the name of a target state (e.g., "Find **Jalisco**") at the top of the screen. * **Interaction**: The player taps a state on the 3D map. * **Validation**: * **Correct**: The state flashes bright green, a checkmark appears, and the game immediately transitions to the next random state. Score increases. * **Incorrect**: The tapped state flashes red briefly. The correct state pulses white to educate the player on its actual location. * **Win Condition**: Successfully identify all 32 states. Show a "Game Over" modal with the final score and time taken. ### 4. Mobile Controls & Interaction * **Camera Controls**: Use `OrbitControls` restricted to allow: * **Panning**: One-finger drag to move around the map. * **Zooming**: Two-finger pinch to zoom in/out (essential for tapping small states like Tlaxcala or Mexico City). * **Rotation**: Limit vertical rotation (PolarAngle) to keep the view mostly top-down (between 0 and 45 degrees). * **Raycasting**: Implement precise Raycasting for touch events. Ensure the raycaster ignores the border lines and only hits the state meshes. * **Haptic Feedback**: Trigger `navigator.vibrate(20)` on every valid tap to simulate physical button presses. * **UI Adaptation**: * **Orientation**: Force the layout to adapt. If Portrait, map is top, text is bottom. If Landscape, map is left, text is right. * **Touch Targets**: The "Skip" or "Reset" buttons must be at least 44x44 pixels. * **CSS**: Add `touch-action: none;` to the canvas to prevent the browser from scrolling while the user interacts with the 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

States of Mexico is an engaging educational puzzle game that transforms geography learning into an interactive adventure. With a 4.4/5 rating, this free browser-based game challenges players to identify and locate all Mexican states on a colorful, interactive map.

Whether you're a geography enthusiast looking to test your knowledge or a student wanting to learn about Mexico's territorial divisions, this game offers an entertaining way to explore the beautiful country known for its vibrant culture and rich history.

Core Features

Interactive Learning Experience

The game presents Mexico's map in a clear, colorful format that makes identifying states both challenging and visually appealing. Each round randomly selects states for you to identify, ensuring varied gameplay and comprehensive learning.

Educational Value

  • Complete Coverage : Learn all 32 Mexican states and their locations
  • Visual Learning : Interactive map-based approach reinforces geographical memory
  • Self-Paced : Play at your own speed without time pressure
  • Progress Tracking : Build your knowledge incrementally with each game session

Accessibility Features

  • Free to Play : No cost or registration required
  • Cross-Platform : Works perfectly on desktop computers and mobile devices
  • Browser-Based : No downloads needed - play instantly in any modern web browser
  • Touch-Friendly : Optimized for both mouse and touch controls

Gameplay Mechanics

The game follows a simple yet effective quiz format. You'll be presented with Mexico's map showing all state boundaries, and then asked to identify specific states by name. Simply click or tap on the state you believe matches the given name.

Game Flow

  1. Map Presentation : A detailed map of Mexico appears with clearly marked state boundaries
  2. State Challenge : You're asked to identify a specific Mexican state
  3. Selection : Click or tap on the state you think is correct
  4. Feedback : Immediate response showing whether your answer is correct
  5. Progress : Continue through different states to complete your geography knowledge

Operation Guide

Desktop Controls

  • Mouse : Point and click on the state you believe is the correct answer
  • Navigation : Use mouse to explore different areas of the map
  • Selection : Single-click to make your state selection

Mobile Controls

  • Touch : Use your finger to tap on the correct state
  • Zoom : Pinch to zoom in/out for better visibility on smaller screens
  • Precision : Tap accurately on smaller states for proper selection

Tips for Success

  • Start with larger, more recognizable states to build confidence
  • Pay attention to distinctive shapes and coastal features
  • Use Mexico's borders with the US, Guatemala, and Belize as reference points
  • Remember that Mexico has both Pacific and Atlantic coastlines

Why Play This Game

Educational Benefits

This game transforms dry geography facts into an interactive learning experience. It's perfect for students preparing for geography tests, travelers planning trips to Mexico, or anyone interested in expanding their world knowledge.

Cognitive Development

Geography games like States of Mexico enhance spatial reasoning, visual memory, and pattern recognition skills. Regular play can significantly improve your ability to visualize and remember geographical information.

Cultural Appreciation

Learning about Mexico's states provides insight into the country's diverse regions, from the desert landscapes of northern states to the tropical areas in the south. Each state has its own unique culture, history, and geographical features.

Convenience and Accessibility

As a free, browser-based HTML5 game, States of Mexico can be played anywhere, anytime. Whether you have five minutes or an hour, you can engage in meaningful learning that fits your schedule.

Perfect for Multiple Audiences

  • Students : Excellent study aid for geography classes and exams
  • Teachers : Engaging classroom tool for interactive learning
  • Travel Enthusiasts : Great preparation for Mexico trips
  • Geography Lovers : Fun way to test and expand knowledge
  • Casual Learners : Easy, stress-free educational entertainment

Frequently Asked Questions (FAQ)