javascript - 如何检查两个div是否相互接触？

Question

我试图制作一个看起来像游戏的网页。我在其中使用了 html、css、javascript、jquery 和 php。我希望我的马里奥触摸我的其他对象，例如商店（来自数据库），并且在触摸商店上应该出现一个弹出框。我正在使用javascript的碰撞功能，但它不起作用。任何人都可以帮助我。这是我的代码：

        function collision($store, $mario) {
        alert("hello");
        var x1 = $("$store").offset().left;
        var y1 = $("$store").offset().top;
        var x2 = $("$mario").offset().left;
        var y2 = $("$mario").offset().top;
        var h1 = $("$store").outerHeight(true);
        var w1 = $("$store").outerWidth(true);
        var h2 = $("$mario").outerHeight(true);
        var w2 = $("$mario").outerHeight(true);
        var b1 = y1 + h1;
        var r1 = x1 + w1;
            var b2 = y2 + h2;
            var r2 = x2 + w2;
            if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) {
              return false;}
            else{
              return true;
            }
      };
});  
var state =document.getElementById('state');
      if (collision($('.store'),$('.mario'))){
        state.innerText="Touching !!!";
      }  
      else {
        state.innerText="No collision";
      }
      alert(state.innerText);

    }

标签： javascriptjquery