Klotski Remastered

Rediscover the ancient strategy and logic puzzle of Huarong Dao, where history meets ingenuity!

Comment

Inspiration

The project draws inspiration from the historical and cultural significance of Huarong Dao, a classic Chinese puzzle that blends strategy and storytelling. Rooted in the tale of Cao Cao's dramatic escape during the Romance of the Three Kingdoms, it showcases both historical richness and logical ingenuity.

However, the origin of this game is not what most people consider to be "one of the oldest games in China." The history of the Huarongdao game is relatively short:

  • 1934: John Harold Fleming obtained a patent for a similar puzzle in England.
  • 1943: Liang Qing, a teacher in the New Fourth Route Army, publicized the Huarong Dao after learning it from people in northern Jiangsu province. It became popular among soldiers as a way to enhance their cultural life.
    ### International Variants
  • France: A similar game is known as "Red Donkey."
  • Japan: Similar games are called "箱入り娘" ("Daughter in a Box"), with variations including versions based on Japanese chess (shogi).

What it does

https://www.reddit.com/r/ChinesePuzzle/

How we built it

We noticed a lack of engaging and innovative digital puzzles in the gaming space, especially ones that could integrate cultural elements like Huarong Dao.We brainstormed different ideas for puzzles and tabletop games and decided on a Huarong Dao implementation because of its historical significance and rich gameplay potential. For modern flair, we added dynamic features like responsive designs and accessibility for web users.Ensuring that blocks couldn’t overlap in the grid required meticulous collision detection logic. The frontend leverages TypeScript and SVGs for dynamic interactivity

Challenges we ran into

  • Complex game state management
  • Handling touch/click interactions
  • Implementing collision detection and move validation
  • Ensuring compatibility with Devvit platform

Accomplishments that we're proud of

  • Successfully recreated the classic Huarong Dao puzzle
  • Responsive and intuitive user interface
  • Multiple difficulty levels and score tracking
  • Seamless integration with Reddit Devvit

What we learned

  • Advanced TypeScript features and class-based state management
  • Effective use of CSS Grid and CSS Variables for layout and theming
  • Deep understanding of Reddit Devvit platform capabilities
  • Techniques for handling complex game logic and interactions

What's next for Chinese klotski puzzle

  • Adding more puzzle layouts and levels
  • Integrating a leaderboard for competitive play
  • Implementing an achievement system
  • Developing a tutorial mode for new players

Built With

Share this project:

Updates