Spider Swing

Inspiration

Spider Swing comes from the timeless joy of classic web-swinging games and precision physics platformers. We wanted to build a game that was fast, easy to pick up, and highly addictive. When Reddit announced the Games with a Hook Hackathon, we saw the perfect opportunity to take this concept and bring it to a place where people already gather—the Reddit feed. Our goal was to create a friction-free gaming experience that turns subreddits into interactive gaming hubs.

What it does

Spider Swing is a 2D physics-based game where players control a character swinging from platform to platform using realistic momentum, rope-tension, and gravity.

The Goal: Navigate through some progressively challenging levels, collect coins, and reach the portal at the end of each level. The Gameplay: Tap/click and hold to launch a web line onto floating islands, release to let go, and use momentum to launch yourself forward. Collect power-ups to gain special abilities, which are tracked on a dynamic UI. The Reddit Integration: The game is packaged as an interactive Reddit post. Subreddit moderators can create a post from their actions menu, and any user scrolling their feed can click and play instantly—no downloads or redirects required.

How we built it

The project was built by combining a high-performance frontend game engine with the new Reddit Devvit Web Platform (v0.13.x):

Frontend: Built using pure HTML5 Canvas, CSS3, and modern vanilla JavaScript for high-performance physics calculations, smooth collision detection, and responsive controls. Backend & API: Powered by Reddit's Node.js server engine. We configured a declarative subreddit menu action in devvit.json that routes to a server-side endpoint handler. Post Creation: The server uses the modern @devvit/web/server and @devvit/reddit APIs to programmatically spawn interactive posts in the subreddit when the moderator menu item is clicked.

Challenges we ran into

API/Bundler Separation: Devvit enforces a strict boundary between client-side code (running in the browser WebView) and server-side code (running in Reddit's Node.js sandbox). Importing server-side modules in client files triggered bundler panics. We overcame this by modularizing our directory structure (webroot/ for assets, src/ for server scripts) and using explicit build configurations. Network & Port Binding: We encountered a fetch failed error where Reddit's gateway couldn't route requests to our app's internal Node.js server. We resolved this by implementing a native Node.js HTTP request listener and dynamically binding it to getServerPort() provided by the environment, rather than a hardcoded or random port. UI Real Estate: Fitting a full game interface into a Reddit feed container required careful design. We had to relocate buttons (like the sound toggle) to prevent overlaps with the coin count and build a clean power-up indicator layout beneath the stats.

Accomplishments that we're proud of

Frictionless Play: Users can play a fully-fledged 2D physics game directly inside an interactive Reddit post without leaving the app or website. Smooth Physics: Implementing rope tension, momentum conservation, and level collision that feels satisfyingly responsive. Polished Interface: Designing a clean, arcade-like HUD that adapts beautifully to both mobile and desktop Reddit feeds.

What we learned

Modern Devvit Architecture: We got hands-on experience with Devvit 0.13.x, migrating from legacy Blocks APIs to the new declarative menu items and Hono/Node server endpoints. Isolate Boundaries: We learned how to properly manage dependencies across runtime environments (V8 Isolates vs. Browser WebViews) and package them efficiently using esbuild.

What's next for Spider Swing

Global Leaderboards: Integrate Devvit's Redis plugin to store high scores, allowing members of the subreddit to compete for the fastest times on each level. Level Editor: Allow Reddit users to build their own levels and share them directly in the comments. Daily Challenges: Auto-generate a new challenge map every day to keep the subreddit active and engaged.

Built With

• canvas
• css3
• devvit-sdk
• esbuild
• html5
• node.js
• typescript
• vanilla-javascript