Оптимизация игры SVG - PullRequest
Новая
       3

Оптимизация игры SVG

2 голосов
/ 30 октября 2010

Я создал свою первую SVG-игру, используя Raphaël.js .

В Chrome игра работает быстро, но в других браузерах, таких как IE (понятно, так как он использует VML), Firefox, iPad safari и других, иногда кажется медленным.

Я ищу несколько советов о том, как я могу оптимизировать свой код, чтобы выжать абсолютную лучшую производительность. Я старался изо всех сил, чтобы оптимизировать это сам, но я только начинающий JS. Также не стесняйтесь упоминать, если вы должны использовать рекомендованные рекомендации, которые я не использую. Где, вероятно, узкое место?

Вы можете увидеть код и попробовать игру на jsfiddle .

Ответы [ 3 ]

3 голосов
/ 31 октября 2010

Я не хочу звучать печально, но я сомневаюсь, что IE может быть лучше. Как вы можете видеть, я сделал урезанную версию , состоящую только из анимации (без обнаружения попаданий, логики игры или обработчика mousemove), а скорость по-прежнему неприемлема.

Для Firefox Мне кажется, я выяснил как , чтобы избежать медлительности: 

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();
3 голосов
/ 31 октября 2010

уменьшить вызовы методов 

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

Можно оптимизировать следующим образом: 

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

Это сэкономит вам 4 вызова методов за hitDetection вызов.То же относится и к wallDetection и, возможно, к другим функциям.На самом деле, я также считаю, что вызовы ширины и высоты можно удалить и просто кэшировать с помощью замыкания, поскольку они довольно статичны после создания, см. Следующий пример.

Также со следующим битом: 

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

Вы устанавливаете ширину и высоту врагов один раз, так что они кажутся довольно постоянными, вы можете удалить поиск .attr() и передать ширину и высоту из вызова createEnemies. 

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

Сокращение вызовов функций и кэширование переменных может сильно помочь в старых браузерах, кроме того, код выглядит довольно аккуратно.

1 голос
/ 27 октября 2011

Минимизируйте количество вызовов DOM.

...