html5 - Collisions in simple javascript game -

i'm writing simple game in javascript , i'm wondering best way handle collisions between player , world objects.

<script>  var isjumping = false; var isfalling = false;  var w = 1; var recwidth = 400; var recheight = 400; var xpos = 50; var ypos = 279; window.onload = function() {     var fps = 30;     var ground = new myobject();     setinterval(function() {         clear();         draw();         ground.draw(0, 325);         ground.draw(125,325)     },     1000/fps); };  function myobject(){      this.draw = function drawground(groundx, groundy){         var canvas = document.getelementbyid('canvas')         var  context = canvas.getcontext('2d');         //context.fillrect(xpos,ypos,100,100);         var img=new image()         img.src="ground.png"         img.onload = function() {          context.drawimage(img,groundx,groundy)}      }  };     function jump() {     var t=.1;     isjumping=true;      var jumpint= setinterval(function() {         yup = 12*t-(5*t*t);         ypos= ypos - yup;         t = t + .1         if(yup < 0)         {             isjumping = false;             isfalling = true;             clearinterval(jumpint);             jumpint = 0;             fall();             return;         }      }, 20);  }  function fall() {     t=.10     var fallint= setinterval(function() {         ydown = (5*t*t);         ypos= ypos + ydown;         t = t + .1         if(ypos > 275)         {             isfalling == false;             clearinterval(fallint);             fallint = 0;             return;         }      }, 20);  }    function changex(x){     xpos = xpos + (x);     //clear();     //draw(); } function changey(y){     ypos = ypos + (y);     //clear();     //draw(); }    function draw(){     var canvas = document.getelementbyid('canvas')     var  context = canvas.getcontext('2d');      var img=new image()     img.src="character.png"     img.onload = function() {          context.drawimage(img,xpos,ypos)}  }  function clear(){     var canvas = document.getelementbyid('canvas')     var  context = canvas.getcontext('2d');     context.clearrect(0,0, canvas.width, canvas.height); }   document.onkeydown = function(event) {     var keycode;       if(event == null)     {         keycode = window.event.keycode;      }     else      {          keycode = event.keycode;      }      switch(keycode)     {     // left      case 37:         //left         changex(-5);         break;       //      case 38:         // action when pressing key         jump();         break;       // right      case 39:         // action when pressing right key         changex(5);         break;       // down     case 40:         // action when pressing down key         changey(5);         break;       default:          break;      }  } </script> 

so, can see i'm creating 2 objects far, , player stops falling @ arbitrary point. feel collisions @ stage wont difficult, once start adding more feel it's going more difficult. i'm not going using instance of object same image each instance of object, @ point i'm going change myobject function able accept image parameter, , checking collisions bit more tricky. plan on making side scroller, once 1 end map hit changes next area, going cause performance issues. if i'm checking collisions on every single object in entire game every interval imagine things going slow. going best way limit number of collisions checked? obviously, if object isn't on screen there no need check it, there way limit that. i'm thinking of making array every frame of game, , filling array it's objects. then, check array of frame player in. feasible or still going cause many issues? appreciated.