# HTML5/JS - Choppy Game Loop

I have been experimenting with HTML5/JS, trying to create a simple game when I hit a wall. My choice of game loop is too choppy to be actually of any use in a game.

I'm trying for a fixed time step loop, rendering only when required. I simply use a requestAnimationFrame to run Game.update which finds the elapsed time since the last update, and calls State.update to update and render the current state.

State.prototype.update = function(ms) {
this.ticks += ms;

this.updateFrameTicks += State.DELTA_TIME;
this.updateFrames++;

if(this.updateFrameTicks >= 1000) {
this.ups = this.updateFrames;
this.updateFrames = 0;
this.updateFrameTicks -= 1000;
}

this.ticks -= State.DELTA_TIME;
}

this.renderFrames++;

if(this.renderFrameTicks >= 1000) {
this.rps = this.renderFrames;
this.renderFrames = 0;
this.renderFrameTicks -= 1000;
}

}

};


But this strategy does not work very well. This is the result: http://jsbin.com/ukosuc/25 (Edit).

As it is apparent, the 'game' has fits of lag, and when you tab out for a long period and come back, the 'game' behaves unexpectedly - updates faster than intended. (EDIT) Thanks to dreta and Vincent Piel, I was able to fix the issue with tabbing out and finding the game to be updating very fast. The problem with the whole thing constantly stuttering and being choppy still persists.

This is either a problem due to something about game loops that I don't quite understand yet, or a problem due to implementation which I can't pinpoint. I haven't been able to solve this problem despite attempting several variations using setTimeout and requestAnimationFrame. (One such example is http://jsbin.com/eyarod/1/edit).

Some help and insight would really be appreciated!

• while i could spend an hour trying to figure out what your code does, the simple fact remains that it's just weird and illogical, here are articles on game loops koonsolo.com/news/dewitters-gameloop gafferongames.com/game-physics/fix-your-timestep – dreta Dec 13 '12 at 17:05
• as for the game speeding up, it will because when you alt tab the timer is still going but the requestAnimationFrame is not called, this means that the next time requestAnimationFrame gets called the time delta is massive and your code is desperately trying to catch up, you have to account for that, but only after you understand and implement a good game loop – dreta Dec 13 '12 at 17:08
• @dreta I have read both these articles, and my implementation was derived from gafferongames' fixed time-step loop. Instead of interpolation, I simply render the state to match the amount of ticks for which it has been updated. But your comment has given me something to think of - getting rid of that chunk of time after tabbing out. Thanks. – Rikonator Dec 13 '12 at 17:30
• well, to be honest, i didn't read all your code, but i'm sure you can do all that much more simply. First thing is that after the player went on another tab, he(she) doesn't expect the game to keep on running (-> player death), but rather to pause (and pause music/sound also), so when the player comes back the game should be just ONE frame later. ( if actualFrameTime > 2*typicalFrameTime actualFrameTime=typicalFrameTime ) – GameAlchemist Dec 13 '12 at 20:24
• I am not seeing any stuttering. When I look at your prototype, the UPS is always 60, and the FPS floats between 58 and 59. I'm using Firefox 17 on Windows 7 64-bit. – tugs Dec 13 '12 at 22:07