HTML5/자바 스크립트에서 충돌 감지 성능 향상

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

나는이 질문에 대한 답을 게시하고 싶습니다. 비슷한 문제가 발생했을 때. 다른 시간대에 게임의 간격이 벌어지기 때문에 requestFrameAnimation을 사용하여 Canvas 요소 내부에서 게임을 재구성했습니다. 이렇게하면 모든 요소가 한 번에 다시로드됩니다.

이미지가 제대로로드되지 않아서 처음에는 캔버스 사용을 피하는 이유가 있었지만 이미지를 프리 로딩하고 이미지를 화면 밖으로 숨겨진 별도 캔버스로 렌더링하는 데 도움이되었습니다. 태클을 할 수있었습니다. 이 문제들.