Divs collision

HTML

<!--  Divs collision  --> 

    <div id="box"></div>
<div class="box1">  
</div>
<div style="left:350px;" class="box1">  
</div>
<span style="margin-left:50px;" id="result">false</span>

CSS

.box1{
position:absolute;
    width:20px; height:20px;          
    background-color:Red;
    top:300px;
    left:300px;
  } 
#box {
    position:absolute;
    width:20px; height:20px;          
    background-color:black;
}

JavaScript

//detecting key strokes

$(document).keydown(function(pk){
var pos = $('#box').position();
  if(pk.keyCode == '37'){
      $('#box').css('left',pos.left - 10 + 'px');
  }
    if(pk.keyCode == '38'){      
     $('#box').css('top',pos.top - 10 +'px');      
  }
    if(pk.keyCode == '39'){
           $('#box').css('left',pos.left + 30 + 'px');
  }
    if(pk.keyCode == '40'){
         $('#box').css('top',pos.top + 10 + 'px');
  }
  });



//detect collision for every 2 seconds
window.setInterval(function(){
    var char = $('#box');
    var bar = $('.box1');
    // Here comes the magic
    bar.each(function(){
        collision($(this), $(char));	
        alert(collision);
    });
}, 1);