Put game logic into same or separate loop than renderer?

[warpdesign]

Hi,

 

I'm working on a simple 2D platform game. Right now, I have two loops:

 

 - the renderer loop that's using requestAnimationFrame

 - the game logic that handles objects move, collisions, etc.. into a separate loop (that's now using setTimeout)

 

I'm wondering if this is the proper way to do it. I did it this way so that if the computer can't animate my app with 60fps, game is still responsive.

[alex_h]

Yep, that is a common approach. It's certainly the way I set up my stuff and also the way I have seen many other people working too.

[samlancashire]

Yes, separate is the usual approach. I usually do something like:

function update(mod) {   //do logic!}		function render() {    requestAnimationFrame(render);    if (eng.loadedImages == eng.imageCount) { //if all images have are loaded...        //draw stuff!    }}		function tick() {    update((Date.now() - lastTick) / 1000);    lastTick = Date.now();}		var lastTick = Date.now();setInterval(tick, 16.67); //60fpsrender();

Also some quick reading: http://stackoverflow.com/questions/729921/settimeout-or-setinterval