How We Built a Viral Browser Game in One Afternoon - and You Can Too
You run a Shopify store. You know the grind: posting product photos, writing captions, chasing the algorithm. Every platform wants more content, more engagement, more reason for people to share your brand name.
What if you could build a custom browser game - branded to your store - in a single afternoon? Not a hypothetical. We did it. Here's how.
The Timeline That Shouldn't Be Possible
Day 1, 2:35 PM - First commit. A blank TypeScript project.
Day 1, 9:15 PM - A fully playable Mortal Kombat-style fighting game: two procedurally drawn dinosaurs, AI opponent, soundtrack, hit effects, win tracking via Cloudflare Workers, and a live leaderboard. Deployed to Cloudflare Pages.
Day 2, 12:00 PM - Blocky pixel art style dialed in. Particle effects on every hit. Combat feels satisfying.
Day 2, 3:20 PM - "What if we made an Elon vs Nikita version?" Twenty minutes later: /elonvsnikita is live. Same game engine, new route, head images swapped onto dinosaur bodies, separate win tracking. A whole new viral angle from a single config file.
Day 2, 6:21 PM - Mobile audio fixed, share button added, sound toggle polished. Done.
22 commits. ~28 hours wall-clock. One developer. One AI agent.
The Tool: OpenCode
OpenCode is a terminal-based AI coding agent. You describe what you want. It writes the code, runs the tests, takes screenshots of your game in a real browser, evaluates the visuals, and iterates - all in a loop.
This isn't "AI generates boilerplate and you fix it for three hours." This is:
You: "Make the dinosaurs 1.5x bigger"
Agent: *edits 6 files, scales physics, scales AI thresholds,
fixes the facing-flip bug that the scale change introduced,
runs typecheck, runs tests, takes a screenshot, confirms it looks right*
You: "Ship it"
The turnaround on visual changes is seconds. You say "move the teeth up 4 pixels," it edits the graphics code, Vite hot-reloads, the agent screenshots the result and shows you. If it's wrong, it fixes it. No alt-tabbing. No pixel-hunting in devtools. The feedback loop is instant.
Why Games? Why Now?
1. Infinite Video Content
Record your game. That's it. Every fight is different. Every knockout is a clip. Every "ELON vs NIKITA - WHO WINS?" is a TikTok, a Reel, a Short.
You're not staging product photos. You're not writing scripts. You press record and the game generates content for you. The AI opponent creates drama on its own - comebacks, close calls, perfect KOs. Every session is footage.
A single game gives you endless unique clips without ever repeating yourself.
2. SEO That Actually Works
A browser game at yourdomain.com/play is:
- A reason for backlinks (gaming blogs, Reddit, forums)
- A reason for dwell time (people stay and play)
- A branded URL that's fun to share
- A unique page that Google hasn't seen a thousand times
Our game lives at dinokombat.radiantartshop.com. Every play session, every share, every "check this out" text message carries the brand domain. The bottom of every screen says RADIANTARTSHOP.COM in a glowing rainbow animation. It's not an ad - it's part of the game's aesthetic.
3. Virality Is Built In
The share button uses the Web Share API on mobile (native share sheet) with clipboard fallback on desktop. The URL includes UTM parameters. The leaderboard creates competition. The game is inherently shareable because it's fun.
And when something trends - Elon vs Nikita, any celebrity beef, any meme - you can pivot the game in twenty minutes. New route, new names, new head images. Same engine. New viral moment.
The Architecture (It's Simpler Than You Think)
Frontend: Vite + TypeScript + PixiJS (canvas rendering)
Backend: Cloudflare Workers + Hono (API) + D1 (leaderboard)
Deploy: Cloudflare Pages (frontend) + Workers (API)
Cost: Practically free on Cloudflare's free tier
The entire game is ~8,000 lines of TypeScript. No React. No framework. Just a canvas, a game loop, and procedural graphics. The dinosaurs are drawn from rectangles - no sprite sheets, no asset pipeline, no artist needed.
The "Elon vs Nikita" variant is a 71-line config file and a second HTML entry point. The game-config system means any new variant is:
- Add a config object (names, colors, head images, stats keys)
- Add an HTML page that imports the alternate entry point
- Add a line to the Vite build config
- Deploy
That's it. Twenty minutes including testing.
The Aha Moments
"Wait, it just... works on mobile?"
Cloudflare Pages serves it globally. Touch controls are auto-detected. The canvas scales to any screen. Mobile audio was the one tricky part (browsers block autoplay), and the agent figured out the exact gesture-handling pattern to make it work on iOS and Android.
"I can make a new version for any trending topic?"
Yes. The game engine is the constant. The theming is a config swap. When the next internet beef happens, you can have yourdomain.com/whatever-vs-whoever live before the memes peak. First-mover advantage on viral moments, with your brand URL baked into every share.
"Every fight is different content?"
The AI opponent uses probabilistic decision-making with frame-based reaction delays. No two fights play out the same way. Screen-record a few sessions and you have a week of short-form content without any editing.
"The agent did the visual iteration loop for me?"
OpenCode takes screenshots through Playwright, evaluates the result, and self-corrects. When we moved teeth from the jaw graphic to the head graphic (so upper teeth stay fixed with the snout), the agent:
- Identified the coordinate systems of both parent containers
- Converted positions between local spaces using pivot/position math
- Made the edit
- Screenshotted the result
- Noticed the alignment was off by a few pixels
- Fixed it
- Screenshotted again
- Confirmed it was correct
All in one conversation turn. The visual feedback loop that would normally take a developer dozens of save-refresh-squint cycles happened automatically.
What You'd Actually Ship
Imagine you sell dinosaur toys. Or streetwear. Or literally anything.
-
yourstore.com/play- A branded fighting game featuring your mascots - Screen-record fights → post daily to TikTok/Reels/Shorts
- "Beat the high score and win a discount code" → engagement + email capture
- Every share carries your domain → free brand impressions
- Google indexes a unique interactive page → SEO boost
- Seasonal variants (Halloween, Black Friday) → fresh content without new assets
The game doesn't need to be complicated. It needs to be fun enough to share once. That's the bar. And a well-tuned fighting game with satisfying hit effects and an AI that puts up a real fight clears that bar easily.
Get Started
This entire project - the game engine, the config system, the Cloudflare deployment pipeline, the visual iteration workflow - is available as a reference implementation.
Want access to the repo? Drop "Dino Kombat" in a comment below. I'll walk you through forking it, re-skinning it for your brand, and deploying it to your domain.
The stack is free (Cloudflare free tier). The tooling is free (OpenCode is open source). The only cost is an afternoon of your time - and an AI agent that types faster than you can describe what you want.
