Design video games with Grok Build

Grok Build can ship real browser games: Canvas 2D, Phaser, three.js / React Three Fiber, physics, audio, saves, and mobile touch controls. The failure mode is a pretty screenshot that does not play. This chapter is about avoiding that.

Pick a stack on purpose

Game design prompt that works

Build a single-player top-down twin-stick shooter in the browser.

Core loop: wave-based enemies, dash cooldown, 3 weapons.
Controls: WASD move, mouse aim/shoot, Space dash. A=left D=right verified.
Mobile: virtual joystick + fire button, 44px targets.
Art: generate 2D sprite sheets (not stick figures), magenta-key pipeline ok.
Feel: screen shake, hit-stop, particles. Audio unlock on first tap.
Meta: local high score save. Pause menu. Start screen.
Done criteria: playable 2 minutes, no console errors, works at 390px width.

Non-negotiable engineering rules

1. Game loop & delta time

• Drive with requestAnimationFrame / engine RAF — neversetInterval for simulation.
• Scale movement by delta seconds; cap delta so tab-blur does not teleport.
• Fixed timestep for physics when needed.

2. Controls (A = left)

Inverted steering is the #1 ship-blocker. Explicitly require: A strafes/turns left, D right from the camera the player sees. For vehicles, test while moving forward with chase cam.

After implementing movement, verify:
- KeyA moves/steers left from chase camera while moving forward
- KeyD moves/steers right
- Pointer lock click-to-play works
- Touch controls do not scroll the page (touch-action: none)
Do not mark done on screenshot alone.

3. 3D orientation

• three.js is right-handed, +Y up; cameras look −Z; meshes face +Z.
• Do not use flat AI photos as 3D viewmodels — build real geometry/glTF.
• Characters must stand upright on the ground plane.

Art pipelines (the cool stuff)

• 2D sprites / animation sheets — generate sheets with solid magenta #FF00FF backgrounds for chroma keying; walk / attack / death cycles.
• Maps & prop packs — foundation layer + separate props + collision; better than one baked screenshot map.
• Character consistency — one base sprite sheet; variants via edit chain (damage, palette, equipment).
• Video→sprite (optional) — denser motion via short video then frame extract; prefer crisp sprite sheets for heroes.

Game feel (juice)

Cheap effects that make a prototype feel 10× better:

• Hit-stop (2–4 frames) on heavy impacts
• Screen shake with trauma decay
• Muzzle flashes / impact particles (pooled)
• Audio one-shots with pitch variance
• Land squash/stretch on platformers
• Damage numbers with brief rise + fade

Genre-specific power prompts

Build an FPS arena prototype: pointer lock, WASD, jump, weapon sway viewmodel
built from 3D meshes (not a photo), enemy AI with cover, ammo pickups,
minimap. Verify mouse look and movement axes independently.

Local kart racer: 3 laps, rubber-band AI, drift boost, item boxes.
Chase camera. A = left turn while moving forward (self-test required).
Mobile steering buttons + accelerate.

Minecraft-like creative mode: chunked voxels, break/place, hotbar,
day/night light, first-person. Prioritize 60fps via meshing + greedy
mesh if needed. Touch: look + place/break buttons.

Mobile is part of design

• Separate canvas buffer size from CSS size; respect devicePixelRatio.
• Virtual joystick + action buttons; prevent browser gestures.
• Readable HUD over bright scenes (backdrop, contrast).

Save & audio

• Persist with localStorage / IndexedDB + version field.
• Unlock AudioContext on first user gesture; re-resume on visibility change (iOS silence trap).

CLI vs web for games

Definition of done

1. Visible gameplay, not a blank canvas
2. Controls self-test passed
3. No console errors
4. Mobile playable
5. Production build still runs
6. Start / pause / game-over flows exist