Paint the Flag - Quiz & Coloring Game

Seele01-Flash
By
Paint the Flag is an engaging quiz game that combines geography education with creative coloring. Test your knowledge of flags from over 200 countries while enjoying a relaxing painting experience.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Paint the Flag". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style**: Hyper-casual 3D aesthetic. Use a clean, vibrant color palette. The background should be a dynamic radial gradient (light blue to deep blue) similar to the screenshot, focusing attention on the center. * **Main Asset (The Flag)**: Create a `THREE.Group` representing a "Flag Board". Instead of a single texture, construct the flag using separate geometric primitives (e.g., 3 separate vertical boxes for France/Italy, or horizontal boxes for Germany) to allow individual raycast detection and coloring. The board should have rounded corners and a slight bevel to look like a quality game piece. * **Color Palette UI**: A row of 3D cylinder "paint buckets" or circular swatches floating at the bottom of the screen. * **Performance**: Use `MeshStandardMaterial` with a shared environment map for a glossy, plastic look. Limit shadow casting to the main flag object only to maintain high FPS on mobile. ### 2. Audio Requirements * **BGM**: A soft, loopable, intellectual "thinking" track—light marimba or synth pizzicato. * **SFX**: * **Select Color**: A subtle "pop" or "bubble" sound. * **Paint Action**: A "wet brush" slap or "whoosh" sound. * **Success**: A cheerful major-chord chime or fanfare. * **Error**: A low-pitched "buzzer" or dull thud if the player tries to submit an incorrect flag. ### 3. Gameplay Loop * **Level Setup**: The game initializes with a text prompt at the top: "Paint the Flag: [Country Name]" (e.g., France). The 3D flag board appears blank (white or grey). * **Coloring Phase**: 1. The player taps a color swatch at the bottom to select the active color (the brush). 2. The player taps a specific segment of the flag. 3. The segment changes color immediately to the active color. * **Validation**: * Include a "Check" button. * **Win Condition**: If all segments match the predefined correct colors for that country, trigger a confetti particle explosion and transition to the next flag. * **Fail Condition**: If incorrect, play a "shake" animation on the flag mesh and provide a text hint (e.g., "Try again!"). * **Content Scope**: For this code generation, implement logic for 3 simple flags: France (Blue/White/Red vertical), Germany (Black/Red/Yellow horizontal), and Italy (Green/White/Red vertical). ### 4. Mobile Controls & Interaction * **Orientation**: Portrait mode preferred (to fit the flag and palette vertically). * **Touch Input**: Implement `THREE.Raycaster` mapped to `touchstart` events. Do not rely solely on `click` or `mousemove`. * **Control Scheme**: * **Tap to Select**: Tap palette items to set `activeColor`. * **Tap to Fill**: Raycast hit on a flag segment applies `activeColor` to that mesh's material. * **Feedback**: * **Visual**: When a color is selected, scale the swatch up by 1.2x. When a flag segment is painted, add a small `elasticOut` scale tween to that segment for "juicy" feedback. * **Haptic**: Use `window.navigator.vibrate(20)` for a short tick when painting a segment. * **UI Sizing**: Ensure buttons and color swatches have a hit area of at least 44x44 pixels equivalent in screen space. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

Paint the Flag is a unique educational quiz game that transforms geography learning into an entertaining coloring experience. This innovative game challenges players to identify and paint flags from more than 200 countries worldwide, combining knowledge testing with creative expression. Whether you're a geography enthusiast, trivia lover, or someone looking for a relaxing yet educational gaming experience, Paint the Flag offers the perfect blend of learning and entertainment.

The game stands out by making geography education interactive and visually engaging, turning what could be a dry memorization exercise into a colorful, hands-on adventure through the world's national symbols.

Core Features

Comprehensive Flag Database

Explore flags from over 200 countries and territories, covering every continent and region. From well-known national flags to lesser-known territories, the game provides a comprehensive global flag encyclopedia.

Interactive Learning Experience

Unlike traditional quiz games that only test recognition, Paint the Flag requires active participation through coloring, which enhances memory retention and makes learning more engaging.

Cross-Platform Accessibility

  • Free to Play : Completely free with no hidden costs or premium features
  • Universal Browser Support : Play instantly on any web browser without downloads
  • Mobile Optimized : Perfectly adapted for touch controls on smartphones and tablets
  • Desktop Compatible : Full mouse and keyboard support for computer users

Educational Value

Perfect for students, teachers, and anyone interested in geography and world cultures. The game helps improve: - Geographic awareness and knowledge - Visual memory and pattern recognition - Cultural understanding through national symbols - Focus and concentration skills

Gameplay Mechanics

The game presents you with outline drawings of various national flags. Your task is to correctly identify the flag and paint it using the appropriate colors. Each level challenges your knowledge of different countries' flags, from the simple designs of Japan and France to the complex patterns of countries like Bhutan or South Africa.

Progressive Difficulty

Start with easily recognizable flags and gradually progress to more challenging ones. The game adapts to your skill level, ensuring a satisfying learning curve for both beginners and geography experts.

Operation Guide

Controls are intuitive and designed for all devices:

  • Mouse Users : Click to select colors from the palette, then click on flag sections to fill them
  • Touch Devices : Tap color options and tap flag areas to paint
  • Color Selection : Choose from a comprehensive color palette
  • Hint System : Get assistance when you're stuck on challenging flags
  • Progress Tracking : Monitor your improvement across different regions and difficulty levels

Why Play This Game

Educational Entertainment

Paint the Flag transforms learning into play, making geography education enjoyable and memorable. It's perfect for: - Students preparing for geography tests - Parents looking for educational games for children - Adults wanting to brush up on world knowledge - Travelers planning to explore new countries

Stress Relief and Mindfulness

The coloring aspect provides a meditative, relaxing experience that can help reduce stress while simultaneously expanding your knowledge base.

Social Learning

Share your progress and challenge friends to beat your scores, turning geographical learning into a social activity.

Cultural Appreciation

Learn about different countries and their national symbols, fostering greater understanding and appreciation for global diversity.

Frequently Asked Questions (FAQ)