Building a Game with Zero Game Libraries — The Architecture Behind CursorCamp Sandbox

dundun sun — Mon, 25 May 2026 03:26:47 +0000

You'd think building a browser game requires a stack of dependencies. Phaser, PixiJS, maybe Three.js. A physics engine, an audio library, a state manager.

CursorCamp Sandbox does none of that. Zero game engines. Zero physics libraries. Just Next.js, TypeScript, raw Canvas 2D, and inline SVG. Under 6,000 lines of hand-rolled code.

Here's how the architecture works.

What Is It?

An interactive fan-made companion for Neal.fun's Cursor Camp. You explore a procedurally-detailed world, collect seashells, kick soccer balls, and share the space with 55 AI campers. Weather changes. Music fades as you move around. Everything runs in the browser at cursorcamp-sandbox.com.

The Stack (Spoiler: It's Empty)

{
  "dependencies": {
    "next": "14.2.0",
    "react": "^18.3.0",
    "react-dom": "^18.3.0"
  }
}

That's it. Every extra dependency — next-sitemap, tailwindcss, postcss, typescript — is either build tooling or a sitemap generator. The runtime ships with Next.js and React only.

No Phaser. No Matter.js. No Howler.js. No Redux. No Framer Motion.

The Dual-Canvas Rendering Pipeline

The most interesting architectural decision: two HTML Canvas elements overlaid on top of each other, separated by z-index, each responsible for a different set of concerns.

Layer 1 (canvasRef)     → terrain, trees, structures, entities, bots
Layer 2 (cursorCanvasRef) → weather particles, cursor pointers, accessories

This avoids globalCompositeOperation tricks and makes the render loop cleaner. Each canvas gets fully cleared and redrawn every frame via requestAnimationFrame. No dirty-rect tracking, no spatial partitioning — just brute-force, draw-everything, every tick.

Between the two canvas layers sit inline React SVG components positioned absolutely over the world. The DJ stage, the lake, the gym equipment, the banner — all rendered as SVG elements with CSS animations (rotating spotlights, rippling water). They share the same viewBox coordinate system as the canvas, so positioning is consistent.

Why SVG for these? Because CSS animations on SVG elements are GPU-accelerated and don't need to be re-drawn in the canvas loop. The DJ's moving-head spotlights rotate with a few lines of CSS @keyframes instead of recalculating angles in JavaScript every frame.

The State Split That Makes It Work

React isn't built for game loops. If you put framerate-critical state into useState, you'll trigger re-renders 60 times per second and kill performance.

The solution: a deliberate split between useRef and useState.

// Game state → useRef (no re-renders)
const camRef    = useRef<Vec2>({ x: 4000, y: 1050 });
const botsRef   = useRef<Bot[]>(createBots(55));
const ballRef   = useRef<Ball>({ pos: FIELD_CENTER, vel: { x: 0, y: 0 } });

// UI state → useState (triggers re-renders for UI updates)
const [shellsCollected, setShellsCollected] = useState(0);
const [notification, setNotification] = useState("");
const [showJournal, setShowJournal] = useState(false);

The game loop reads and mutates refs 60 times per second without touching React's render cycle. Only UI-relevant state — collected shell counts, notification popups, journal visibility — lives in useState and triggers the normal React pipeline.

This is embarrassingly simple compared to ECS (Entity Component System) architectures, but for a single-developer project with ~200 entities, it works perfectly.

The Bot AI State Machine

55 campers wander the map simultaneously. Each one runs a 5-phase movement state machine:

idle → accel → cruise → decel → overshoot → idle (loop)

State	What It Does
idle	Stands still for 1-4 seconds, fidgets slightly, picks a random destination
accel	Eases into movement along a quadratic Bezier curve toward the target
cruise	Moves at full speed with sub-pixel jitter for natural-looking motion
decel	Eases out as it approaches the target
overshoot	If it passes the target, corrects back with a small counter-movement

A couple bots also keep an eye on the soccer ball. If the ball is kicked near them, they enter a chase mode and move toward it. When the ball is idle too long, a random nearby bot kicks it.

The result looks organic — not like pathfinding soldiers, more like actual people wandering a campsite.

Spatial Proximity Audio

The audio system has no external dependencies. It uses raw HTMLAudioElement objects with proximity-based volume:

export function updateDJProximity(distance: number) {
  const vol = Math.max(0, (1 - distance / 600) * 0.5);
  djAudio.volume = vol;
}

Each sound source — DJ booth, campfire, ocean, river, car horn, football — has its own init and update function. The audio elements are created once at startup and their volumes are modulated every frame based on the player's distance to the sound source.

The DJ system is the most complex: a 4-track playlist that auto-advances on the ended event with crossfading. Walk toward the DJ booth, the music fades in. Walk away, it fades out.

Procedural Terrain, Deterministically

An 8,000 × 5,000 pixel world with oceans, rivers, beaches, roads, soccer fields, running tracks, vegetable gardens, and scattered decorations — all generated at runtime from math.

The secret weapon is a hash2d function that takes two integers and returns a deterministic pseudo-random number:

export function hash2d(x: number, y: number): number {
  let h = (x * 374761393 + y * 668265263 + 1274126177) | 0;
  h = ((h >> 13) ^ h) * 1274126177;
  return (h >>> 0) / 4294967296;
}

Every flower, grass tuft, bush, and stone is positioned using this hash. The result looks organic but is completely deterministic — every render produces the same layout. No random seed, no saved state, just math.

Isometric 2.5D Without a 3D Engine

All SVG components use "fake isometric" rendering: explicit 2D coordinates that simulate depth. Building roofs are parallelograms. Shadows are dark ellipses under entities. The DJ stage platform surface is computed using bilinear interpolation. Everything is top-down isometric drawn in pure 2D — no projection matrices, no 3D transforms.

SVG Data URIs as Sprite Sheets

Every game asset — trees, the campfire, houses, the soccer ball, shells — is an inline SVG stored as a data URI in assets.ts. These are loaded into Image objects once at startup, then drawn with ctx.drawImage() in the game loop.

const TREE_ROUND_SVG = "data:image/svg+xml,...";  // 2KB of hand-crafted SVG
const img = new Image();
img.src = TREE_ROUND_SVG;
// Later, in the render loop:
ctx.drawImage(img, x, y, width, height);

This eliminates all external image requests. The entire game loads as a single HTML page with inline assets.

Weather That Works

Rain and snow are particle systems running on the cursor canvas layer. Rain drops are angled streaks with wind variation. Snow particles float with multi-frequency wobble. Splash particles spawn when rain hits the "ground" at the bottom of the viewport.

The weather system transitions on a timer — 50-100 seconds of clear sky, then 25-35 seconds of rain or snow, with a smooth fade transition in between. Wind direction drifts slowly over time using a sine function.

Water Physics

Wading into the ocean or river doesn't just change the visual — it changes how you move. Ocean depth uses a quadratic resistance curve: ankle-deep gives light drag, while 200px deep makes you nearly immovable. The river applies a consistent 85% drag plus directional current force. Diving in triggers a splash sound via edge-triggered audio.

Why This Matters

The takeaway isn't "you should build games without engines." It's that the browser platform is incredibly capable on its own. Canvas 2D, SVG, CSS animations, and the Web Audio API can handle far more than most developers assume — especially when you're one person building something for the love of it.

No build pipeline for sprite sheets. No WebGL shader debugging. No physics engine configuration. Just TypeScript, math, and the raw browser.

If you want to see it in action, it's at cursorcamp-sandbox.com. The source is all there in your browser's dev tools — no minification, no obfuscation, just readable code.

Built with Next.js 14, TypeScript, and precisely zero game libraries.

DEV Community: dundun sun