Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

I'm currently working on a 2d sidescrolling game prototype in HTML5 canvas. My implementations so far include a sprite, vector, loop and ticker class/object.

Which can be viewed here: http://elias-schuett.de/apps/_experiments/2d_ssg/js/

So my game essentially works well on todays lowspec PC's and laptops.

But it does not on an older win xp machine I own and on my Android 2.3 device. I tend to get ~10 FPS with these devices which results in a too high delta value, which than automaticly gets fixed to 1.0 which results in a slow loop.

Now I know for a fact that there is a way to implement a super smooth 60 or 30 FPS loop on both devices. Best example would be: http://playbiolab.com/

I don't need all the chunk and debugging technology impact.js offers. I could even write a super simple game where you just control a damn square and it still wouldn't run on a equally fast 30 or 60 fps.

Here is the Loop class/object I'm using. It requires a requestAnimationFrame unify function. Both devices I've tested my game on support requestAnimationFrame, so there is no interval fallback.

var Loop = function(callback) {
    this.fps = null;
    this.delta = 1;
    this.lastTime = +new Date;
    this.callback = callback;
    this.request = null;

Loop.prototype.start = function() {

    var _this = this;
    this.request = requestAnimationFrame(function(now) {
        _this.delta = (now - _this.lastTime);
        _this.fps = 1000/_this.delta;
        _this.delta = _this.delta / (1000/60) > 2 ? 1 : _this.delta / (1000/60);
        _this.lastTime = now;

Loop.prototype.stop = function() { cancelAnimationFrame(this.request); };
share|improve this question

closed as too localized by Tetrad Jan 2 '13 at 5:22

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.If this question can be reworded to fit the rules in the help center, please edit the question.

If a program runs too slowly, it's usually what you are doing in the periodic update that is the problem, not the code you are using to schedule those updates. –  Kylotan Sep 23 '12 at 0:38
No, have a look at this version: elias-schuett.de/apps/_experiments/2d_ssg_test I removed vectors, sprites, collision, objects, and canvas clearing. It's still super slow on my android. All it does is draw the player get user inputs and calculate some super cheap gravity on the y axis. –  Elias Schütt Sep 23 '12 at 9:27
I think I figured it out. It laggs due to my ctx.drawImage(buffer, 0, 0); Although I read that creating a buffer is supposed to be more efficient.. –  Elias Schütt Sep 23 '12 at 9:52
@elias94xx You should add this as an answer and accept it. –  Laurent Couvidou Sep 23 '12 at 11:46
@laurent Once I found a solution on how to properly clear areas on the canvas while preserving multiple layers I'll consider writing an answer. –  Elias Schütt Sep 26 '12 at 9:34

Browse other questions tagged or ask your own question.