javascript - 边距检测行为怪异

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..
}