Question

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

我正在尝试做一个角色走过地图的小RPG游戏（旧的RPG风格，如zelda或pokemon）。

您可以在此处查看我的代码：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
 }

}

这只是一个提示：）

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

1 个答案: