Color King - Connect 5 Puzzle Game

Seele01-Flash
By
Color King is an engaging connect-5 puzzle game where strategic thinking meets colorful gameplay. Match same-colored balls in lines of 5 or more to clear the board and achieve high scores.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Color King (3D Logic Puzzle)". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style:** Casual, bright, and polished "Royal" aesthetic. Use a fixed camera angle (slightly isometric or top-down perspective) to clearly display a 9x9 grid board. * **Grid Board:** Generate a 9x9 checkerboard floor using plane geometries. Alternating tile colors (e.g., light cream and beige) to distinguish cells clearly. * **Game Pieces (Balls):** Use `THREE.SphereGeometry` for the balls. They should look glossy (use `MeshPhysicalMaterial` or `MeshStandardMaterial` with moderate roughness and high metalness). * **Colors:** Define a palette of 7 distinct, high-contrast colors (Red, Blue, Green, Yellow, Purple, Cyan, Orange). * **Next Color Preview:** Create a UI area (or a small 3D pedestal) showing the **three next colors** that will spawn after the current turn. This is crucial for strategy. * **Effects:** * **Selection:** When a ball is selected, it should gently bob up and down or emit a subtle glow. * **Explosion:** When a line is cleared, spawn simple particle effects (cubes or tetrahedrons) matching the ball color before removing the mesh. ### 2. Audio Requirements * **BGM:** A light, cheerful, looping track with a "thinking/puzzle" vibe. Perhaps a subtle pizzicato string or marimba style. * **Sound Effects (Synthesized or Placeholder URLs):** * **Select:** A soft "pop" or high-pitched "blip". * **Move:** A sliding or "whoosh" sound as the ball travels. * **Clear Line:** A satisfying "chime" or magical "sparkle" sound (ascending scale). * **Invalid Move:** A low, dull "thud" or "buzz". * **Game Over:** A descending fanfare. ### 3. Gameplay Loop * **Initialization:** Start with a 9x9 empty grid. Spawn 3-5 random colored balls at random positions. * **Turn Logic:** 1. **Selection:** Player taps a ball to select it. 2. **Targeting:** Player taps an empty tile. 3. **Pathfinding (Crucial):** Implement A* (A-Star) or BFS pathfinding. The ball can **only** move to the target if there is a clear path of empty tiles (no diagonals for movement, only Up/Down/Left/Right). 4. **Movement:** If a path exists, animate the ball moving along the path tile-by-tile. * **Matching Logic:** After the ball lands, check for lines of **5 or more** balls of the same color. * **Directions:** Horizontal, Vertical, and Diagonal. * **Success:** If a line of 5+ exists, remove those balls, add points (10 points per ball), and play the clear sound. **Do not** spawn new balls this turn. * **Failure:** If no line is formed, spawn **3 new balls** (using the colors from the "Next Color Preview") at random empty spots. Then, generate 3 new preview colors. * **Game Over:** If the board is full and no balls can spawn, the game ends. ### 4. Mobile Controls & Interaction * **Input Handling:** Use `THREE.Raycaster` mapped to `touchstart` and `mousedown` events for responsiveness. * **Touch Targets:** Ensure the grid tiles are large enough to be easily tapped. * **Responsiveness:** The renderer must resize automatically (`window.addEventListener('resize', ...)`). The camera zoom should adapt so the 9x9 grid fits within the width of a mobile portrait screen. * **Visual Feedback:** * Highlight the selected tile (e.g., change material emissive color). * If possible, draw a faint line or highlight the path tiles momentarily before the ball moves to show the player the route. * **UI Layout:** Place the Score and "Next Colors" display at the top of the screen (HTML overlay over the Canvas), ensuring they don't overlap the game board. Add a "Restart" button at the bottom. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

Color King is a captivating puzzle game that combines strategic thinking with vibrant, colorful gameplay. This free online game challenges players to connect at least 5 same-colored balls in horizontal, vertical, or diagonal lines to make them disappear from the board. With its intuitive mechanics and progressively challenging gameplay, Color King offers hours of engaging entertainment for puzzle enthusiasts of all skill levels.

Core Features

Strategic Puzzle Mechanics

The game follows a unique challenge system where every move you make spawns three new balls on the board, making each subsequent move more strategic and challenging. This creates an ever-evolving puzzle environment that keeps players engaged and thinking ahead.

Multiple Connection Patterns

Unlike simple matching games, Color King allows you to create winning combinations in three different ways: - Horizontal lines : Connect balls across rows - Vertical lines : Stack balls in columns - Diagonal lines : Create slanted connections for strategic advantages

Customization System

Collect coins throughout your gameplay to unlock new theme colors and visual styles for your balls. This progression system adds a rewarding element beyond just achieving high scores.

Path-Based Movement

The game features intelligent movement mechanics where balls can only move to destinations if there's a clear path available. This adds an extra layer of strategy as you must consider board layout and plan your moves carefully.

Gameplay Mechanics

Basic Rules

  1. Objective : Connect 5 or more same-colored balls in any direction
  2. Movement : Click to select a ball, then click the destination square
  3. Spawning : Three new balls appear after each move
  4. Scoring : Longer lines earn more points
  5. Strategy : Plan ahead to prevent board overflow

Advanced Strategies

  • Prioritize longer lines for maximum points
  • Keep pathways open for future moves
  • Plan multiple moves ahead to avoid dead ends
  • Use diagonal connections to create space efficiently

How to Play

Basic Controls

The game uses simple mouse controls that work perfectly on both desktop and mobile devices: - Left mouse button : Select and move balls - Click once : Select a ball (it will highlight) - Click destination : Move the selected ball to the target square

Getting Started

  1. Launch the game in your web browser
  2. Click on any colored ball to select it
  3. Click on an empty square to move the ball (if path is available)
  4. Try to connect 5 or more same-colored balls in any direction
  5. Watch them disappear and earn points
  6. Repeat the process while managing the increasing number of balls

Why Play Color King

Perfect for All Skill Levels

Whether you're a casual puzzle fan or a strategic gaming enthusiast, Color King offers: - Easy to learn : Simple click-and-move mechanics - Hard to master : Increasingly complex strategic decisions - Relaxing gameplay : No time pressure, play at your own pace - Mental exercise : Enhances pattern recognition and planning skills

Accessibility and Convenience

  • Completely free : No hidden costs or premium features
  • No download required : Play instantly in any web browser
  • Cross-platform : Works on desktop computers and mobile devices
  • Offline capability : Continue playing without internet connection

Engaging Progression

The coin collection system and theme unlocks provide long-term motivation beyond just beating high scores. Each game session contributes to your overall progress, making every playthrough meaningful.

Frequently Asked Questions (FAQ)