Hi everyone, I’m Jesse, the developer of OnlineTetris. I built a browser-based Tetris with vanilla JS + HTML5 Canvas. I launched the first version at the end of April and then basically left it alone. A month later I noticed around twenty new players were playing every day—some even reported bugs. So I started fixing things and iterating. Now it’s at 2,000+ monthly active users across hundreds of cities. Here I’ll share my motivation, technical details, key features, how “zero marketing” played out, some data, and a few takeaways.
1. The Idea: Why Tetris?
One day in April this year I suddenly remembered the feeling of playing Tetris on a handheld as a kid: simple rules, instant feedback, and when you lose, you can instantly try again. I wanted a web version you can open and play anytime—a small tribute to that era.
I shipped the first version at the end of April. I didn’t plan any promotion or ongoing ops—just “ship it and park it.”
A month later I happened to check the numbers: roughly 20 players a day. Even more surprising, people were leaving comments on-site with lots of suggestions—gameplay, UI styling, etc. That’s when I realized some folks genuinely liked it. I began fixing bugs and iterating based on their feedback.
2. Technical Details: How I Built It
- Frontend stack: HTML5 + vanilla JavaScript + Tailwind CSS. Keep it simple so I can maintain it solo.
-
Rendering: Canvas +
requestAnimationFrame. I made some classic mistakes at first:- Tying refresh rate too tightly to game logic, which caused high GPU usage and animation stutter;
- Overeager partial redraws—redrawing areas that didn’t need it;
- Browser/device differences (especially iGPUs) made edge cases more visible.
-
What I changed:
- Split the “logic layer” from the “rendering layer” to reduce wasted frames;
- Use minimal dirty-rectangle redraws whenever possible;
- Run animations on a lightweight, separate path to reduce interference;
- Added effects degradation for integrated graphics (e.g., lower animation frequency for some themes).
-
Backend:
- Supabase for the database.
- Each finished game round is stored and pushed to the leaderboard in real time.
- Aggregations for the leaderboard live in SQL views to avoid piling too much logic into the frontend.
3. Notable Features
① Global Leaderboard (Individual)
- Ranking by each player’s personal high score to drive engagement and a sense of achievement.
- Basic validation on submissions to reduce anomalous data.
② Global Leaderboard (Regional)
- Aggregate scores by region to get a region’s total points, and rank regions globally.
- I’m refining “bubble markers” on the map (zoom, hover for details).
③ Skin System
- Pure “joy engineering”: wood, neon, retro, pixel, etc.
- A real-world lesson: pretty ≠ high-perf. Some theme animations don’t love iGPUs, so I added toggles and graceful degradation.
4. “Marketing”: I Basically Didn’t Do Any
- I’m not a marketing person and had no budget.
- No ads or press at launch.
- I only shared the link with a few friends—after that it spread organically.
- Honestly, this forced me to spend time on the experience itself.
5. Six-Month Snapshot
- It’s been about half a year since launch.
- MAU: steady at 2,000+.
- Geography: players from hundreds of cities worldwide.
- Feeling: small in scale but real. Some people keep coming back.
6. Lessons Learned: Taught by Players
- Treat players like friends. Every piece of feedback is product review help. If someone says animations stutter, I go record a performance flamegraph; if someone says lock-in feels off, I rework the “grounding delay” logic.
- Experience first, even for tiny details. For instance, “Should there be a short movable window after a piece touches down?” dramatically affects feel.
- Optimize for real hardware. Many users are on integrated graphics—don’t only build “soul-stirring” effects on high-end machines.
7. Updates & What’s Next
-
In progress:
- Further reducing GPU pressure for certain themes;
- Polishing map interactions for the regional leaderboard;
-
Planned:
- A fuller “City Championship” mode;
- Achievements/titles and light incentives.
Final Thoughts
This project began with nostalgia, survived on player feedback, and keeps rolling by getting the small things right.
If you’re also building a web mini-game, I’d love to chat about performance and game feel; if you’re just passing by as a player, please feel free to take it for a spin—complaints welcome.
Site: onlinetetris.org (Play a couple of rounds anytime. I’ll keep listening and polishing.)
Top comments (0)