Hexomind

• 

  GameIcon

What Inspired Me

I was inspired to create Hexomind after playing traditional block-puzzle games and wondering how the gameplay would change with hexagonal geometry. Hexagons offer six directions of connectivity instead of four, creating more complex spatial relationships and richer strategic possibilities. I wanted to build a puzzle game that felt familiar yet fresh - combining the satisfying line-clearing mechanics everyone loves with the mathematical elegance of hexagonal grids.

The Reddit platform provided the perfect opportunity to create a social puzzle experience where players could compete within their communities through integrated leaderboards while enjoying quick, engaging gameplay sessions.

What I Learned

Building Hexomind taught me several valuable lessons:

Hexagonal Coordinate Systems: I learned to work with axial coordinates $(q, r)$ and their relationship to cube coordinates where $q + r + s = 0$. This constraint enables elegant transformations like 60° rotations: $\text{Rotate}(q, r, s) = (-r, -s, -q)$.

Game Solvability Theory: Implementing a solvability checker taught me about look-ahead algorithms and game state validation. The system ensures players always have at least one valid move by simulating all possible placements recursively.

WebGL Performance Optimization: Rendering 60+ animated hexagons smoothly required learning about object pooling, batch rendering, and dirty rectangle optimization. I discovered how to maintain 60 FPS even on mobile devices through careful performance profiling.

Responsive Game Design: I learned to create truly responsive games using container queries and dynamic scaling formulas: $\text{HexSize} = \min(\frac{\text{Width}}{7\sqrt{3}}, \frac{\text{Height}}{10.5})$

How I Built It

I built Hexomind using a three-layer architecture:

1. Game Engine Layer: Used Phaser.js 3 for rendering, animations, and input handling. Implemented custom hexagon renderers and particle systems for visual effects.
2. Logic Layer: Created pure TypeScript modules for game mechanics including:
   • Hexagonal grid model with line detection algorithms
   • Adaptive piece generator that adjusts difficulty based on grid fullness
   • Solvability validator using depth-first search with memoization
3. Platform Layer: Built on Reddit's Devvit platform with:
   • Express.js server for API endpoints
   • Redis for leaderboards and game state persistence
   • Vite for hot-reload development and optimized production builds

Key implementation highlights:

• Custom drag-and-drop system with placement preview
• Three-directional line clearing (horizontal + two diagonals)
• Neon-themed UI with glassmorphism effects
• Auto-save system with versioned game states

Challenges I Faced

Coordinate System Complexity: Converting between pixel coordinates and hexagonal coordinates while maintaining precision was challenging. I solved this by creating a robust coordinate abstraction layer with comprehensive testing.

Ensuring Solvability: Early versions could generate unplayable game states. I had to implement a sophisticated look-ahead algorithm that simulates all possible moves to guarantee at least one valid placement exists.

Mobile Performance: Initial builds dropped frames during line-clear animations on older devices. I optimized by implementing staggered animations, reducing particle counts on mobile, and using CSS transforms for GPU acceleration.

Platform Constraints: Reddit's serverless environment meant no WebSockets or persistent connections. I designed the game to work fully offline with periodic syncs for leaderboard updates.

Visual Clarity: Hexagons became indistinguishable on small screens. I solved this using responsive sizing with container queries and dynamic spacing that adapts to screen dimensions.

The result is a polished puzzle game that brings fresh mechanics to a classic genre while seamlessly integrating with Reddit's social features.

Built With

• colormind-api
• concurrently
• css-container-queries
• drag-and-drop-api
• eslint
• express.js
• html5
• inter-font
• jetbrains-mono-font
• node.js
• phaser.js-3
• prettier
• reddit-devvit
• redis
• resizeobserver-api
• svg
• typescript
• vite
• vitest
• web-storage-api
• webgl