JonTheDon

A collection of immersive 3D mini-games bringing arcade-style fun directly to Reddit.

Comment

The idea came from wanting to bring console-quality gaming experiences to social platforms. I noticed that most Reddit games were simple 2D experiences, and I thought - why not push the boundaries? Growing up playing GTA San Andreas and Subway Surfers, I wanted to recreate that nostalgic feeling of smooth camera movements and endless runner excitement, but make it accessible right within Reddit posts.

The challenge was clear: could I build something that feels like a real game, not just a web toy, while keeping it lightweight enough to run smoothly in a Reddit WebView?

WHAT IT DOES

JonTheDon Games is a 3D mini-game collection featuring three distinct game modes:

  1. PARKOUR MODE - Navigate procedurally generated obstacle courses with a GTA-style cinematic camera that smoothly follows behind your character. Features bouncy platforms, moving obstacles, ice surfaces, checkpoints, and more.

  2. FIREBALL DODGE - A survival game where you dodge waves of incoming fireballs. Swipe to change lanes, jump over obstacles, and see how long you can survive as the difficulty ramps up.

  3. THEFT AWAY - An endless runner inspired by Subway Surfers. Collect coins, dodge cars and barriers, with a cinematic chase camera that creates movie-like tension as you run.

All games feature:

  • Full 3D graphics with animated character models
  • Mobile-friendly touch controls (swipe gestures, virtual joystick)
  • Desktop keyboard/mouse support
  • Leaderboards and score tracking
  • Smooth 60fps gameplay

HOW I BUILT IT

Tech Stack:

  • Frontend: React 19, Three.js for 3D rendering, Cannon-es for physics
  • Backend: Devvit serverless environment with Hono and tRPC
  • Styling: Tailwind CSS 4
  • Build: Vite
  • Testing: Vitest

Development Process:

  1. Started with the Devvit vibe-coding template as a foundation
  2. Built a custom physics-based game engine using Three.js and Cannon-es
  3. Implemented a procedural level generator with seeded randomness for consistent levels
  4. Created a GTA-style camera system with cinematic lag and auto-follow
  5. Developed touch-friendly controls with swipe detection and virtual joysticks
  6. Added animated 3D character models with Mixamo animations
  7. Integrated Redis for persistent leaderboards and game sessions

AI Usage: I used AI assistants (Claude) primarily for direction and problem-solving guidance - helping me understand Three.js camera mathematics, debugging physics issues, and suggesting architectural patterns. All code was written and reviewed by me, with AI serving as a knowledgeable pair programmer for technical questions.

CHALLENGES I RAN INTO

  1. CAMERA SYSTEM - The biggest challenge was implementing the GTA-style camera. Getting the camera to smoothly follow the player's movement direction while allowing temporary manual control, then returning to auto-follow with cinematic lag - this took multiple iterations to get right. The math for angle interpolation with wraparound was particularly tricky.

  2. MOBILE PERFORMANCE - Running 3D physics in a WebView on mobile devices required aggressive optimization. I had to disable shadows, reduce polygon counts, limit physics iterations, and carefully manage object pooling to maintain 60fps.

  3. TOUCH CONTROLS - Balancing swipe gestures with the game canvas was challenging. I needed to prevent default browser behaviors while still allowing UI interactions, and make controls feel responsive without being too sensitive.

  4. PHYSICS CONSISTENCY - Getting the player to interact correctly with moving/rotating platforms required careful synchronization between the physics engine and visual updates. Players would sometimes "slide off" platforms until I properly applied platform velocities.

  5. WEBVIEW CONSTRAINTS - Working within Reddit's WebView meant dealing with limited debugging tools and ensuring the game worked across different Reddit app versions and browsers.

ACCOMPLISHMENTS I'M PROUD OF

  • Built a full 3D game engine that runs smoothly in a Reddit post
  • Implemented a cinematic camera system that genuinely feels like GTA
  • Created three distinct, polished game modes in a single app
  • Achieved smooth 60fps gameplay on both desktop and mobile
  • Made controls that feel natural on touch devices
  • Procedural level generation that creates unique but fair challenges

WHAT I LEARNED

  • Deep understanding of Three.js camera systems and quaternion math
  • Physics engine optimization techniques for web environments
  • Touch event handling and gesture recognition
  • The importance of frame-rate independent game logic
  • How to structure a large React + Three.js application
  • Working with Devvit's WebView architecture and Redis integration

WHAT'S NEXT FOR JONTHEDON GAMES

  • Level editor for community-created parkour courses
  • Multiplayer racing mode
  • More character skins and customization
  • Daily challenges with special rewards
  • Integration with Reddit achievements/trophies
  • Sound design improvements and music tracks

Built With

Share this project:

Updates