How I Built 6 Browser Games With Zero Frameworks

Pure JavaScript + Canvas API + Web Audio API. Single HTML files. No build step.

Why No Framework?

React adds 40KB+ of runtime. For a game running at 60fps, every kilobyte matters. Canvas API gives you direct pixel control. Web Audio API generates sounds without loading files. localStorage handles persistence. That's the entire stack.

The Architecture

Each game is one index.html file containing CSS + HTML + JavaScript. The game loop:

function loop() {
  update();  // physics, collisions, state
  draw();    // render everything to canvas
  requestAnimationFrame(loop);
}

Canvas Rendering at 60fps

The Canvas 2D context handles everything: backgrounds, sprites, particles, UI. For the trading simulator, I render real-time candlestick charts with OHLC data. For tower defense, I draw 25+ enemies with HP bars, projectiles with trails, and particle explosions — all at 60fps.

Sound Without Files

Web Audio API generates sounds programmatically:

function playTone(freq, dur, type, vol) {
  const o = audioCtx.createOscillator();
  const g = audioCtx.createGain();
  o.type = type;  // 'sine', 'square', 'sawtooth'
  o.frequency.value = freq;
  g.gain.value = vol;
  g.gain.exponentialRampToValueAtTime(0.001, 
    audioCtx.currentTime + dur);
  o.connect(g); g.connect(audioCtx.destination);
  o.start(); o.stop(audioCtx.currentTime + dur);
}

Persistence With localStorage

Leaderboards, achievements, daily challenge state, personal bests — all stored in localStorage. No server needed. The daily challenge uses a seeded random number generator so everyone gets the same questions each day (like Wordle).

The Games

Crypto Quiz — 70 questions, daily challenge, streak system
Trading Simulator — 11 coins, candlestick charts, breaking news
Blockchain Tower Defense — 25 waves, 4 tower types, endless mode
Paragliding, Kitesurfing, Skydiving — 7 locations each

Play All 6 Games Free →

Lessons Learned

Single-file simplicity wins. No build step = deploy anywhere (GitHub Pages, itch.io, embed in articles).
Canvas is fast enough. 60fps with 100+ particles, projectiles, and enemies on a 2018 laptop.
Distribution > Building. I spent a month building and 0 people played. Then I posted on dev.to and submitted to game platforms.