Оптимизация HTML5 холста

Прямо сейчас у меня есть две игровые петли в игре, которую я делаю. Цикл рисования, который проходит через массив объектов на экране, и логический цикл, который выполняет игровую логику. У меня логический цикл работает примерно на 10 кадров больше, чем цикл рисования. Я настроил это так, потому что выполнение игровой логики может занять больше времени, и я не хочу, чтобы это мешало циклу прорисовки.

У меня логический цикл настроен так:

vs.logicloop = function(){
    vs.Gameloop();
    //do the updating of object scripts
    if(vs.windowActive){
        var l = vs.scenegraph.length;
        var i = 0;
        while(i < l){
            vs.scenegraph[i].logicScript();
            i++;
        }
    }
    //restart loop
    setTimeout(vs.logicloop, 1000/(vs.fps+10));
};

и цикл рисования, как это:

vs.drawloop = function(){
    //clear the screen
    vsd.clr();
    //goes through everything in the scene
    //graph and draws it and runs each object's
    //personal draw code
    if(vs.windowActive){
        var l = vs.scenegraph.length;
        var i = 0;
        while(i < l){
            vs.ctx.save();
            vs.scenegraph[i].update();
            vs.scenegraph[i].draw();
            vs.scenegraph[i].drawScript();
            vs.ctx.restore();
            i++;
        }
    }
    //restart loop
    setTimeout(vs.drawloop, 1000/vs.fps);
};

Я использую setTimeout, потому что я слышал, что setInterval приведет к перекрытию циклов, если они еще не завершены.Могу ли я сделать какие-либо оптимизации, чтобы действительно набрать скорость? Особенно оптимизирует игровые циклы.

Я слышал о некоторых движках javascript, выводящих тысячи объектов на экран одновременно. Я не могу себе представить, как они это делают, в большинстве своем мои могут получить до 100 объектов на экране на очень старом компьютере и около 700 на компьютере с достаточным запасом. И это без большого количества игрового кода, работающего в фоновом режиме, и прежде чем я решил, как сделать пиксельное обнаружение столкновений и физику.

Мой процесс - рисовать цвет фона fillRect поверх холста в каждом цикле рисования, а затем перебирать все объекты и рисовать их код рисования. Также он не пытается рисовать объекты вне поля зрения.

Это моя первая оплачиваемая работа, и я очень хочу произвести впечатление. Кроме того, я могу сохранить право собственности на движок, как только закончу с игрой.

Большое спасибо

Ответы на вопрос(4)

Ваш ответ на вопрос