HexaWords: Reimagining Word Puzzles on a Hexagonal Canvas

🎮 Inspiration

HexaWords was inspired by the addictive gameplay of Word Stacks by PeopleFun, but I wanted to push the concept further. While traditional word games use square grids or linear arrangements, I was fascinated by the mathematical elegance of hexagonal grids. Hexagons appear everywhere in nature—from honeycombs to molecular structures—because they're the most efficient way to fill space.

The idea struck me: what if word puzzles could leverage the six-directional connectivity of hexagons? This would create more interesting word intersections and a more organic puzzle-solving experience. Each hexagon connects to six neighbors instead of four, opening up $\binom{6}{2} = 15$ possible paths through just three tiles, compared to only $\binom{4}{2} = 6$ paths in a square grid.

🛠️ How I Built It

Tech Stack

  • Frontend: TypeScript, HTML5 Canvas for rendering the hexagonal grid
  • Backend: Express.js with Reddit's Devvit framework
  • Database: Redis for fast user data and leaderboard management
  • Styling: Tailwind CSS for responsive UI components

Core Architecture

The most challenging part was implementing the hexagonal grid system. I used axial coordinates (q, r) which elegantly map to hexagonal layouts:

Hexagon neighbors at (q, r):
- (q+1, r), (q-1, r)     // East, West
- (q, r+1), (q, r-1)     // SE, NW
- (q+1, r-1), (q-1, r+1) // NE, SW

The word generation algorithm uses a recursive backtracking approach to place words on the grid while ensuring they intersect properly. Each word must share at least one letter with existing words, creating an interconnected puzzle.

💡 What I Learned

  1. Hexagonal Math is Beautiful: Converting between pixel coordinates and hex coordinates requires understanding the relationship: $$x = size \times \frac{3}{2} \times q$$ $$y = size \times \sqrt{3} \times (r + \frac{q}{2})$$
  2. Canvas Performance Optimization: Rendering hundreds of hexagons smoothly required implementing dirty rectangle optimization and batch rendering techniques.
  3. Community Features Matter: Adding the ability to create and share custom levels transformed the game from a single-player experience to a community-driven platform. The Reddit integration allows players to share their puzzles directly to subreddits.
  4. Accessibility in Games: Implementing color-blind friendly palettes and ensuring touch controls work well on mobile taught me about inclusive game design.

🚧 Challenges Faced

  1. Word Placement Algorithm

The biggest challenge was creating an algorithm that could reliably place 3-6 words on a hexagonal grid while ensuring they interconnect. Initial attempts often resulted in impossible puzzles or words floating separately. The solution involved:

  • Building a graph of possible intersection points
  • Using depth-first search to find valid placements
  • Implementing a scoring system to prefer aesthetically pleasing layouts
  1. State Management

Managing game state across level progression, daily challenges, and user-created content required careful architecture. I implemented a centralized state manager with Redis persistence to ensure players never lose progress.

  1. Performance on Mobile

Hexagonal grids are computationally intensive to render. I had to optimize by:

  • Pre-calculating hexagon vertices
  • Implementing view culling to only render visible hexagons
  • Using requestAnimationFrame for smooth animations
  • Reducing draw calls through batch rendering
  1. Daily Challenge System

Creating a fair daily challenge that's the same for all players while preventing spoilers was tricky. I implemented a deterministic seed-based generation system using the date as input: $$seed = \text{hash}(date \bmod 60)$$

This creates a 60-day cycle of unique puzzles.

🎯 Future Vision

HexaWords is just the beginning. I envision adding:

  • Multiplayer battles: Real-time competitive word finding
  • Themed level packs: Puzzles around specific topics (science, history, etc.)
  • AI difficulty adaptation: Using player statistics to generate perfectly challenging puzzles
  • Global tournaments: Weekly competitions with prizes

🙏 Acknowledgments

Special thanks to PeopleFun for creating Word Stacks, which showed me how engaging word puzzles can be. This project is a love letter to word games and a demonstration of how classic concepts can be reimagined with modern technology and mathematical elegance.

The hexagonal grid isn't just a gimmick—it's a fundamental reimagining of how letters can connect to form words, creating a more natural and satisfying puzzle-solving experience.


Built with ❤️ for the Reddit Games and Puzzles community

Built With

Share this project:

Updates