Crazy Circle - Color Matching Clicker Game

Seele01-Flash
By
Crazy Circle is an addictive color matching clicker game that challenges your reflexes and concentration. Click to match the arrow color with the corresponding circle segment across three exciting difficulty levels.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "**Crazy Circle - Color Reflex Challenge**". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style**: Minimalist "Flat 3D" aesthetic. Use an Orthographic Camera looking straight down (top-down view) to simulate a clean 2D vector art style while leveraging 3D smoothness. * **The Ring**: Create a segmented ring using `THREE.RingGeometry` or multiple arc meshes. * The ring must be split into distinct colored segments based on difficulty: Easy (4 segments), Normal (6 segments), Hard (8 segments). * Palette: Vibrant, high-contrast colors (Cyan, Magenta, Lime Green, Orange, Red, etc.) against a clean off-white background (`#f5f5f5`). * **The Pointer**: A central needle or arrow mesh (e.g., a thin Cylinder with a Cone tip) located at `(0,0,0)`. It must be clearly visible. * **Effects**: * Add a "Pulse" effect to the ring segments when the game starts. * On a successful match, generate a small burst of particle confetti (simple colored squares) at the pointer's location. * **Optimization**: Use simple geometric primitives to keep draw calls low. Ensure high pixel density (`renderer.setPixelRatio`) for sharp edges on mobile retina screens. ### 2. Audio Requirements * **BGM**: A light, rhythmic, minimal electronic loop (ticking clock style) that speeds up slightly as the score increases. * **Sound Effects (SFX)**: * **Success**: A crisp, high-pitched "Pop" or digital "Ping" sound. * **Rotation Change**: A subtle "Whoosh" sound when the arrow flips direction. * **Game Over**: A dissonant "Buzzer" or glass-shattering sound. * **UI**: Soft "Click" sounds for menu selection. ### 3. Gameplay Loop * **Mechanic**: 1. The pointer spins automatically around the center. 2. The pointer has a specific color (assigned randomly from the ring's current colors). 3. The player must tap the screen **exactly** when the pointer is overlapping the ring segment that matches the pointer's color. * **Success Condition**: * If `Pointer Color == Segment Color` on tap: * Score +1. * **Crucial Mechanic**: The pointer instantly **reverses rotation direction** (Clockwise ? Counter-Clockwise). * The pointer changes to a *new* random color (different from the current one). * Rotation speed increases slightly with every 5 points (progressive difficulty). * **Fail Condition**: * If the player taps when the colors do **not** match -> Game Over. * (Optional) If the player misses the colored segment entirely (the pointer passes through the matching color without a click) -> Game Over. * **Game States**: Start Screen (Difficulty Select) -> Gameplay -> Game Over (High Score display & Restart button). ### 4. Mobile Controls & Interaction * **Input Handling**: Use a global event listener for `touchstart` (mobile) and `click` (desktop). The entire screen is the "action button" during gameplay. * **Orientation**: Lock to **Portrait Mode** preference, but ensure the canvas resizes responsively (`window.addEventListener('resize')`) to fit any aspect ratio. * **UI Layout**: * Score text: Large, bold sans-serif font centered at the top (HTML overlay or Canvas texture). * Buttons: Large touch targets (min 44px height/width) for "Start" and "Restart". * **Haptic Feedback**: * Trigger `navigator.vibrate(15)` on a successful match (light tap). * Trigger `navigator.vibrate(200)` on Game Over (heavy shake). * Implement a subtle camera "shake" effect visually on Game Over. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

Crazy Circle is a fast-paced color matching clicker game that combines simple mechanics with increasingly challenging gameplay. With a solid 4.2/5 rating from players, this engaging browser game tests your reflexes, timing, and color recognition skills in a fun and addictive format.

The core gameplay revolves around a spinning arrow and a colorful circle divided into segments. Your mission is to click precisely when the arrow color matches the circle segment it's pointing to. Sounds simple? Think again - as you progress, the arrow changes direction and speed, creating an exciting challenge that keeps you on your toes.

Core Features

Multiple Difficulty Levels

Crazy Circle offers three distinct difficulty modes to suit every player:

  • Easy Mode : Perfect for beginners with just 4 colors to master
  • Normal Mode : Step up the challenge with 6 different colors
  • Hard Mode : Ultimate test with 8 colors for expert players

Dynamic Gameplay Mechanics

What makes Crazy Circle truly engaging is its intelligent game design. Every successful match triggers the arrow to: - Change to a new color instantly - Reverse direction, keeping you constantly alert - Maintain unpredictable patterns that prevent monotony

Competitive Elements

The game features an integrated leaderboard system accessible through the crown icon. Compare your scores with players worldwide and strive to climb the rankings. Whether you're competing globally or trying to beat your personal best, the competitive aspect adds lasting replay value.

Cross-Platform Compatibility

Built with HTML5 technology, Crazy Circle runs smoothly on: - Desktop computers (Windows, Mac, Linux) - Mobile phones (iOS and Android) - Tablets and other touch devices - All modern web browsers without downloads

Gameplay Instructions

Basic Controls

Playing Crazy Circle is intuitive and accessible: - Click/Tap : The only control you need - click when colors match - Timing : Wait for the perfect moment when arrow and segment colors align - Precision : Click too early or late, and you'll restart your session

Scoring System

Your score increases with each successful color match. The game tracks both your current session score and your all-time best score, encouraging continuous improvement and repeated play sessions.

Strategy Tips

  • Focus on the arrow color first, then track its movement
  • Don't rush - timing is more important than speed
  • Practice on Easy mode before tackling harder difficulties
  • Use the rhythm of color changes to anticipate patterns

Why Play Crazy Circle

Perfect for Quick Gaming Sessions

As an instant-play browser game, Crazy Circle is ideal for: - Short breaks during work or study - Commuting entertainment on mobile devices - Casual gaming without commitment - Improving hand-eye coordination and reflexes

Completely Free Experience

Enjoy the full Crazy Circle experience without any cost: - No registration or account creation required - Zero in-app purchases or hidden fees - Immediate access through any web browser - No storage space needed on your device

Mental Benefits

Beyond entertainment, Crazy Circle offers cognitive benefits: - Enhances reaction time and reflexes - Improves color recognition speed - Develops concentration and focus - Provides stress relief through engaging gameplay

Social Competition

The global leaderboard system transforms solo play into a social experience. Challenge friends, family, or compete with players worldwide to see who can achieve the highest scores across different difficulty levels.

Frequently Asked Questions (FAQ)