Optimiser le jeu SVG

Question

J'ai créé mon premier jeu SVG en utilisant Raphaël.js.

Dans Chrome le jeu se sent rapide, mais dans d'autres navigateur comme IE (compréhensible car il utilise VML), Firefox, iPad safari et autres, il se sent parfois lent.

Je suis à la recherche de conseils pour optimiser mon code afin d'obtenir la meilleure performance absolue. J'ai fait de mon mieux pour l'optimiser, mais je ne suis qu'un débutant de JS. N'hésitez pas à mentionner si vous devriez utiliser les meilleures pratiques recommandées que je n'utilise pas. Où est-il probable que le goulot d'étranglement est? Vous pouvez voir le code et essayer le jeu au jsfiddle.

Answer 1

réduire les appels de méthode

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'); 

pourrait être optimisé comme ceci:

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'); 

Cela vous permet d'économiser 4 appels de méthode par hitDetection appel. Il en va de même pour wallDetection et probablement d'autres fonctions. En fait, je crois aussi que les appels de largeur et de hauteur peuvent être supprimés et simplement mis en cache à travers une fermeture, puisque ceux-ci sont assez statiques après la création, voir l'exemple suivant.

également avec le bit suivant:

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

Vous définissez la largeur et la hauteur des ennemis une fois, ils semblent assez constante, vous pouvez supprimer la .attr() recherche et passer la largeur et la hauteur du createEnemies appel ainsi que.

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); 
}; 

La réduction des appels de fonction et les variables de mise en cache peut aider beaucoup dans les navigateurs existants, alors que d'autres, le code semble assez soignée.

Answer 2

Je ne veux pas sonner péniblement, mais je doute que IE peut faire mieux. Comme vous pouvez le voir j'ai fait un consistant seulement les animations (aucune détection de coup, logique de jeu ou gestionnaire mousemove) et la vitesse est toujours inacceptable.

Pour Firefox Je pense que j'ai découvert how pour éviter morosité:

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(); 

Answer 3

Réduire au minimum le nombre d'appels DOM.