Reddit Klotski Puzzle!

🚀 A modern take on the classic Klotski puzzle, inspired by ZH Computer’s 1991 Windows 3 release.

Comment

Inspiration

Klotski is a sliding block puzzle thought to have originated in the early 20th century.The name may refer to a specific layout of ten blocks, or in a more global sense to refer to a whole group of similar sliding-block puzzles where the aim is to move a specific block to some predefined location. An early graphical computer version was created by Jim Bates in 1988. In 1991, Klotski was included in the third Microsoft Windows Entertainment Pack. Many versions of Klotski followed, either freely or commercially available. For example, one is included in the GNOME desktop environment. Some include blocks which have special effects.

What it does

This project is a browser-based Klotski puzzle game, inspired by the classic Klotski by ZH Computer (1991, Windows 3.0). It features level-based leaderboards using Redis, tracks user moves, and allows players to compete for the lowest move count. The game is built with TypeScript, Redis, and a frontend UI, and was integrated into Reddit as a game post to attract players.

How I built it

I've always been a fan of classic logic puzzles, and Klotski, with its simple rules but surprisingly complex solutions, has always stood out. I noticed the huge engagement around daily puzzles and community challenges on Reddit (like Wordle, Connections, etc.). It struck me that Klotski's format could be perfect for that kind of daily engagement. I envisioned a simple, accessible version that Redditors could quickly jump into, maybe challenge each other, and share their results. I managed the game state using a 2D array.I designed the first level to act as a tutorial, highlighting Cao Cao and the exit to teach the goal instantly, without words.representing the board. I researched on How to Make Players Feel Joy? For a puzzle game, "joy" comes from progress and mastery.

Even if you don’t know something, just start small. Break it down, experiment, and don’t be afraid to ask for help.At several points, I felt stuck, frustrated, and doubted my skills. I thought:"Why is nothing working? Maybe I'm not good enough." "Other developers seem to build things effortlessly—why am I struggling?" "Should I just quit and work on something easier?" I told myself "I don’t know this yet, but I can learn it by building my favorite puzzle."

Challenges we ran into

Balancing difficulty so puzzles feel rewarding but not frustrating took quite a bit of tweaking.

WHen integrate with Reddit/Devvit:

  1. WebView Asset Loading Issues:

    • Initially struggled with loading page.html in the WebView
    • Had to understand Devvit's specific requirements for WebView assets
    • Learned that WebView assets need to be in the correct location and properly served

  2. TypeScript/JavaScript Module System Conflicts:

    • Faced "exports is not defined" errors
    • Had to deal with module system differences between:
      • TypeScript compilation
      • Browser ES modules
      • Devvit's module system

  3. Communication Between WebView and Devvit:

    • Implemented a message-passing system between:
      • WebView (game logic)
      • Devvit app (Reddit integration)
    • Had to handle:
      • Initial state loading
      • Score updates
      • Best score persistence

  4. Build Process Complexity:

    • Needed to set up proper TypeScript compilation
    • Had to ensure compiled files are in the correct location
    • Managed file paths and module resolution

  5. State Management:

    • Implemented Redis for persistent storage of best scores
    • Had to handle user authentication and score tracking
    • Managed game state across different levels

  6. UI/UX Integration:

    • Created a custom Reddit post type
    • Implemented navigation between different views (home, tutorial, game)
    • Had to handle responsive design within Reddit's constraints

Some future improvement: Devvit's WebView system requires specific setup and understanding

  1. Module systems need to be consistent across the entire stack
  2. State management needs to be carefully considered when integrating with Reddit
  3. Error handling and debugging are crucial in a complex integration

What I learned

I have little experience with Devvit (Reddit’s framework for custom apps) and was unfamiliar with Redis’s sorted sets for leaderboards. I also had to navigate the complexities of deploying a game on a public platform rather than just building for personal use.

How I Overcame It: ✅ Read documentation & source code – When I didn’t understand something, I went straight to the official docs and open-source examples. ✅ Tried, failed, debugged, repeated – I built small test projects in Redis and Devvit to understand how they worked before integrating them fully. ✅ Engaged with the developer community – I asked questions on Reddit dev communities, Discord groups, and GitHub discussions. Surprisingly, people were helpful!

Even if you don’t know something, just start small. Break it down, experiment, and don’t be afraid to ask for help.At several points, I felt stuck, frustrated, and doubted my skills. I thought:"Why is nothing working? Maybe I'm not good enough." "Other developers seem to build things effortlessly—why am I struggling?" "Should I just quit and work on something easier?" I told myself "I don’t know this yet, but I can learn it by building my favorite puzzle."

What's next for Reddit Klotski Puzzle!

More Levels: Adding a larger library of puzzles, potentially with difficulty ratings. Leaderboards: Implementing daily/weekly leaderboards (perhaps tied to specific Reddit threads or subreddits). Themes/Customization: Allowing users to change the look and feel of the puzzle board/blocks. Saving Progress: Letting users save their state on more complex puzzles. Improved Mobile Experience: Further refining touch controls and layout for smaller screens.

Built With

Share this project:

Updates