JavaScript 与 jQuery 数学行为？

Question

我正在尝试用 JavaScript 构建游戏。我有这个功能来移动 Angular 色:

    document.addEventListener('keydown', function(e){
        let p = document.getElementById('player'), x = p.offsetLeft, y = p.offsetTop;
        console.log({x,y});
        switch( e.keyCode ) {
            case 37:
                x -= 1.5;
            break;
            case 38:
                y -= 1.5; 
            break;
            case 39:
                x += 1.5;
            break;
            case 40:
                y += 1.5;
            break;
        }
        console.log({x,y});
        p.setAttribute('style', `left: ${x}px; top:${y}px;`);
    });

这是相同的函数，但用 jQuery 编写:

    $(document).on('keydown', function(e) {
        let x = $('#player').offset().left, y = $('#player').offset().top;
        switch(e.keyCode) {
            case 37:
                x -= 1.5;
            break;
            case 38:
                y -= 1.5; 
            break;
            case 39:
                x += 1.5;
            break;
            case 40:
                y += 1.5;
            break;
        }
        $('#player').css({
            top: y + "px",
            left: x + "px" 
        });
    });

为什么用普通 javascript 编写的函数将对象向右移动的速度比向左移动的速度快，而 jQuery 在两个方向上移动的速度相同？ 编辑:忘了提及，这只发生在这个特定值 1.5 上，假设 1 就可以了。

Answer 1

jQuery 的 offset() 能够处理半个像素:

The number returned by dimensions-related APIs, including .offset(), may be fractional in some cases. Code should not assume it is an integer. http://api.jquery.com/offset/

offsetLeft 和 offsetTop 仅适用于整数，因此将 1.5 舍入为 2，因此在每一步中将对象移动得更远(在两个方向上):

left is an integer representing the offset to the left in pixels from the closest relatively positioned parent element. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft

document.addEventListener('keydown', function(e){
        let p = document.getElementById('player'), x = p.offsetLeft, y = p.offsetTop;
        console.log("vanilla: ", x, y);
        switch( e.keyCode ) {
            case 37:
                x -= 1.5;
            break;
            case 38:
                y -= 1.5; 
            break;
            case 39:
                x += 1.5;
            break;
            case 40:
                y += 1.5;
            break;
        }
        p.setAttribute('style', `left: ${x}px; top:${y}px;`);
    });

    $(document).on('keydown', function(e) {
        let x = $('#jqPlayer').offset().left, y = $('#jqPlayer').offset().top;
        console.log("jQuery: ", x, y);

        switch(e.keyCode) {
            case 37:
                x -= 1.5;
            break;
            case 38:
                y -= 1.5; 
            break;
            case 39:
                x += 1.5;
            break;
            case 40:
                y += 1.5;
            break;
        }
        $('#jqPlayer').css({
            top: y + "px",
            left: x + "px" 
        });
    });

div.obj {position:absolute; border: 1px solid}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="obj" id="player">vanilla</div>

<div class="obj" id="jqPlayer">jQuery</div>

作为确认，如果您坚持使用整数，差异就会消失:

document.addEventListener('keydown', function(e){
        let p = document.getElementById('player'), x = p.offsetLeft, y = p.offsetTop;
        switch( e.keyCode ) {
            case 37:
                x -= 2;
            break;
            case 38:
                y -= 2; 
            break;
            case 39:
                x += 2;
            break;
            case 40:
                y += 2;
            break;
        }
        p.setAttribute('style', `left: ${x}px; top:${y}px;`);
    });

    $(document).on('keydown', function(e) {
        let x = $('#jqPlayer').offset().left, y = $('#jqPlayer').offset().top;
        switch(e.keyCode) {
            case 37:
                x -= 2;
            break;
            case 38:
                y -= 2; 
            break;
            case 39:
                x += 2;
            break;
            case 40:
                y += 2;
            break;
        }
        $('#jqPlayer').css({
            top: y + "px",
            left: x + "px" 
        });
    });

div.obj {position:absolute; border: 1px solid}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="obj" id="player">vanilla</div>

<div class="obj" id="jqPlayer">jQuery</div>