DROPHIT!

A roguelite game where you must guide the ball toward the green target. The green target shrinks each bounce and the red hazard grows. Place. Drop. Bounce. Win!

Comment

Inspiration

I was inspired by the classic physics puzzle games like Peggle and Pinball, but wanted to create something uniquely suited for Reddit's community-driven environment. The idea of a "bite-sized roguelite" that could be played in a Reddit post felt like the perfect way to bring engaging gameplay directly into users' feeds. I loved the concept of strategic bumper placement combined with physics simulation, and saw an opportunity to add roguelite progression elements that would keep players coming back for more runs.

The name "DROPHIT!" came from the core mechanic - you literally drop a ball and try to hit the target, but it also captures the satisfying "drop" feeling when you successfully complete a level.

What it does

DROPHIT! is a physics-based roguelite game that runs directly in Reddit posts. Players strategically place up to 3 bumpers on a board, then drop a ball and watch it bounce through obstacles to reach the green target while avoiding the red hazard. The game features:

  • 10-level roguelite runs with increasing difficulty
  • Strategic upgrades like Sticky Bumpers (catch & relaunch) and Splitters (duplicate ball)
  • Boss battles at levels 5 and 10 with moving portals and gravity effects
  • Community leaderboards tracking both individual scores and run completions
  • Lives system with continues to extend your run
  • Responsive design that works on both desktop and mobile

The game creates a perfect "just one more run" experience that fits naturally into Reddit's scrollable content.

How I built it

Frontend: Built with React 19 and TypeScript, using Canvas API for smooth 60fps physics simulation. I implemented a custom physics engine with gravity, collision detection, and realistic ball bouncing. The visual design uses a cyberpunk neon aesthetic with particle effects and glowing trails.

Backend: Node.js/Express server with Redis for leaderboard storage. I used Reddit's Devvit platform for seamless integration, allowing the game to run directly in posts without external redirects.

Key Technical Decisions:

  • Custom physics engine instead of a library for precise control over ball behavior
  • Canvas-based rendering for smooth animations and particle effects
  • Redis sorted sets for efficient leaderboard ranking
  • Deterministic level generation using seeded random numbers
  • Responsive design that maintains aspect ratio across devices

Devvit Integration: Used Reddit's Developer Platform to create custom posts with splash screens, menu actions for moderators, and automatic post creation on app install.

Challenges I ran into

Physics Simulation: Getting the ball physics to feel "right" was surprisingly difficult. I spent significant time tuning gravity, restitution values, and collision responses to make the ball feel satisfying to control while remaining predictable enough for strategic play.

Canvas Performance: Maintaining 60fps with complex particle effects, multiple balls, and smooth animations required careful optimization. I implemented object pooling for particles and efficient collision detection algorithms.

Mobile Touch Controls: Making the game work well on mobile devices required careful handling of touch events, pointer capture for sticky bumper aiming, and responsive UI scaling.

TypeScript Migration: The main game component started with @ts-nocheck due to complex state management. I'm still working on proper typing for the physics simulation state.

Leaderboard Complexity: Implementing two different leaderboard systems (individual scores vs. run completions) with proper ranking and pagination required careful Redis data structure design.

Accomplishments that I'm proud of

  • Smooth Physics: Created a satisfying physics engine that feels responsive and predictable
  • Complete Game Loop: Built a full roguelite experience with progression, upgrades, and replayability
  • Reddit Integration: Successfully integrated with Devvit to create a seamless in-post gaming experience
  • Visual Polish: Achieved a distinctive cyberpunk aesthetic with particle effects and neon styling
  • Community Features: Implemented robust leaderboard systems that encourage competition
  • Cross-Platform: Made the game work well on both desktop and mobile devices

What I learned

Devvit Platform: I learned how to effectively use Reddit's Developer Platform, including custom post creation, menu actions, and context management. The platform is powerful but requires careful attention to permissions and user experience.

Physics Programming: Building a custom physics engine taught me a lot about collision detection, vector math, and performance optimization. I gained deep appreciation for how game engines handle these problems.

Community Engagement: I learned that Reddit users respond well to games that feel native to the platform and don't require external navigation.

State Management: Managing complex game state in React while maintaining 60fps performance required careful architecture decisions and refactoring.

What's next for DROPHIT!

Immediate Improvements:

  • Fix TypeScript issues and remove @ts-nocheck
  • Add sound effects and music for better audio feedback
  • Implement daily challenge modes with special level layouts
  • Add more upgrade types and boss variations

Community Features:

  • User-generated content system for custom level sharing
  • Tournament modes with scheduled competitions
  • Integration with Reddit's award system
  • Social features like sharing run replays

Technical Enhancements:

  • WebGL rendering for even better performance
  • Advanced particle systems and visual effects
  • Analytics dashboard for moderators
  • A/B testing for level difficulty balancing

Platform Expansion:

  • Consider porting to other social platforms
  • Mobile app version with offline play
  • Twitch integration for streaming gameplay

I plan on adding loootttts of fun new objects and upgrades soon. The goal is to make DROPHIT! the definitive physics puzzle game for Reddit communities, with regular content updates and community-driven features that keep players engaged long-term.

Built With

  • canvas-2d-rendering-api
  • canvas-api
  • clsx-2.1.1
  • concurrently-9.1.2
  • css3
  • devvit/web
  • eslint-9.23.0
  • express-5.1.0
  • gif
  • git
  • html5
  • javascript
  • jpg
  • node.js
  • npm
  • png
  • prettier-3.5.3
  • react-19.1.0
  • react-dom-19.1.0
  • reddit's-built-in-data-storage
  • reddit's-hosting-infrastructure
  • reddit-custom-post-api
  • reddit-developer-platform-apis
  • reddit-devvit-platform-0.12.0
  • redis
  • requestanimationframe)
  • resizeobserver
  • tailwind-css-4.1.6
  • tailwind-merge-3.3.0
  • typescript
  • typescript-compiler-5.8.2
  • vite-6.2.4
  • web-apis-(pointer-events
  • windows
Share this project:

Updates