Divs之间的冲突检测

Question

我的简单打砖块游戏遇到了一些麻烦。 我为球对象制作了一个简单的动画，但是很难检测它何时与页面上的其他元素接触。 更不用说，我似乎无法阻止我的播放器磁贴移动到我为此创建的容器div之外。 我只是希望球从球员的球拍，墙壁和砖块反弹。

$(function(){
$(document).keydown(function(e){
    var Playerposition = $("#player").position();
    var Ballposition = $("#ball").position();
    switch (e.keyCode){
        case 37: //Left Movement
            $("#player").css('left', Playerposition.left - 20 + 'px');
        break;
        case 39://Right movement   
            $("#player").css('left', Playerposition.left + 20 + 'px');
        break;   
    }
});
var top = 275;
var left = 325;
var interval = 5; // time interval in milliseconds
var increment = 1;
var move = function() {
     if(left > 750) {
        increment = -increment;
     }
     if(left < 0) {
        increment = -increment
     }
    if(top > 325){
    increment = -increment; 
    }
    if(top < 0) {
    increment = -increment;
     }
    top = top + increment;
     left = left + increment;
     $('#ball').css('left', left + 'px');
    $('#ball').css('top', top + 'px');
};
setInterval(move, interval)});

我确实安装了gameQuery以及Jquery。 到目前为止，这是我目前使用我的当前html / css / javascript进行的游戏： jfiddle对不起，它的匹配效果很好，在完整的网页上看起来也不错。

Answer 1

在这里，您拥有它：

jQuery / JavaScript冲突检测

检查detectOverlapping方法源。

干杯

Answer 2

如果要让碰撞检测与gameQuery配合使用，则必须使用提供的.x() .xy() .y()或.xy()函数，而不要直接使用.css()更改精灵位置。

对于游戏的所有元素（包括组和图块）也是如此。