Div之间的碰撞检测答案

【问题标题】：Collision detection between DivsDiv之间的碰撞检测
【发布时间】：2014-01-12 08:29:02
【问题描述】：

我在使用简单的 Brick Breaker 游戏时遇到了一些问题。我为我的球对象制作了一个简单的动画，但我很难检测它何时与页面上的其他元素接触。更不用说，我似乎无法阻止我的玩家板块移动到我为它制作的容器 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 抱歉，它匹配得很好，与完整的网页看起来很好。

【问题讨论】：

标签： javascript jquery game-engine game-physics gamequery

【解决方案1】：

给你：

jQuery/JavaScript collision detection

检查detectOverlapping方法源。

干杯

【讨论】：

【解决方案2】：

如果您希望碰撞检测与 gameQuery 一起使用，您必须使用提供的 .x()、.y() 或 .xy() 函数，而不是直接使用 .css() 更改精灵位置

这适用于游戏的所有元素，包括组和瓷砖地图。

【讨论】：