title: collision detection on multiple canvas layers
body: <p>I am struggling on figuring out how to detect collisions on assets drawn on different canvas layers. I have made two arrays that hold the stuff I want to "collide" with called collidable_objects_layer1 and collidable_objects_layer2. These arrays basically draw the tables and the wall in the back which the character should not be able to pass through.</p>
  
  <p>bar.js basically holds the whole bar "scene" you see in the link below. and main.js is the loop that makes my player move. I think my architecture is all messed up cause I don't see an easy way to tie these two together so any advice on that(are modules necessary here or are they just hurting me?). the way it is now I am not sure how I add more "scenes" with different collision testing.</p>
  
  <p>I'm assuming the collision testing happens in the main loop</p>
  
  <pre><code>function main() {
      var now = Date.now();
      var dt = (now - last_time) / 1000.0;
  
      clearCanvas();
      drawCharacter();
      frame++;
      last_time = now;
      requestAnimFrame(main);
  }
  </code></pre>
  
  <p><strong>so a couple questions really, what would the algorithm(psuedocode) look like to have my player detect these collidable objects in bar.js. second, is my architecture appropriate to handle multiple scenes, for example, once the player leaves the "bar" to "outside" (outside.js) how can I handle that transition so my player can detect objects regardless of its "scene". I was thinking I end up with a Scene class or something, I am not sure.</strong></p>
  
  <p>thanks in advance. find the plunk link <a href="https://plnkr.co/edit/YHVUkKHk2IXZu9WC5TW2" rel="nofollow">here</a></p>