JavaScript 游戏在较新的 MacBook 上运行速度超快

Question

所以我制作了 Flappy Bird 的 JavaScript 克隆版。它在我的 2021 M1 iMac 上运行得非常漂亮，几乎完美......

它在我的 2023 M2 MacBook Pro 上也运行得相当好，除了一些小故障。然而，这只是我使用 Safari 时的情况。在这台 MacBook 上的 Chrome 中打开游戏，其运行速度似乎提高了一倍。

不同的移动设备也有各种故障，但使用相同浏览器的其他相同型号则没有。

我很困惑。感谢您的帮助。

这是我的重力函数：

function startGravity() {

    function gravity() {
        velocity += gravityConstant;
        let position = parseInt(getComputedStyle(bird).top) + velocity;
        bird.style.top = `${position}px`;

        loops.gravityAnimation = requestAnimationFrame(gravity);
    }

    loops.gravityAnimation = requestAnimationFrame(gravity);
}

这是在屏幕上滑动障碍物的功能：

function runShips() {
    //create random ship every 5 seconds
    generateShipsInterval();

    function slideShipsAnimation() {
        document.querySelectorAll('.ships').forEach(ship => {
            ship.style.left = `${parseInt(getComputedStyle(ship).left) - 3}px`;
        });
        loops.slideShipsAnimation = requestAnimationFrame(slideShipsAnimation);
    }
    //run all ships across the screen
    loops.slideShipsAnimation = requestAnimationFrame(slideShipsAnimation);
}

我知道这与帧速率有关，因为尝试实现增量时间会改变速度，但会导致设备之间的不一致和更多故障。

Answer 1

更新：

所以我解决了很多问题。事实证明，问题是我使用了 parseInt 而不是 parseFloat。我认为下一个位置的不精确性导致了舍入问题，有时位置落后，导致不稳定。

现在几乎完美，但还不够完美。我认为改用 Translate() 可能会解决这个问题。

我现在遇到的问题是，当我在移动设备上点击跳跃时，它会短暂地导致障碍物移动不稳定。即使我禁用了 Jump() 逻辑，它也会执行此操作，表明事件侦听器单独负责。

如有任何更改，将进行更新。