Inspiration 💡

Memory games are a classic way to keep our brains sharp, but we wanted to take it a step further. We noticed that most memory games are strictly 2D, relying on simple grid layouts. We asked ourselves: What if we added an extra dimension? We wanted to build a spatial memory game that challenges players not just to remember a sequence, but to track where those symbols are on a rotating 3D object.

Combining this idea with Reddit's powerful new Devvit platform, we saw the perfect opportunity to create a viral, community-driven puzzle game that lives right inside your daily feed.

What it does 🎮

Memory Spin 3D is an interactive spatial memory game. Players are presented with a rotating 3D Platonic solid (Tetrahedron, Cube, Octahedron, or Dodecahedron). The game flashes a sequence of symbols (emojis, numbers, or letters) on the faces of the shape. Once the sequence ends, the player must rotate the 3D shape and tap the faces in the exact same order.

To fulfill the Hackathon's "Hook" requirements, we built two core gameplay loops:

  1. Retention (Daily Challenges): Every day, a global seed generates the exact same sequence of shapes and symbols for everyone on Reddit. Players return daily to compete on a unified Daily Leaderboard.
  2. User Contributions (Custom Challenges): Anyone can become a puzzle creator. Players can select a shape difficulty and a time limit to generate a brand new, playable Reddit post using reddit.submitCustomPost(). This allows users to challenge their specific subreddits or friends with a unique puzzle, complete with its own isolated leaderboard.

How we built it ⚙️

  • Frontend (The Game): We built the 3D engine completely from scratch using Three.js in a vanilla TypeScript environment to ensure it runs blazingly fast inside Devvit's Custom Post iframe. The UI uses modern CSS glassmorphism to look sleek and native to mobile devices.
  • Backend (Devvit & Hono): We utilized Hono for our backend API routing within Devvit's serverless environment.
  • Database: We used Devvit's built-in Redis plugin to handle global state, daily leaderboards, and to store configurations for User-Generated custom challenges.
  • Game Logic: We implemented a custom mulberry32 PRNG (Pseudo-Random Number Generator). This guarantees that our daily and custom challenges are perfectly deterministic—meaning the exact same seed will always generate the exact same 3D sequence for every player.

Challenges we ran into 🚧

  • 3D Interaction in an iframe: Mapping 2D screen taps to 3D faces on a rotating shape using Raycasting was tricky, especially making sure it felt responsive and didn't trigger accidentally when grabbing the shape to rotate it.
  • Dynamic Textures: Drawing crisp text and emojis onto 3D faces dynamically required us to generate CanvasTextures on the fly for every face, and carefully managing memory and disposing of old textures so the game wouldn't crash the browser.
  • Hackathon Requirements: Designing a flow that seamlessly allows a player inside an iframe to hit a button and generate a new Reddit post required careful state management between the frontend API calls and the Devvit backend context.

Accomplishments that we're proud of 🏆

  • Getting a fully interactive, smooth 60FPS 3D environment running directly inside a Reddit feed.
  • The seamless integration of the "Custom Challenge" creator. It feels incredibly satisfying to play a game, click "Create Challenge," and instantly have a unique Reddit post generated for your friends to play.
  • Developing a clean, Apple-inspired "Dynamic Island" HUD that looks incredibly polished inside the Reddit mobile app.

What we learned 🧠

We learned a massive amount about integrating Three.js with serverless backends, optimizing WebGL for constrained iframe environments, and leveraging Devvit's ecosystem (Redis, Custom Posts, Hono) to build full-stack applications that feel like native games.

What's next for Memory Spin 3D 🚀

  • More Shapes & Mechanics: Introducing complex shapes like the Icosahedron, or adding "distraction" mechanics where the shape rotates faster.
  • Subreddit vs Subreddit Leaderboards: Allowing different Reddit communities to compete against each other collectively on the Daily Challenge.
  • Cosmetics: Letting players unlock different materials for the 3D shapes (e.g., Gold, Neon, Holographic) based on their leaderboard rankings.

Built With

Share this project:

Updates

Submission history