Countries of North America - Interactive Geography Game

Seele01-Flash
By
Countries of North America is an interactive educational geography game that challenges players to identify all 18 North American countries on a map. Perfect for students, travelers, and geography enthusiasts looking to improve their knowledge.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "3D Interactive Geography Quiz - North America". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style**: Create a stylistic, low-poly 3D map of North America floating in a serene void. The countries should be extruded geometries (based on simplified GeoJSON data) to give them depth (2.5D look). * **Color Palette**: Use the pastel colors observed in the screenshot (pale orange, beige, soft green) for the landmasses and a deep, calming blue for the ocean/background. Unselected countries should have a matte finish; the active/selected country should have a subtle emissive glow. * **Camera**: A PerspectiveCamera positioned at a top-down angle (approx 60 degrees) looking at the continent. * **Optimization**: Use low-polygon count for country borders to ensure 60FPS on mobile devices. Implement frustum culling and simple Lambert or Phong materials to reduce rendering cost. * **Feedback Effects**: When a country is correctly identified, spawn a simple particle explosion (confetti style) above the mesh. ### 2. Audio Requirements * **BGM**: A relaxing, low-tempo "Lo-Fi Study" or "Elevator Bossa Nova" track that aids concentration without distracting. * **Sound Effects (SFX)**: * **Selection**: A soft "pop" or "bubble" sound when tapping a country. * **Correct Answer**: A cheerful major-key chime or "ding". * **Wrong Answer**: A gentle, low-pitched "thud" or "buzzer" (not too harsh). * **Hint Reveal**: A "shimmer" sound when the game highlights the correct answer after 3 failures. ### 3. Gameplay Loop * **Initialization**: The player starts with **100 Points**. The game loads a list of 18 North American countries (USA, Canada, Mexico, Cuba, Greenland, etc.). * **The Question Phase**: The UI displays: "Find [Country Name]". * **Input Phase**: The player taps on a 3D country mesh. * **Validation Logic**: * **Correct**: Play success SFX, flash the country green, and move to the next country immediately. * **Wrong**: Deduct points (e.g., -10). Display a toast message: "That is [Selected Country Name]". Play error SFX. * **3 Strikes Rule**: If the player guesses wrong 3 times for the same question, the correct country flashes bright yellow (pulsating) to guide the player. * **Win Condition**: All 18 countries have been identified. Display a "Final Score" modal with a "Play Again" button. ### 4. Mobile Controls & Interaction * **Touch Interaction (Raycaster)**: Implement a precision Raycaster for detecting taps on country meshes. * *Critical UX*: For small island nations (like Barbados or Bahamas), create invisible "hitbox" meshes that are slightly larger than the visual meshes to make tapping easier on small screens. * **Camera Controls**: Use `OrbitControls` with restricted angles: * Enable **Pinch-to-Zoom** (crucial for seeing Caribbean islands). * Enable **One-finger Pan**. * Disable rotation (keep North up) or strictly limit the azimuth angle to prevent disorientation. * **UI Layout**: * **Top Bar**: Display the "Target Country" in large, bold text (min 24px) with a white background for readability. * **Score Counter**: Floating in the top-right corner. * **Orientation**: Force the 3D scene to resize dynamically on screen rotation (responsive canvas), but design the UI primarily for **Portrait Mode** to accommodate one-handed play. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

Countries of North America is an engaging educational geography game that transforms learning into an interactive experience. With a solid 4.3/5 rating from players worldwide, this browser-based quiz challenges you to identify all 18 countries that make up North America, from the well-known giants like Canada, the United States, and Mexico to smaller nations like Barbados, Cuba, and Greenland.

This HTML5-powered game is perfect for students preparing for geography tests, travelers planning North American adventures, or anyone curious about world geography. The game's intuitive point system and progressive difficulty make it suitable for all ages and skill levels.

Core Features

Comprehensive Country Coverage

The game includes all 18 North American countries, ensuring you get a complete geographical education. You'll learn to distinguish between mainland nations and Caribbean islands, understanding the full scope of North American geography.

Smart Learning System

Start each round with 100 points and learn from your mistakes. The game provides helpful feedback when you make incorrect selections, showing you which country you actually clicked. After three wrong attempts, the correct answer is highlighted, ensuring you never get stuck.

Progressive Difficulty

The key to mastering this geography game is repetition. Each playthrough helps reinforce your knowledge, and the scoring system motivates you to achieve perfect rounds by maintaining all 100 points.

Instant Accessibility

As an HTML5 game, it works perfectly in any modern web browser without downloads or installations. Play on your computer, tablet, or smartphone whenever you have a few minutes to spare.

Game Mechanics

The gameplay is straightforward yet challenging. You'll see a map of North America with country borders clearly marked. The game will prompt you to click on specific countries, testing your geographical knowledge systematically. Each correct answer maintains your score, while incorrect selections cost you points and provide learning opportunities.

The feedback system is particularly valuable for learning. When you select the wrong country, the game tells you exactly which nation you clicked, helping you build associations between country names and their locations on the map.

Educational Benefits

This game serves as an excellent supplement to traditional geography education. It helps players:

  • Visualize Country Locations : Move beyond memorizing lists to understanding spatial relationships
  • Learn Through Repetition : The scoring system encourages multiple playthroughs for better retention
  • Build Confidence : Progressive improvement through the point system creates a sense of achievement
  • Develop Map Reading Skills : Essential for understanding global geography and current events

Operation Guide

Starting the Game : Click the play button to begin your geography challenge

Gameplay : When prompted, click on the country name displayed at the top of the screen

Scoring : Begin with 100 points and try to maintain them throughout the game

Learning from Mistakes : Wrong answers show you which country you actually selected

Getting Help : After three incorrect attempts, the game highlights the correct answer

Goal : Achieve a perfect score by correctly identifying all countries without losing points

Why Play This Geography Game

Geography knowledge is more relevant than ever in our interconnected world. Whether you're a student studying for exams, a traveler planning adventures, or simply someone who enjoys learning, this game offers an engaging way to master North American geography.

The game's free accessibility means anyone can start learning immediately. No registration, no downloads, no barriers to education. The clean interface and intuitive controls make it suitable for users of all ages, from elementary students to adults refreshing their geographical knowledge.

The repetition-based learning approach is scientifically proven to improve long-term retention. By playing multiple rounds and learning from mistakes, you'll develop lasting geographical knowledge that extends far beyond the game itself.

Frequently Asked Questions (FAQ)