1010 Hex - Hexagon Puzzle Game

Seele01-Flash
By
1010 Hex is an elegant grid-based puzzle game that combines strategic thinking with colorful hexagon tile matching. Place hex-shaped pieces on a 10x10 grid and match 5+ tiles in a row to clear lines and score points.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "1010 Hex". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style**: Skeumorphic design blending "Tactile Board Game" with "Digital Arcade". * **The Grid**: A 10x10 (or similarly proportioned) Hexagonal Grid. Use `THREE.CylinderGeometry` (6 segments) or extruded shapes to create 3D hexagonal tiles. * **Texture/Material**: * **Empty Slots**: Light, natural wood texture with a matte finish. The edges should look slightly beveled. * **Player Blocks**: Glossy, plastic-like material (`MeshPhysicalMaterial` with transmission or high roughness/metalness adjustments) in vibrant colors (Purple, Neon Green, Orange). They should look like polished game pieces. * **Background**: A solid, calming Teal/Cyan color (approx hex: `#2BB6D8`) to match the screenshot. * **Lighting**: Soft, directional lighting from the top-left to cast subtle shadows, emphasizing the depth of the 3D tiles. Add Ambient Occlusion (AO) if possible for depth between hexes. * **Mobile Optimization**: Use **InstancedMesh** for the grid cells to reduce draw calls. Limit real-time shadows to the active moving piece to save battery. ### 2. Audio Requirements * **BGM**: A looping, "Lo-Fi" or "Chill Hop" track. Relaxing, non-intrusive, focusing on concentration. * **Sound Effects (SFX)**: * **Pick Up**: A soft "pop" or suction sound when a player touches a shape. * **Snap**: A wooden "clack" sound when a piece hovers over a valid placement slot. * **Place/Drop**: A solid thud when the piece is locked in. * **Clear**: A satisfying harmonious chime or glissando when a line creates a match. * **Game Over**: A slowing-down mechanical whir. ### 3. Gameplay Loop * **Core Mechanic**: A drag-and-drop puzzle. * The screen displays the main Hex Grid (empty at start). * Three random "Shapes" (composed of 1 to 4 connected hexes) spawn at the bottom of the screen. * **Interaction**: The player drags a shape from the bottom onto the grid. * **Placement Logic**: * Shapes can only be placed if the target grid cells are empty. * The shape must fit entirely within the grid boundaries. * **Scoring/Clearing**: * **Rule**: Unlike standard 1010, use the description's specific rule: **Line up at least 5 blocks of the same color** in any direction (horizontal or diagonal) to clear them. * **Clear Effect**: When cleared, the blocks should shrink (`scale.set(0,0,0)`) and disappear with a particle burst effect before the data is removed. * **Game Over**: Triggered when the current shapes at the bottom cannot fit anywhere on the remaining empty grid slots. ### 4. Mobile Controls & Interaction * **Controls**: Pure touch interface. * **Raycaster**: Implement `THREE.Raycaster` mapped to `touchstart`, `touchmove`, and `touchend` events. * **Drag Offset**: When dragging a piece, offset the mesh slightly *above* the finger's touch point so the player can see exactly where they are placing the tile (critical for mobile UX). * **Visual Feedback**: * **Ghost/Preview**: When dragging a shape over the grid, show a semi-transparent "Ghost" version of the shape snapping to the underlying grid slots to indicate valid placement. * **Invalid State**: If dragging over a filled slot, tint the shape red. * **Orientation**: Portrait mode preferred. * **Layout**: Top 75% is the Grid, Bottom 25% is the "Hand/Spawn Area". * **Haptics**: Trigger `window.navigator.vibrate(10)` when a piece snaps into a valid slot or is successfully dropped. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

1010 Hex is a captivating HTML5 puzzle game that brings a fresh twist to classic tile-matching gameplay. This elegant and colorful game challenges players to think both tactically and strategically as they arrange hexagon-shaped tiles on a compact 10x10 grid. With its simple yet engaging mechanics, 1010 Hex offers hours of brain-teasing entertainment that's perfect for puzzle enthusiasts of all skill levels.

Core Features

Unique Hexagon Design

Unlike traditional square-based puzzle games, 1010 Hex features beautiful hexagon tiles that create visually stunning patterns. The hexagonal shape adds an extra layer of complexity to your strategic planning, making each move more interesting and challenging.

Strategic Gameplay Mechanics

  • Line Clearing System : Match 5 or more tiles of the same color in a row to clear them from the grid
  • Color-Based Strategy : Multiple vibrant colors require careful planning to create effective combinations
  • Grid Management : The 10x10 playing field demands efficient space utilization
  • Endless Challenge : No time limits - focus purely on strategy and optimal placement

Cross-Platform Compatibility

Built with HTML5 technology, 1010 Hex runs smoothly on all modern devices including desktop computers, tablets, and smartphones. Play anywhere, anytime without downloads or installations.

Game Rules and Mechanics

The objective is elegantly simple yet strategically deep. Players receive various shaped combinations of colored hexagon tiles that must be placed on the game grid. When you successfully align 5 or more tiles of the same color in any direction, they disappear from the board, freeing up valuable space and adding to your score.

Scoring System

Points are earned each time you clear a line of matching colors. The more tiles you clear simultaneously, the higher your score multiplier becomes. Strategic players can set up chain reactions for massive point bonuses.

How to Play

Basic Controls

  • Mouse Selection : Click on the colored hex tile combinations displayed on the sides of the screen
  • Drag and Drop : Use your mouse to position selected pieces anywhere on the 10x10 grid
  • Strategic Placement : Consider both immediate fit and future possibilities when placing tiles

Winning Strategy Tips

  1. Plan Ahead : Always consider how current placements will affect future moves
  2. Color Coordination : Focus on building lines with colors you have multiple pieces for
  3. Space Management : Keep the center of the grid as clear as possible for flexibility
  4. Pattern Recognition : Look for opportunities to clear multiple lines simultaneously

Why Play 1010 Hex

Perfect for All Ages

With its "Easy" difficulty rating, 1010 Hex welcomes players of all experience levels. The intuitive controls and clear visual feedback make it accessible to newcomers, while the strategic depth keeps experienced puzzle fans engaged.

Brain Training Benefits

As a certified brain teaser, 1010 Hex helps improve: - Spatial reasoning through hexagon pattern recognition - Strategic planning via forward-thinking placement decisions - Color coordination skills through matching mechanics - Problem-solving abilities under grid constraints

Stress-Free Gaming

Without time pressure or complex rules, 1010 Hex provides a relaxing yet mentally stimulating experience. It's the perfect game for unwinding while keeping your mind sharp.

Free and Accessible

Enjoy the complete 1010 Hex experience absolutely free. No registration required, no hidden costs, and no download necessary - just pure puzzle fun in your browser.

Frequently Asked Questions (FAQ)