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
- 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})$$
- Canvas Performance Optimization: Rendering hundreds of hexagons smoothly required implementing dirty rectangle optimization and batch rendering techniques.
- 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.
- Accessibility in Games: Implementing color-blind friendly palettes and ensuring touch controls work well on mobile taught me about inclusive game design.
🚧 Challenges Faced
- 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
- 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.
- 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
- 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
- css3
- devvit
- gsap
- html5
- javascript
- node.js
- react
- redis
- tailwind
- typescript
Log in or sign up for Devpost to join the conversation.