边距检测的行为很奇怪

Question

我正在制作一款游戏，目前我正在制作一款精灵移动游戏。我需要确保它不会超出某个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;
        }
    };

然后，只要按下箭头键，就会检查cstop变量。

我一直在摆弄代码，但我似乎不明白为什么它不能像我想要的那样工作。带相关代码的jsFiddle：http://jsfiddle.net/VYkbR/13/

Answer 1

您可能不想替换px，然后进行比较，如下所示。

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

那就这么做

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