{"id":14500,"date":"2026-09-24T10:31:18","date_gmt":"2026-09-24T10:31:18","guid":{"rendered":"https:\/\/playgama.com\/blog\/?p=14500"},"modified":"2026-09-24T10:31:18","modified_gmt":"2026-09-24T10:31:18","slug":"how-does-a-standard-javascript-game-loop-work-with-requestan","status":"publish","type":"post","link":"https:\/\/playgama.com\/blog\/business-faqs\/how-does-a-standard-javascript-game-loop-work-with-requestan\/","title":{"rendered":"How does a standard JavaScript game loop work with requestAnimationFrame?"},"content":{"rendered":"

A standard JavaScript game loop works by calling requestAnimationFrame recursively: the browser supplies a high-resolution timestamp to the callback, which calculates deltaTime, updates game physics and logic scaled by that interval, renders the frame, and requests the next tick. This pattern synchronizes updates with the display refresh rate while preventing animation drift.<\/strong><\/p>\n

At a glance<\/h2>\n\n\n\n\n\n\n\n
Fact<\/th>\nValue<\/th>\nSource<\/th>\n<\/tr>\n<\/thead>\n
requestAnimationFrame callback receives<\/td>\na timestamp argument<\/td>\ndeveloper.mozilla.org<\/a><\/td>\n<\/tr>\n
loop must re-call itself each frame<\/td>\nrecursive rAF call<\/td>\n<\/td>\n<\/tr>\n
engines exporting to web include<\/td>\nUnity, Godot, Construct 3<\/td>\ndeveloper.mozilla.org<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

The core pattern: call requestAnimationFrame(loop)<\/code> once to start, and inside loop<\/code> update game state, render, then call requestAnimationFrame(loop)<\/code> again so the browser schedules the next frame. Use the timestamp argument to compute deltaTime<\/code> so movement and physics scale correctly regardless of frame rate:<\/p>\n

let last = 0;\nfunction loop(timestamp) {\n const dt = (timestamp - last) \/ 1000;\n last = timestamp;\n update(dt);\n render();\n requestAnimationFrame(loop);\n}\nrequestAnimationFrame(loop);<\/code><\/pre>\n
When monetizing your browser game, Playgama Ad<\/a> connects one SDK to 11 demand partners, including Google Ad Manager. If you distribute across web platforms, Playgama Bridge adapts one HTML5 build to 25+ platforms.<\/p>\n
MDN’s overview of the anatomy of a video game<\/a> covers how the main loop fits together with input, physics and rendering. If you draw with Canvas, see the Canvas API<\/a> docs; for 3D, WebGL<\/a>.<\/p>\n
What about engines that compile to the web?<\/h2>\n
If you build in Unity, the engine runs its own internal loop compiled to WebGL, and you only reach into browser JavaScript through a .jslib plugin<\/a>. Godot 4 exposes the browser the same way through its JavaScriptBridge<\/code> singleton. In both cases you rarely write a raw rAF loop yourself – the engine already owns it.<\/p>\n
Sources<\/h2>\n