PictoPuzzle

Align the Pieces, Beat the Clock!

Comment

Inspiration

We wanted to create an engaging, accessible game that combines visual creativity with problem-solving. Inspired by classic sliding puzzles and modern digital platforms, we aimed to bring a fresh, competitive twist to a timeless game. Reddit's interactive platform provided the perfect opportunity to make a game that's easy to play, yet fun and challenging for communities.

What it does

PictoPuzzle is a picture alignment game where players solve scrambled images by sliding the pieces into their correct positions. The goal is to complete the puzzle as fast as possible, with a timer tracking performance. The game records the best time for each player, fostering friendly competition with leaderboards for communities to engage and compete.

How we built it

  • We built PictoPuzzle using Devvit, Reddit's developer platform for creating interactive apps. Specifically using the Webview Interactive Post.
  • The core logic of the sliding puzzle game was implemented using HTML, CSS, and JavaScript, while the Devvit components allowed us to integrate the game with Reddit’s post structure.
  • Redis storage was used to persist player data, such as recording and updating their best times for each puzzle.
  • We utilized WebViews for rendering the game UI, ensuring smooth, responsive gameplay across platforms.

Challenges we ran into

  1. Asynchronous State Management:
    Fetching and displaying the best time dynamically upon page reload required handling asynchronous operations properly without breaking the UI flow.
  2. Image Scrambling and Solvability:
    Ensuring that the scrambled puzzle configurations were solvable was a unique challenge. We implemented logic to verify the solvability of each generated puzzle.
  3. Integration with Devvit:
    Learning and integrating Devvit's APIs, especially with Redis and WebViews, required overcoming a learning curve.

Accomplishments that we're proud of

  • Successfully created a functional and interactive sliding puzzle game.
  • Implemented a best-time tracking system that updates in real time and persists across reloads.
  • Added a leaderboard feature to promote community competition and engagement.
  • Built a clean and responsive UI that works seamlessly across web and mobile platforms.

What we learned

  • How to utilize Devvit to build interactive and scalable apps for Reddit.
  • Implementing state management and asynchronous data handling for a smooth user experience.
  • Using Redis for persistent storage and creating a leaderboard system.
  • The importance of building a game that is not only fun but also fosters social engagement within communities.

What's next for PictoPuzzle

  1. Daily Challenges: Introduce new puzzles every day for players to solve, encouraging them to come back daily and compete.
  2. Gauntlet Mode: A new gamemode where players must solve a series of increasingly difficult puzzles within a single session. Each completed puzzle unlocks the next one, with a cumulative timer tracking overall performance.
  3. Customizable Puzzles: Allow users to upload their own images to create unique puzzles for their communities.
  4. Community Tournaments: Organize timed events where players compete within their subreddit to achieve the best time on a shared puzzle.

PictoPuzzle is just the beginning – we aim to keep enhancing it with new features and challenges to make it a staple game for Reddit communities!

Built With

Share this project:

Updates