Tutorials
Subscribe via RSSHands-on guides for building web games. Each tutorial is self-contained with copy-paste code.
Getting Started
Canvas 2D game loop fundamentals Build a frame-rate-independent game loop with requestAnimationFrame, delta time, and a fixed timestep, plus sprites, collisions, and a camera. Read more →
WebGL fundamentals for game developers Learn raw WebGL 2 by drawing your first triangle with GLSL shaders, buffers, textures, and a render loop. Read more →
WebGPU getting started Set up a WebGPU device, configure the canvas, write WGSL shaders, and render your first triangle with the modern GPU API. Read more →
Physics
Game physics for web games Compare Rapier, Cannon-es, Ammo.js, Matter.js, and more with real code so you pick the right physics engine for your game. Read more →
Input & Controls
Game input handling (keyboard, mouse, touch, gamepad) Unify keyboard, mouse, touch, and gamepad behind one input-state object your game loop reads every frame. Read more →
Gamepad API for web games Add console-quality controller support with button mapping, analog deadzones, rumble, and local multiplayer for up to four players. Read more →
Pointer Lock for FPS games Capture the mouse for smooth FPS look, then build a yaw/pitch camera, WASD movement, and raw unaccelerated aim. Read more →
Graphics & Rendering
Responsive game canvas Scale your canvas sharp on Retina with devicePixelRatio, letterboxing, integer pixel-art scaling, and jank-free resize handling. Read more →
Pixel art rendering Kill the blur with integer scaling and disabled smoothing, then do sprite animation, palette swaps, tilemaps, and screen shake. Read more →
Text rendering in games Draw crisp game text with Canvas fills, bitmap fonts, and SDF, plus typewriter dialogue boxes and floating damage numbers. Read more →
Audio
Web Audio API for games Wire up the Web Audio API for game sound with a reusable sound manager, looping music, 3D spatial panning, and sound pooling. Read more →
Tone.js for game audio Generate game sound effects and reactive music with Tone.js synths so you skip audio files and vary every play. Read more →
Data & Storage
Save and load with IndexedDB Store save slots, settings, and binary assets in IndexedDB with async patterns, autosave, and persistent storage that resists eviction. Read more →
Streaming asset loading Load game assets in priority tiers with real progress bars, a concurrency queue, and IndexedDB caching so players start fast. Read more →
Performance & Optimization
Ship a web game that loads fast A practical checklist covering load budgets, Brotli and Zstandard compression, KTX2 textures, code splitting, and caching. Read more →
Web Workers for game logic Run physics, A* pathfinding, and procedural gen in a background thread using worker pools, transferables, and OffscreenCanvas. Read more →
Enable Wasm threads (SharedArrayBuffer) Set the COOP and COEP headers that turn on cross-origin isolation so SharedArrayBuffer and Wasm threads actually work. Read more →
Networking
WebSocket multiplayer basics Wire up real-time multiplayer with reconnects, client-side prediction, snapshot interpolation, and binary messages over an authoritative server. Read more →
Mobile & Platform
Mobile-friendly web games Add touch controls, a virtual joystick, viewport and orientation handling, and battery-aware performance so your game plays great on phones. Read more →
PWA for offline games Make your game installable and playable offline with a manifest, service worker caching, update prompts, and background score sync. Read more →
Service workers for game caching Cache game assets with cache-first, network-first, and stale-while-revalidate strategies, plus versioning and range requests for audio. Read more →
Iframe embedding best practices Embed your game cleanly in iframes with the right permissions, postMessage to the parent, fullscreen, focus fixes, and platform SDKs. Read more →
VR/XR
WebXR basics for VR games Set up a WebXR VR session, render per eye, read controllers, and add teleport and smooth locomotion that work on hand and gaze headsets. Read more →
Analytics & Monitoring
Analytics for web games Build a batched event tracker for sessions, level funnels, FPS, errors, A/B tests, and consent-gated privacy. Read more →
Tools & Workflow
Agentic AI code tools Compare Claude Code, Cursor, and Copilot, then learn plan-mode workflows, approval gates, and prompts that get agents to edit and test real code. Read more →