Kart Racer: One Saturday

A browser-based kart racing game, built from scratch in a single Saturday. Started at 13:35 with an empty folder, ended just before midnight with a playable multiplayer-ready racer featuring AI opponents, power-ups, a map editor, and a sprite generator. ~167 messages across 21 sessions, 8 project folders.

The snapshots folder contains project snapshots at five milestones through the day. They were reconstructed by replaying file writes and edits from the chat logs on top of the nearest git commit — so some config files and minor edits may be missing or slightly off, but the source code demonstrates the state of the project at each point.

13:35 — Two projects at once

It started with two parallel Claude sessions. One built the game engine — Three.js, Vite, a ground mesh with hills, and a billboard-sprite kart with keyboard controls. The other built a sprite generator tool for rendering 3D kart models into 2D sprite sheets from 16 directions.

The game session focused on getting core movement right — gravity tuning, slope physics, shadow rendering. The vel.y bug was a highlight: gravity was being overwritten every frame because vel.copy(forward) zeroed the Y component in physics.js. Once fixed, karts actually flew off ramps with proper parabolic arcs. A debug graph was added to visualize vel.y and pos.y in real time.

The debug graph at 14:13 — red line is vel.y (linear decrease = gravity working), blue is pos.y (parabolic arc = correct jump trajectory).

Meanwhile, kart-gen became a full tool — orthographic camera, 8-direction live preview strip, nearest-neighbor chunky textures on the wonky-kart and firetruck, and an export system that saves sprite sheets to disk via a Vite dev server plugin. The game loaded the sprites and selected the correct directional frame based on camera angle, with turning variants when steering.

The kart-gen tool — 3D model with steering controls, export buttons, and the 8-direction preview strip at the bottom.

Exported spritesheet — the wonky kart rendered from all 16 directions.

Project at 15:00 — 35 files across 3 folders: game/src (9 files), kart-gen/src, map-editor/src

15:14 — Project consolidation & maps

The scattered project folders got merged under a single kart/ umbrella. A map editor was built from scratch — a dark-themed 2D canvas tool (editor.ts) with terrain painting (tools.ts), height brushes, and a file-based save/load API through a Vite plugin.

A separate session wired the game to read map files via a new map-loader.js and menu.js for level select, terrain-based speed penalties (offroad slowdown), and removing the hardcoded oval track.

Driving the track with the debug overlay — billboard sprite kart on a heightmap terrain with offroad/road distinction.

16:00 — CTR-style power sliding

Steering got a complete overhaul in physics.js — the old indirect "steering wheel" model (input accumulates steerAngle, steerAngle drives rotation) was replaced with direct turn rate. Then the big feature: Crash Team Racing-style power slides with a timing-based boost meter.

The implementation used Z/X keys as dual hop buttons (tap to hop, hold through landing to slide, tap the opposite key in the sweet spot to charge boosts). Camera Y-damping was added to camera.js so hops didn't jerk the view, and the kart got a visual rotation offset during slides.

Project at 16:40 — 37 files. New: gamepad-test/

16:44 — Debugging and controllers

The boost system worked in theory but was hard to trigger — turned out the keyboard had ghosting issues that prevented pressing 3 keys simultaneously. Solution: build a gamepad test tool, map a PS/Xbox-style controller, and integrate it into input.js.

The gamepad test tool — built to diagnose which raw button indices mapped to what on the controller.

18:30 — Bot AI & the race system

With a detailed plan in place, the race system came together in one session — five new files added to game/src:

• bot-input.js — AI steering toward checkpoints, throttle control, stuck recovery
• race.js — lap counting, checkpoint lookahead, finish-line crossing detection
• kart-collision.js — kart-to-kart bumping
• start-line.js — terrain-conforming checkerboard decal
• hud.js — position display, minimap, boost meter, finish screen

The finish line alone needed several iterations — it started as an infinite-width crossing detector, then got bounded to match the visual decal, then the crossing direction check turned out to be inverted. Boost pads and a reusable ground-decal.js system were added to both the editor and game.

Level select, race start with checkerboard finish line and bot opponents, and racing in 4th with the minimap and position HUD.

Project at 19:00 — 44 files. game/src grew from 9 to 16 files

20:00 — Items and combat

The item system landed across two sessions, touching 11 files between the game and editor. Floating item boxes (with shadows, bob animation, respawn timers) give random power-ups: speed boosts, TNT bombs you drop behind you, and homing missiles with a 120° forward cone.

Floating item boxes with shadows along the track, and skid marks left behind from a power slide with a green boost pad ahead.

Visual polish in the same sessions: black skid marks from power-sliding tires (4 strips per kart, sliding-window buffer geometry), boost flames, and a full shadow system overhaul — flat sprites were replaced with subdivided mesh planes that conform to terrain height, fixing the persistent z-fighting and clipping issues. Physics got separated from visuals to prepare for multiplayer.

Project at 21:30 — 52 files. game/src grew to 22 files: +item-boxes, tnt, missile, skid-marks, boost-visual, kart-visuals

21:30 — Map editor upgrades

The map editor session added a Three.js 3D preview panel (floating box in the corner, orbit controls), custom per-terrain-type color pickers, and a full per-pixel color painting layer with its own brush. The height brush got a redesign — instead of just raise/lower, it now paints toward a target height value with a slider.

The map editor showing the "tooth" track — terrain types, numbered checkpoints, boost pads, item box positions, start line, and the 3D preview in the corner.

22:00 — Multiplayer & late-night push

Then the multiplayer push started. A whole server/ appeared — index.js, room.js, lobby.js — plus server-side versions of the game systems (items, TNT, missiles).

The client got a net/ folder with connection, client prediction, interpolation, and a lobby UI. The session ended just before midnight struggling with camera jitter from state reconciliation.

In parallel, a decal system session added the ability to stamp, rotate, and scale decorative elements onto the map through the editor.

Final state — 71 files. game/src: 29 files. New: server/ (9 files), game/src/net/ (5 files), game_decals/

What got built

In about 10 hours, from empty folder to 71 files:

• Game engine — Three.js, heightmap terrain, billboard sprites, analytical ground height (no raycasting)
• Driving physics — acceleration, steering, gravity, slope effects, offroad penalties, wall collision
• CTR-style power slides — hop, slide, timing-based boost meter with 3 charge levels
• Sprite generator — 3D models to 16-direction sprite sheets with turning variants
• Map editor — terrain painting, height brushes, color layer, checkpoints, boost pads, item boxes, 3D preview, decals
• Race system — laps, checkpoints, finish line, position tracking, results screen
• Bot AI — checkpoint following, throttle control, stuck recovery, item use
• Items — item boxes, speed boosts, TNT bombs, homing missiles
• Visual effects — skid marks, boost flames, terrain-conforming shadows
• Gamepad support — custom button mapping
• Multiplayer prototype — WebSocket server, client prediction, state reconciliation