Jumping Color - Color Matching Action Game

Seele01-Flash
By
Jumping Color is an addictive color-matching action game that challenges your reflexes and timing. Control a bouncing circle and match its color to the correct walls while avoiding obstacles.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Jumping Color". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style:** Minimalist, flat design with a "Neon" or "High Contrast" aesthetic to ensure color visibility. Use an Orthographic Camera to maintain a strict 2D gameplay feel within the 3D space. * **Player:** A simple, smooth Sphere (`THREE.SphereGeometry`) representing the "Ball". It must emit a soft glow (emissive material). * **Environment (Walls):** Two vertical walls placed on the far Left and far Right of the screen. The walls are segmented vertically into different colored strips. * **Color Palette:** Use a predefined array of distinct neon colors (Cyan, Magenta, Lime Green, Bright Yellow). The background should be a deep, dark grey (almost black) to make colors pop. * **Lighting:** Ambient lighting for base visibility, plus a PointLight following the player to highlight the current position. * **Particles:** Simple particle explosion (small cubes or triangles) spreading out when the player hits the *wrong* color (Game Over) or a "ripple" effect when hitting the *right* color. * **Performance:** Use low-poly geometries. Reuse geometries and materials where possible to minimize draw calls. ### 2. Audio Requirements * **BGM:** A fast-paced, rhythmic, looping electronic/synth-wave track that matches the "Action/Instant" tag. * **Sound Effects (SFX):** * **Jump:** A short, high-pitch "woosh" or "pop" when the screen is tapped. * **Bounce/Score:** A pleasant "ding" or "chime" when hitting the correct wall color. * **Game Over:** A "shatter" or dissonant "buzz" sound. * **Night Mode Toggle:** A soft click sound. ### 3. Gameplay Loop * **Core Physics:** * The Ball automatically bounces horizontally between the Left Wall and Right Wall at a constant speed. * **Gravity** constantly pulls the Ball down. * **Input:** Tapping the screen applies an upward velocity impulse (Jump), allowing the player to fight gravity. * **Color Logic:** * The Ball has a specific active color (e.g., Blue). * The Walls are divided into segments of random colors. * **Rule:** The Ball must only touch a wall segment that matches its current color. * **Scoring & Progression:** * If `Ball.Color === WallSegment.Color`: The ball bounces off, the score increases by 1, and the Ball randomly changes to a new color. The walls may shift or regenerate new color patterns. * If `Ball.Color !== WallSegment.Color`: Game Over immediately. Show a "Restart" button and the final score. * **Difficulty:** As the score increases, the vertical size of the "safe" colored segments gets smaller, or gravity becomes slightly stronger. ### 4. Mobile Controls & Interaction * **Touch Control:** * **Tap Anywhere:** Apply upward force to the ball. The entire screen is the hit area. * Use `touchstart` events for zero-latency response (avoid `click` delay on mobile). * **Orientation:** Portrait mode is preferred to see vertical wall segments, but the camera should adapt responsiveness if the user rotates (responsive viewport). * **UI Elements:** * **Score Display:** Large, semi-transparent number in the center-top of the screen. * **Night Mode Button:** A specific icon (moon shape) in the corner (min size 44x44px) to toggle between Dark Background (default) and Light Background. * **Restart Button:** Large, easy-to-tap button appearing on the Game Over overlay. * **Feedback:** * Trigger `window.navigator.vibrate(50)` (haptic feedback) when the ball hits a wall (both success and failure) to provide tactile confirmation. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

Jumping Color is a brilliantly simple yet challenging action game that has earned a solid 4.3/5 rating from players worldwide. This instant-play browser game combines color recognition, physics-based gameplay, and precise timing to create an engaging experience that's easy to learn but hard to master.

The core concept is beautifully straightforward: you control a colored circle that can only safely touch walls of the same color. Blue circle touches blue walls, purple touches purple, and so on. But don't let the simplicity fool you – this game will test your reflexes and decision-making skills as the pace increases and colors change rapidly.

Core Features

Instant Play Experience

  • Completely Free : No payment required, enjoy unlimited gameplay
  • No Download Needed : Play instantly in your browser on any device
  • Cross-Platform Compatible : Works seamlessly on phones, tablets, and computers
  • HTML5 Technology : Smooth performance across all modern browsers

Engaging Gameplay Mechanics

  • Physics-Based Movement : Use gravity and momentum to control your circle
  • Dynamic Color Changes : Walls change colors after each successful match
  • Progressive Difficulty : Challenge increases as you advance through levels
  • Score System : Beat your personal best and climb the leaderboards

User-Friendly Design

  • Night Mode Available : Easy-on-the-eyes dark theme for extended play
  • Simple Controls : Just click or tap to make the circle bounce
  • Instant Restart : Quick retry when you hit the wrong color
  • No Tutorial Required : Intuitive gameplay that anyone can understand

Gameplay Mechanics

The beauty of Jumping Color lies in its elegant physics system. Your circle falls naturally due to gravity, and you control its upward movement through clicks or taps. This creates a satisfying rhythm as you bounce between colored walls, timing each jump perfectly to match the circle's color with the corresponding wall.

Each successful color match triggers a wall color change, keeping you on your toes and requiring quick adaptation. The challenge intensifies as you progress, with faster color transitions and more complex wall arrangements testing your reflexes to the limit.

Operation Guide

Basic Controls

  • Mouse Click (Desktop): Click anywhere on the screen to make the circle bounce up
  • Tap (Mobile): Tap the screen to control the circle's upward movement
  • Gravity : Release to let the circle fall naturally downward
  • Restart Button : Click to start a new game after losing
  • Night Mode Toggle : Click the moon icon to switch to dark theme

Gameplay Strategy

  • Study the wall colors before making your move
  • Use gravity strategically – sometimes waiting is better than jumping
  • Develop a rhythm between bouncing and falling
  • Focus on the circle's current color, not its previous state
  • Practice patience – rushed moves often lead to mistakes

Why Play Jumping Color

This game perfectly balances accessibility with challenge, making it ideal for both casual players seeking quick entertainment and competitive gamers aiming for high scores. The instant-play format means you can enjoy a quick session during breaks or dive into extended gameplay sessions.

The combination of color recognition, timing, and physics creates a uniquely satisfying gaming experience. Each attempt feels fresh thanks to the dynamic color-changing system, ensuring high replay value. Whether you're looking to beat your personal best or compete with friends, Jumping Color offers endless entertainment without any barriers to entry.

Perfect for stress relief, reflex training, or simply killing time, this game delivers pure, concentrated fun in an easily accessible package.

Frequently Asked Questions (FAQ)