Answers for developers, publishers and site owners on monetizing and distributing web games.
336 posts
Listen for the visibilitychange event (state 'hidden') and the pagehide event, then run your save function immediately and synchronously. Do not rely on beforeunload for mobile browsers. Save to storage that survives tab closure, not sessionStorage, and keep the write small and fast.
Use localStorage for small synchronous flags (settings, a single save slug) under a few hundred KB. Switch to IndexedDB when you store larger structured data, binary assets, many records, or need async, non-blocking reads and writes - for example level data, asset caches or multiple save slots.
For a browser game, use the Web Storage API (localStorage) for small key-value saves or IndexedDB for larger structured data. If the game runs on multiple platforms, route saves through a storage abstraction so the same code can write to a platform's cloud save instead of only the browser.
Reduce draw calls by batching sprites/meshes that share a material, packing textures into atlases so fewer bind calls happen, sorting the render queue by texture/shader before draw order, and avoiding per-object uniform or texture switches inside the render loop.
Load a minimal boot bundle first (menu, first-level assets), then fetch remaining scenes, textures and audio in the background using dynamic imports and an asset manifest. Split code by scene/route, defer non-critical JS, and preload the next level while the player is on the current one.
Open DevTools > Performance, record while the game runs, then read the flame chart for long tasks, scripting vs rendering vs painting time, and dropped frames. Fix the largest bar first, re-record, and repeat. Use Memory and Rendering panels for leaks and paint issues.
Cap the device pixel ratio, batch draw calls, keep textures power-of-two and compressed, avoid per-frame allocations, and use WebGL rather than full 2D canvas redraws for anything animated. Test on real mid-tier phones, not desktop dev tools.
Use Pointer Events (pointerdown/move/up) on a fixed-position overlay layer, track a base and knob element for the joystick, normalize the drag vector, and only render the controls when you detect a touch or mobile device so desktop users keep keyboard/mouse input.
Listen for visibilitychange (or the platform SDK's pause event) and toggle a single isPaused flag that stops your update loop, timers and audio, then resumes them on visible/resume. Audio needs an explicit resume call because browsers don't restart it automatically.
Set the canvas's CSS size to fill its container, then set its actual width/height (backing store) to CSS size times devicePixelRatio for sharpness. Listen for resize and orientationchange, recompute a scale factor, and rescale your game's internal coordinate system on every change.