Изменения в холсте FPS при изменении экрана - Javascript

Question

так что я создаю простую систему частиц, и я хотел быть отзывчивым к каждому экрану. Я использую сценарий изменения размера в orther для добавления canvas к всему браузеру.

проблема заключается в том, что при изменении размера экрана fps становится все выше и выше, и частицы падают очень быстро, я не знаю, в чем проблема!

http://jsfiddle.net/gikdew/J6vLg/5/

function initialize() { 
    // Register an event listener to 
    // call the resizeCanvas() function each time 
    // the window is resized. 
    window.addEventListener('resize', resizeCanvas, false); 

    // Draw canvas border for the first time. 
    resizeCanvas(); 
} 

function resizeCanvas() { 

    canvas.width = window.innerWidth; 
    canvas.height = window.innerHeight; 
    game(); 
} 


function game() { 
    var tick = 0; 

window.requestAnimFrame = (function(){ 
     return window.requestAnimationFrame  || 
       window.webkitRequestAnimationFrame || 
       window.mozRequestAnimationFrame || 
       window.oRequestAnimationFrame  || 
       window.msRequestAnimationFrame  || 
       function(/* function */ callback, /* DOMElement */ element){ 
       window.setTimeout(callback, 1000/fps); 
       }; 
    })(); 

    (function animloop(){ 
     requestAnimFrame(animloop); 
     createParticles(); 
     updateParticles(); 
     killParticles(); 
     drawParticles();  

})(); 
    animloop(); 

Answer 1

Это потому, что вы начинаете новый цикл внутри game() каждый раз, когда вы изменить размер. Поскольку rAF является асинхронным, вызовы будут накапливаться, каждый из которых влияет на переменные, которые вы используете.

Если держать петлю снаружи вы должны быть хорошо (вы также можете использовать флаг, чтобы предотвратить несколько прогонов):

/// this should in global scope: 
window.requestAnimFrame = (function(){ 
     return window.requestAnimationFrame  || 
       window.webkitRequestAnimationFrame || 
       window.mozRequestAnimationFrame || 
       window.oRequestAnimationFrame  || 
       window.msRequestAnimationFrame  || 
       function(/* function */ callback, /* DOMElement */ element){ 
       window.setTimeout(callback, 1000/fps); 
       }; 
    })(); 

А потом главный код:

var isRunning = false; 

/// do needed stuff here 
function game() { 
    var tick = 0; 
} 

/// call manually the first time before loop starts 
game(); 

/// run loop 
(function animloop(){ 
    requestAnimFrame(animloop); 
    createParticles(); 
    updateParticles(); 
    killParticles(); 
    drawParticles();  

})();