I have created my first SVG game, using Raphaël.js.

In Chrome the game feels fast, but in other browser like IE (understandable since it's using VML), Firefox, iPad safari and others, it feels slow at times.

I'm looking for some tips on how I can optimize my code to squeeze out the absolute best performance. I've tried the best I can to optimize it myself, but I'm just a JS beginner. Also feel free to mention if should be using any remended best practices I'm not using. Where is it probable that the bottleneck is?

You can see the code and try the game on jsfiddle.

I have created my first SVG game, using Raphaël.js.

In Chrome the game feels fast, but in other browser like IE (understandable since it's using VML), Firefox, iPad safari and others, it feels slow at times.

I'm looking for some tips on how I can optimize my code to squeeze out the absolute best performance. I've tried the best I can to optimize it myself, but I'm just a JS beginner. Also feel free to mention if should be using any remended best practices I'm not using. Where is it probable that the bottleneck is?

You can see the code and try the game on jsfiddle.

• javascript
• jquery
• svg
• raphael

• Seems not to work in Internet Explorer 8 and the latest Google Chrome. – Andreas Rejbrand Commented Oct 30, 2010 at 18:37
• Try again, think I fixed it, didn't seem to work in Safari either, something wrong with jsfiddle managed resources. – Sindre Sorhus Commented Oct 30, 2010 at 18:49
• One optimization may be to switch to [ex]Canvas ;-) – user166390 Commented Oct 30, 2010 at 21:22
• Having separate speeds for each browser would help. The speed is perfect in Chrome, but it's way too fast in IE. – Peter Ajtai Commented Oct 30, 2010 at 22:15
• Oh, and my previous ments means that I find the game too fast in IE not sluggish at all. ie8 – Peter Ajtai Commented Oct 31, 2010 at 1:48

3 Answers 3

reduce method calls

var left1 = a.attr('x'),
left2 = b.attr('x'),
right1 = a.attr('x') + a.attr('width'),
right2 = b.attr('x') + b.attr('width'),
top1 = a.attr('y'),
top2 = b.attr('y'),
bottom1 = a.attr('y') + a.attr('height'),
bottom2 = b.attr('y') + b.attr('height');

Could be optimized like so:

var left1 = a.attr('x'),
left2 = b.attr('x'),
right1 = left1 + a.attr('width'),
right2 = left2 + b.attr('width'),
top1 = a.attr('y'),
top2 = b.attr('y'),
bottom1 = top1 + a.attr('height'),
bottom2 = top2 + b.attr('height');

This saves you 4 method calls per hitDetection call. Same applies to wallDetection and probably other functions as well. In fact, I also believe you width and height calls can be removed and just cached through a closure, since those are pretty static after creation, see next example.

Also with the next bit:

var animateEnemies = function(enemy) {
    var enemyWidth = enemy.attr('width'),
    enemyHeight = enemy.attr('height'),
...

You set the width and height of the enemies once, so they seem pretty constant, you could remove the .attr() lookup and pass the width and height from the createEnemies call as well.

var animateEnemies = function(enemy , enemyWidth , enemyHeight) {
    var animationDuration = getRandomInt(1000, 3000) / difficulty;
    enemy.animate({
        x: getRandomInt(0, gameWidth - enemyWidth),
        y: getRandomInt(0, gameHeight - enemyHeight)
    }, animationDuration, "ease-in-out");
    // use setTimout instead of onAnimation callback, since it gave "too much recursion" in Firefox 3.6
    this.timeOut = setTimeout(function() {
        animateEnemies(enemy , enemyWidth , enemyHeight);
    }, animationDuration);
};

Reducing function calls and caching variables can help a lot in legacy browsers, other then that, code looks pretty neat.

I don't want to sound distressingly, but i doubt IE can do any better. As you can see I made a stripped down version consisting only the animations (no hit detection, game logic or mousemove handler) and the speed is still unacceptable.

For Firefox I think I found out how to avoid sluggishness:

var mouseMove = function(e) {

    // only do this if there's at least 20ms diff.
    var now = +new Date();
    if (now - mouseMove.last < 20)
        return;
    else 
       mouseMove.last = now;

    // ...
};

mouseMove.last = +new Date();   

Minimize the number of DOM calls.