为什么我得到的 position() 左值异常高？

Question

相关代码是

    this.place = function ()
    {
        var headElem = game.snake.links[0];
        this.bub.css({
            left: headElem.pos.x * game.blockWidth + $('#snake-board-column').css('padding-left'),
            bottom: headElem.pos.y * game.blockWidth
        });
        console.log(this.bub.position()); // TEST
    }

它的目的是使一个单词气泡相对于 SVG rect 元素的位置（如果你想知道为什么我不简单地使用 CSS，那是因为有一个由于游戏逻辑，很多 swapping/replacing 元素）。上面的函数在页面加载和 window 调整大小时调用。我发现奇怪的是我的测试结果

console.log(this.bub.position()); // TEST

当 window 调整大小时，

有时会为 left 生成非常高的值，结果气泡这个词不在屏幕上。我刚刚调整了 window 的大小并得到了

Objectleft: 308.5top: 0__proto__: Object
game.js:290 Objectleft: 23515top: 0__proto__: Object
game.js:290 Object {top: 0, left: 23515}
game.js:290 Object {top: 0, left: 23515}
game.js:290 Object {top: 0, left: 23515}
game.js:290 Object {top: 0, left: 23515}
game.js:290 Object {top: 0, left: 23515}
game.js:290 Object {top: 0, left: 23515}
game.js:290 Object {top: 0, left: 23515}
game.js:290 Object {top: 0, left: 169169}
game.js:290 Object {top: 0, left: 169169}
game.js:290 Object {top: 0, left: 169169}

您可以看到 left 的第一个值是 308.5（正常，预期），后续值不正常。您可以看到它的实际效果 here and the full JS here。知道是什么导致了这些废话吗？？？？

最奇怪的是我测试了个别值

headElem.pos.x、game.blockWidth 和 $('#snake-board-column').css('padding-left') 看起来都很正常。

Answer 1

您可能正在连接字符串而不是添加整数。

headElem.pos.x、game.blockWidth 和 $('#snake-board-column').css('padding-left') 的类型是什么？

例如，我在控制台中试过这个：

var paddingLeft = $('#snake-board-column').css('padding-left');
>> typeof paddingLeft
>> 'string'

尝试 parseInt()，然后再对值求和。

为什么我得到的 position() 左值异常高？

Why am I getting insanely high values for left value of position()?

html

javascript

css

jquery

game-physics