如何检测jQuery中2个div何时发生冲突？没有拖动div

Question

我到处搜索网络，找到一种方法来检测2个div之间何时相互碰撞，但是，我发现的所有内容都特定于插件或拖动。我很熟悉jQuery和自学成才！我正在制作一个游戏，其中一个饼干跳过一个牛奶杯。我试图让它检测它们水平碰撞，但也当我跳起来。

以下是我的代码片段供参考：

HTML：

<img id="hand1" src="http://i67.tinypic.com/jif81w.jpg">
<img id="Cookie2" src="http://images.clipartpanda.com/cookie-clipart-niEyA5KiA.png">
<img id="milk" src="http://i67.tinypic.com/11grjq0.jpg">

jQuery的：

 $("#hand1").css({float:'right',"margin-top":"480px"});
 $("#Cookie2").css({float:"left","margin-
 left":"400px",position:"absolute","margin-
 top":"25px",height:"510.5px",width:"580px"});

var hide= function() {
$("#hand1").hide();
}
$("#hand1").click(function(){
$("#milk").animate({marginRight:"900"},3000);
$("#Cookie").hide();
};
$("#Cookie2").show();
$("#milk").show();
move=1;
hide();

  if(move == 1){

  $("#Cookie2").css({width:"200px",height:"200",
  bottom:"0",position:"fixed"});
    $(window).keydown(function(e){
    if(e.keyCode==32){
    for (var i=1; i<=1; i++) {
    $("#Cookie2").animate({bottom:300},{
    duration:500,
    start:function(){
    console.log("start");

  },
    complete:function(){
      console.log("end");

    }
  });


  $("#Cookie2").animate({bottom:0},500);
}}})



}});