Javascript 边缘检测的行为很奇怪

我正在做一个游戏，我现在正在做一个精灵的移动。我需要确保它不能超出某个div。我尝试创建一个函数来检查顶部或左侧距离是否小于0px，但效果不太好

问题：

1） 精灵在边界内停得很好，这不是它应该停的地方

2） 精灵到达边缘后不再停止动画，而是在完全停止之前减慢速度。它的实际停止位置有时高或低几个像素

3） 精灵一旦到达某个地方就会被卡住，无法逃脱

以下是主要功能：

var cstop = false;
    function colCheck() {
        if (
            (char.css("top")<"0px") ||
            (char.css("left")<"0px") ||
            (char.css("top")>"500px") ||
            (char.css("left")>"800px")
        )
        {
            cstop = true;
        }
    };

var cstop=false；
函数colCheck（）{
如果(
（字符css（“顶部”）“800px”）
)
{
cstop=真；
}
};

然后，每当按下箭头键时，都会检查cstop变量

我已经玩弄了这些代码，但我似乎不明白为什么它不能像我希望的那样工作。

---

jsFiddle和相关代码：

您可能不想替换

px

，然后进行比较，如下所示

var left = (+ char.css("left").replace('px', ''));

那就做吧

if(left < 0) {
    // code here..
}

if（左<0）{
//代码在这里。。
}

您无法将这样的字符串与“”进行比较。它们是字符串，不是数字。更不用说你需要修改你的逻辑。如果角色的两边都接触到墙的两边，你不希望玩家被永久卡住。@Brian但是.css（“top”）不会返回top的值吗？这个值也是字符串吗？抱歉，如果我在这里遗漏了什么，我对javascript还是很陌生。@remyabel为什么玩家会被卡住？我可能弄乱了很多逻辑，但我不确定是什么导致了每个问题。@user2748569是的，css（）返回字符串。这很有意义，我会试试。有一件事-结果不是仍然是字符串吗？不，

+

符号仅在字符串仅包含数字时才将字符串转换为数字，哦，太好了-我以前从未见过这种情况。