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()更改精靈位置。

對於游戲的所有元素（包括組和圖塊）也是如此。