Улучшение производительности обнаружения столкновений в HTML5/Javascript

Question

В настоящее время я создаю игру, в которой используются монеты, которые выходят из нижней части экрана в случайной позиции X. Если герой перекрывает/сталкивается с монетами, пользователь получает точку.

Моя проблема в том, что когда я обнаружил свое обнаружение столкновений в функции быстрого интервала, кажется, что столкновение не регистрируется в некоторых случаях.

Я копировал игру в ниже jsfiddle (первоначально он использует акселерометр телефона, чтобы переместить героя, но для этого примера я быстро сделал это контроль левый/правый ключ на основе) - http://jsfiddle.net/wpavxn6k/1/

отрывок из интервала ниже -

//keep checking to see if collision has occured 
window.setInterval(function() { 
    if (hitTest(app.hero, app.coinClassUnique) == true) { 
     app.coinClassUnique.css('display', 'none'); 
     app.score++; 
     $("h2").html(app.score); 
    } 
}, 5); 

//measure the width/height and position of the coin div and the hero image to determine if they are overlapping 

function hitTest(a, b) { 
    var aPos = a.offset(); 
    var bPos = b.offset(); 

    var aLeft = aPos.left; 
    var aRight = aPos.left + a.width(); 
    var aTop = aPos.top; 
    var aBottom = aPos.top + a.height(); 

    var bLeft = bPos.left; 
    var bRight = bPos.left + b.width(); 
    var bTop = bPos.top; 
    var bBottom = bPos.top + b.height(); 

    return !(bLeft > aRight || bRight < aLeft || bTop > aBottom || bBottom < aTop); 
} 

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

Answer 1

Я просто хотел опубликовать ответ на этот вопрос, если кто-то столкнется с подобной проблемой. Интервал игры происходил в разное время, поэтому я перестроил игру внутри элемента Canvas с помощью requestFrameAnimation. Таким образом, все элементы перезагружаются сразу.

У меня возникли некоторые проблемы, такие как изображения, которые не загружаются должным образом и т. Д., Поэтому я избегал использовать холст, но с помощью предварительной загрузки и рендеринга изображений на отдельные холсты, скрытые от экрана - я смог справиться эти проблемы.