当两层碰撞JQUERY时停止某些动画

首先，很抱歉我的英语很糟糕，这不是我的母语

我正在尝试做一个角色在地图上行走的小RPG游戏（旧的RPG风格，比如塞尔达或者口袋妖怪）

您可以在此处看到我的代码：

我有点卡住了，因为当我的两个层发生碰撞时，我找不到方法来阻止我的。在另一层的方向上设置动画，但允许它在其他方向上移动。例如：

如果#角色向右移动并与另一层（stone01，黑色层）碰撞，我希望停止向右移动，但允许向上、向下和向左移动

在这里，您可以看到检测两个元素冲突的Javascript代码：

function collision($yo, $obstaculo) {
    var x1 = $yo.offset().left;
    var y1 = $yo.offset().top;
    var h1 = $yo.outerHeight(true);
    var w1 = $yo.outerWidth(true);
    var b1 = y1 + h1;
    var r1 = x1 + w1;
    var x2 = $obstaculo.offset().left;
    var y2 = $obstaculo.offset().top;
    var h2 = $obstaculo.outerHeight(true);
    var w2 = $obstaculo.outerWidth(true);
    var b2 = y2 + h2;
    var r2 = x2 + w2;

    if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
    return true;
}

函数冲突（$yo，$obstaculo）{
var x1=$yo.offset（）.left；
变量y1=$yo.offset（）.top；
var h1=$yo.outerHeight（真）；
变量w1=$yo.外径（真）；
var b1=y1+h1；
var r1=x1+w1；
var x2=$obstaculo.offset（）.left；
变量y2=$obstaculo.offset（）.top；
var h2=$obstaculo.outerHeight（真）；
var w2=$obstaculo.outerWidth（真）；
var b2=y2+h2；
var r2=x2+w2；
如果（b1b2 | r1r2）返回false；
返回true；
}

---

希望有人能给我一些建议，谢谢

我要做的是获取#石头的位置和角色的位置，并检查它们是否相同，如果它们相同，我将返回false并将标志canMoveRight设置为false

我假设将使用keydown事件处理程序，距离为1px，首先我检查层是否重叠并相应地继续

var canMoveRight = true;

$("#character")
    .on(
    {
        keydown : function()
        {
            if(checkLayerOverlap())
                $("#character").stop();
            else
                move(1);

            return false;
        }
    }
);

function move(distance)
{
    $("#character").animate({
        right : "+=" + distance + "px"
    },"slow");
}

function checkLayerOverlap()
{
    var isOverLapping = false;
    var characterPosition = $("#character").position();
    var stonePosition = $("#stone").position();

    if(characterPosition.right == stonePosition.right)
    {
        canMoveRight = false;
        isOverLapping = true;
    }

    return isOverLapping;
}

当然，所有这些逻辑都应该用对象来表示，这样您的$（“#字符”）就可以

var Character = {
 canMoveRight = true,
 move : function(distance)
 {
    //code here
 }

}

---

这只是一个提示：）

首先将游戏对象与这些元素的视觉显示分开。计算碰撞，使其影响游戏对象的速度。显示纯粹是游戏状态的表示。使用动画只是在两个位置之间平滑动画的一种方法。好的，我根据你的想法找到了一个解决方案，非常感谢！我现在的问题是，我想使用我的函数collision（）来处理具有相同类名的各种元素。我真的不知道如何做到这一点，我试着用它。每个存储在一个变量中所有div的所有距离和宽度，但我不知道如何显示ir（可能使用某种FOR循环？）。再次感谢@user3214649如果这回答了您的问题，请打勾。这将“结束”这个问题，它将通过给alex分数来回报alex，让他回答你的问题。Thanx作为提示，我也是使用Stackoverflow的新手^^