Hex Puzzle - Colorful Hexagon Block Game

Seele01-Flash
By
Hex Puzzle is a relaxing and addictive hexagon block puzzle game featuring colorful pieces and easy-to-learn gameplay. Create complete rows to clear the board and achieve high scores in this endless brain teaser.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Hex Puzzle". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style**: Minimalist, "Dark Mode" aesthetic with high-contrast, "candy-colored" game pieces. Use a soft, matte charcoal color (`#222222`) for the background to reduce eye strain. * **Geometry**: * **The Board**: A large hexagon grid composed of smaller hexagonal slots. Use `CylinderGeometry` (with 6 radial segments) to create flat, 3D hexagonal tiles. * **The Pieces**: Groups of connected hexagons (Tetris-like shapes but hexagonal). Give them a slight bevel and distinct colors (Cyan, Hot Pink, Lime Green, Electric Purple, Orange) to distinguish them. * **Camera**: Use an **Orthographic Camera** to ensure the puzzle grid remains perfectly aligned without perspective distortion, which is crucial for precision placement on mobile screens. * **Effects**: * Highlight the grid slot under the finger with a faint "ghost" or white outline to indicate valid placement. * Simple particle explosion (cubes or tiny hexes) when a line is cleared. * **Mobile Optimization**: Use shared Geometries and Materials to minimize draw calls. Avoid complex shadows; use baked ambient occlusion or simple directional lighting. ### 2. Audio Requirements * **BGM**: A relaxing, downtempo "Lo-Fi" or ambient synth track that loops seamlessly. It should be quiet and non-intrusive to aid concentration. * **Sound Effects (SFX)**: * **Pick Up**: A soft "pop" or "suction" sound. * **Place Down**: A satisfying solid "thud" or "click". * **Line Clear**: A bright, magical chime (consider increasing the pitch if multiple lines are cleared at once). * **Game Over**: A descending, slow-down sound effect. ### 3. Gameplay Loop * **Grid Logic**: Implement a Hexagonal Grid system (preferably using **Axial Coordinates** `q, r, s`). The main board is a hexagon shape itself. * **Spawning**: At the bottom of the screen, spawn **three** random shapes. These shapes stay until dragged onto the board. New shapes only appear when all three current shapes are used. * **Placement**: The player drags a shape from the bottom to the grid. It can only be placed if all its constituent hexagons fit into empty grid slots. * **Clearing Lines**: Check for full lines in all three hexagonal directions (horizontal, diagonal-left, diagonal-right). If a line is full, remove those blocks and award points. * **Win/Loss Condition**: Infinite gameplay. The game ends when none of the three available shapes can fit anywhere on the remaining grid slots. * **Score**: Display a high score and current score at the top of the screen. ### 4. Mobile Controls & Interaction * **Touch Handling**: Map `touchstart`, `touchmove`, and `touchend` events to a Raycaster. * **Drag Offset**: **Crucial**: When the player touches and drags a piece, render the piece slightly **above** the touch point (Y-axis offset) so the player's finger does not obscure the puzzle piece they are trying to place. * **Screen Orientation**: Lock to **Portrait Mode**. * **UI Layout**: * Top 15%: Score & Best Score. * Middle 60%: The Hexagon Grid (Play Area). * Bottom 25%: The "Hand" area where the 3 selectable pieces spawn. Ensure these are large enough to be easily tapped. * **Feedback**: Add a subtle vibration (using `navigator.vibrate` if available) when a piece is successfully placed or a line is cleared. Prevent default browser scrolling/zooming behavior via CSS (`touch-action: none`). Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

Hex Puzzle is a charming and relaxing puzzle game that combines simple mechanics with addictive gameplay. With a stellar 3.8/5 rating from players, this colorful hexagon-based puzzle offers endless entertainment for puzzle enthusiasts of all skill levels. The game features vibrant hexagonal pieces set against a sleek dark background, creating an eye-catching visual experience that's easy on the eyes during long gaming sessions.

Core Features

Relaxing Gameplay Experience

Hex Puzzle provides a stress-free gaming environment perfect for unwinding after a busy day. The soothing colors and gentle gameplay mechanics make it an ideal choice for casual gamers seeking relaxation.

Simple Yet Engaging Mechanics

  • Easy to Learn : The rules are straightforward - simply create complete rows of hexagons
  • Endless Gameplay : No time limits or pressure, play at your own pace
  • Colorful Design : Vibrant hexagonal pieces against a contrasting dark background
  • Strategic Depth : Despite simple rules, the game requires forward thinking and planning

Universal Compatibility

  • Free to Play : Completely free with no hidden costs or premium content
  • Cross-Platform : Works seamlessly on desktop computers, tablets, and smartphones
  • HTML5 Technology : No downloads required, play instantly in your web browser
  • Mobile Optimized : Touch-friendly controls perfect for mobile gaming

Game Play

Basic Rules

The objective in Hex Puzzle is beautifully simple: create complete rows of hexagons across the playing field. These rows can be: - Horizontal : Straight across the board - Vertical : Top to bottom - Diagonal : Any diagonal direction

When you successfully complete a row, it automatically disappears, making room for new pieces and earning you points.

Strategic Elements

While the rules are simple, mastering Hex Puzzle requires strategic thinking: - Piece Management : Each piece has a unique shape, so placement matters - Board Planning : Consider how clearing one row affects the remaining pieces - Space Optimization : Efficiently use the hexagonal playing area - Forward Thinking : Plan several moves ahead to avoid getting stuck

Operation Guide

Desktop Controls

  • Mouse Click and Drag : Select a piece and drag it to your desired position on the board
  • Precise Placement : The hexagonal grid helps with accurate piece positioning
  • Pause Function : Use the pause button to take breaks or restart if needed

Mobile Controls

  • Touch and Drag : Simply tap a piece and drag it to where you want to place it
  • Intuitive Interface : The game is optimized for touch screens with responsive controls
  • Gesture Support : Smooth finger movements for natural gameplay experience

Game Interface

  • Score Display : Track your current score and try to beat your personal best
  • Piece Preview : See upcoming pieces to plan your strategy
  • Restart Option : Easy restart functionality when you want to start fresh
  • Progress Tracking : Monitor your improvement over multiple sessions

Why Play This Game

Perfect for Brain Training

Hex Puzzle serves as an excellent brain exercise, improving spatial reasoning, pattern recognition, and strategic planning skills. The game challenges your mind while remaining relaxing and enjoyable.

Stress Relief and Relaxation

Unlike fast-paced action games, Hex Puzzle offers a calming experience. The absence of time pressure allows you to think carefully about each move, making it perfect for stress relief and mental relaxation.

Accessible to Everyone

Whether you're a puzzle game veteran or a complete beginner, Hex Puzzle welcomes all skill levels. The intuitive gameplay makes it easy for anyone to start playing immediately, while the strategic depth keeps experienced players engaged.

Convenient Gaming

With no download requirements and cross-platform compatibility, you can enjoy Hex Puzzle anywhere, anytime. It's perfect for quick gaming sessions during breaks or extended play when you want to unwind.

Endless Replayability

Every game of Hex Puzzle presents new challenges and opportunities. The random piece generation ensures that no two games are exactly alike, providing endless entertainment value.

Frequently Asked Questions (FAQ)