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

Question

首先对不起我糟糕的英语，不是我的母语。

我正在尝试制作一个角色在地图上行走的小型 RPG 游戏（旧的 rpg 风格，可能像塞尔达或口袋妖怪）。

你可以在这里看到我的代码：jsFiddle URL

我有点卡住了，因为当我的两层发生碰撞时，我无法找到一种方法来阻止我的 .animate 朝另一层的方向移动，但允许它朝其他方向移动。例如：

如果#character 向右移动并与另一层碰撞（#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;
}

希望任何人都可以给我任何提示，谢谢！

Answer 1

我要做的是获取#stone 的位置和角色的位置，并检查它们何时相同，如果它们相同，我将返回 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;
}

当然，所有这些逻辑都应该用对象来表达，所以你的 $("#character") 会是

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

}

这只是一个提示:)