Hexellent - Color Matching Hex Puzzle Game

Seele01-Flash
By
Hexellent is an innovative hex puzzle game that combines color matching, sorting, and sliding mechanics. Create perfect gradients by stacking colorful hexagonal blocks on a dynamic 3D grid and master challenging levels with strategic thinking.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Hexellent - 3D Hexa Sort Puzzle". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style:** Create a clean, hyper-casual aesthetic. The background should be a soft, light blue-grey (e.g., #F0F5F9) to make the colors pop. * **Hexagon Tiles:** Use `THREE.CylinderGeometry` (with 6 radial segments) to create hexagonal tiles. They must have rounded edges (bevels) to look soft and tactile, resembling plastic chips or gummy candies. Colors should be vibrant and saturated: Cyan, Magenta, Lime Green, Bright Yellow, Purple, and Orange. * **The Grid:** A procedural hexagonal grid base. The slots should be slightly indented or marked with a shadow to indicate where stacks can be placed. * **Lighting:** Use soft, studio-style lighting. A combination of `AmbientLight` and a `DirectionalLight` with soft shadows to give depth to the stacks. Add a subtle `MeshStandardMaterial` with low roughness to give the tiles a slight sheen. * **Optimization:** Use `THREE.InstancedMesh` for the tiles if possible to maintain high FPS on mobile devices, or ensure geometry complexity is low. ### 2. Audio Requirements * **BGM:** A calm, Zen-like looping track. Soft electric piano or marimba sounds. It should be relaxing, aiding concentration. * **SFX:** * **Pick Up:** A subtle "whoosh" or suction sound. * **Drop/Place:** A satisfying "thud" or "clack" (like poker chips stacking). * **Sorting/Flying:** A fast "zip" or "shuffle" sound as tiles move between stacks. * **Clear/Combo:** A high-pitched, harmonious chime or chord when a stack creates a color match and disappears. ### 3. Gameplay Loop * **Setup:** A grid (e.g., honeycomb shape) with some pre-filled stacks of mixed-color tiles. * **The Player Action:** The player drags a stack of mixed tiles from a "hand" or "dock" area and drops it onto an empty slot on the grid. * **The Sorting Mechanic (Core Logic):** When a stack is placed, check all adjacent neighbors (6 directions). If the top tile of a neighbor matches the top tile of the placed stack, the matching tiles from the neighbor should visually fly over and stack onto the placed stack. * **Clearing:** If a stack accumulates 10 tiles (or a full set) of the same color, it merges into a completed "point" item and vanishes with a particle effect, freeing up the grid space. * **Win/Loss:** The player wins by clearing the board or reaching a score target. The player loses if the grid is full and no moves are possible. ### 4. Mobile Controls & Interaction * **Input System:** Implement a Raycaster-based drag-and-drop system designed for touch screens. * **Touch Start:** Raycast to pick up a stack from the bottom dock. Lift it slightly on the Y-axis to show it's selected. * **Touch Move:** The stack follows the finger/cursor precisely but hovers slightly above the grid. Highlight the target grid cell underneath the finger to show where it will snap. * **Touch End:** Snap the stack to the nearest valid grid slot. If the drop is invalid, snap it back to the original position. * **Orientation:** Force Portrait Mode logic (camera checks aspect ratio and adjusts FOV so the grid is fully visible vertically). * **Haptics:** Trigger the device vibration API (`navigator.vibrate`) briefly (e.g., 5ms) when a stack is successfully dropped, and a longer vibration (e.g., 20ms) when a stack clears. * **UI Layout:** Keep the score at the top and the "spawn area" (where new stacks appear) at the bottom, ensuring they are outside the "safe area" of modern phone screens (avoid notches/home bars). Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About Hexellent

Hexellent is a captivating puzzle game that revolutionizes traditional color matching gameplay by introducing hexagonal blocks and 3D mechanics. This innovative puzzle experience challenges players to think strategically while creating visually stunning color gradients. The game combines the satisfaction of sorting mechanics with the challenge of spatial reasoning, making it perfect for puzzle enthusiasts seeking a fresh and engaging experience.

Core Features

Dynamic 3D Hex Grid System

The game features a unique three-dimensional hexagonal grid where players manipulate colorful hex blocks. Unlike traditional flat puzzle games, Hexellent's 3D environment adds depth and complexity to every move, creating a more immersive puzzle-solving experience.

Color Gradient Creation

One of the most satisfying aspects of Hexellent is creating perfect color gradients. Players must carefully arrange hex blocks to form smooth color transitions, which trigger spectacular cascading combos and bonus points.

Strategic Power-Ups

The game includes various power-ups that help players overcome challenging situations. These special tools can clear difficult sections, reorganize blocks, or provide hints for optimal moves, adding strategic depth to the gameplay.

Progressive Difficulty System

Hexellent offers multiple levels with increasing complexity. Starting with simple color matching, the game gradually introduces more colors, complex patterns, and challenging objectives that test your puzzle-solving skills.

Gameplay Mechanics

Sliding and Stacking System

Players slide hexagonal blocks across the 3D grid to create organized patterns. The physics-based movement system makes every action feel natural and satisfying, while the stacking mechanics add vertical strategy elements.

Cascading Combo System

When players create perfect gradients or complete color sequences, the game triggers cascading combos that clear multiple blocks simultaneously. These chain reactions provide both visual satisfaction and strategic advantage.

Layer Management

Success in Hexellent requires wise layer management. Players must think several moves ahead, considering how current placements will affect future possibilities and combo potential.

Operation Guide

Basic Controls

  • Click and Hold : Grab any hex block on the grid
  • Drag : Move the selected block to your desired position
  • Release : Drop the block in place to complete the move
  • Multi-touch Support : On mobile devices, use intuitive touch gestures

Winning Strategy Tips

  1. Plan Ahead : Always consider how your current move affects future possibilities
  2. Focus on Gradients : Creating smooth color transitions yields the highest scores
  3. Use Power-ups Wisely : Save special abilities for challenging situations
  4. Build from Bottom : Start with lower layers to create stable foundations

Why Play Hexellent

Perfect for All Skill Levels

Whether you're a casual puzzle fan or a hardcore strategist, Hexellent offers appropriate challenges. The intuitive mechanics make it easy to start, while the deep strategy keeps you engaged for hours.

Stress-Relief Gaming

The satisfying color matching and smooth animations provide excellent stress relief. The game's calming visual effects and rewarding progression system make it perfect for relaxation.

Brain Training Benefits

Hexellent enhances spatial reasoning, pattern recognition, and strategic planning skills. Regular play can improve cognitive abilities while providing entertainment.

Cross-Platform Accessibility

Play anywhere, anytime! Hexellent works seamlessly on desktop computers, smartphones, and tablets. Your progress syncs across devices, ensuring you never lose your advancement.

Completely Free Experience

Enjoy all features without any payment requirements. No hidden costs, no pay-to-win mechanics - just pure puzzle gaming fun accessible to everyone.

Frequently Asked Questions (FAQ)