I Built 40+ Free Browser Games in Vanilla JS — Here's What I Learned

javascript dev.to

I Built 40+ Browser Games in Vanilla JavaScript — Here's What I Learned

Over the past few months, I built GamelyByte — a collection of 40+ original browser games, all hand-coded in vanilla JavaScript with no game engine.

You can play them here: GamelyByte.com

The collection includes:

  • Chess with a real AI opponent
  • 8-Ball Pool with realistic physics
  • A PUBG-style Battle Royale
  • A Vampire Survivors-inspired roguelite
  • A 3D driving game
  • Puzzle, strategy, arcade, and action games

Every game runs directly in the browser on both mobile and desktop. No downloads, no installs, and no account required.

Why I Chose Vanilla JavaScript Instead of Unity

Most people building browser games reach for Unity, Godot, or another engine. I decided to build everything from scratch for three reasons:

1. Faster Load Times

A typical Unity WebGL build can be anywhere from 5–20 MB or more.

My largest game is under 50 KB.

On slower mobile connections and budget Android devices, that difference is massive. Players can start instantly instead of waiting through a loading screen.

2. Instant Gameplay

I wanted games to feel like opening a webpage, not launching an application.

Click. Play.

No installation. No account creation. No waiting.

3. Complete Control

Writing your own systems forces you to understand every detail.

When something behaves incorrectly, there's no engine black box to debug. You know exactly how the physics, collision detection, rendering, and input systems work because you built them yourself.

The Hardest Game to Build: 8-Ball Pool

Pool physics turned out to be much harder than expected.

The biggest issue was tunneling. Fast-moving balls would occasionally pass through each other because collisions were only being checked once per frame.

The solution was sub-stepped collision detection.

Instead of running physics once per frame, I split each frame into multiple smaller physics updates.

That simple change completely eliminated tunneling and ended up improving several other games as well, including my bowling game and physics-based merge game.

The Mobile Input Bug That Took Me Three Games to Figure Out

One frustrating issue kept appearing on mobile devices.

Players would drag the virtual joystick left, but the character would continue moving in the previous direction.

The problem wasn't the joystick logic—it was where the events were attached.

I originally listened for movement events only on the joystick element itself. As soon as a player's finger slid outside the element, movement updates stopped.

The fix was attaching move and release events to the document instead.

After making that change, controls became dramatically more reliable across every mobile game on the site.

Keeping Physics Stable on Mobile Devices

Mobile browsers drop frames far more often than desktop browsers.

If physics calculations are tied directly to rendering frames, frame drops can cause objects to clip through walls, floors, or other objects.

To solve this, I switched to a fixed-timestep physics loop using an accumulator.

This keeps simulation updates running at a consistent rate regardless of rendering performance and prevents major physics glitches when frame rates fluctuate.

I also clamp large frame gaps to avoid the infamous "spiral of death" that can occur when a browser tab is backgrounded and then reopened.

The Biggest Lesson

The biggest lesson wasn't technical.

It was that small details matter more than big features.

Players rarely notice a sophisticated collision system.

They absolutely notice laggy controls, long loading screens, or physics that feel inconsistent.

A polished 30-second gameplay experience is often more important than adding another feature.

What's Next

I'm continuing to add new games every week and experimenting with more advanced AI, multiplayer concepts, and larger browser-based experiences.

Everything remains completely free to play.

If you're curious about browser game development, JavaScript game physics, performance optimization, or building games without an engine, I'd be happy to answer questions.

🎮 Play all 40+ games at GamelyByte.com

Source: dev.to

arrow_back Back to Tutorials