为什么这个 JavaScript 函数有时具有良好的价值并且有效，而有时则不然？可能是页面刷新率的问题

Question

我正在尝试制作一条由分段组成的蛇的动画。 当鼠标停止时，这些段应该撤退。 所以我正在计算距离，当鼠标停止时，我正在更改位置以及不透明度值。 有时它会以良好且顺利的方式运作，有时则不然。 这是函数的代码：

function animateSnake() {
    let previousX = mouseX;
    let previousY = mouseY;


    segments.forEach((segment, index) => {
        const dx = previousX - segment.x;
        const dy = previousY - segment.y;
        const distance = Math.sqrt(dx * dx + dy * dy);

        if (distance >= segmentSize) {
            const angle = Math.atan2(dy, dx);
            segment.x = previousX - Math.cos(angle) * segmentSize;
            segment.y = previousY - Math.sin(angle) * segmentSize;
        }else if (Date.now() - lastMouseMoveTime > 300) {
            const head = segments[0];
            const angleToHead = Math.atan2(head.y - segment.y, head.x - segment.x);
            if (index != 0) {
                segment.x += Math.cos(angleToHead) * segmentSize / 2;
                segment.y += Math.sin(angleToHead) * segmentSize / 2;
                segment.element.style.opacity = 0;
            }
        }else {
            if (index != 0){
                segment.element.style.opacity = 1;
            }
        }

        segment.element.style.transform = `translate(${segment.x}px, ${segment.y}px)`;

        previousX = segment.x;
        previousY = segment.y;
    });


    requestAnimationFrame(animateSnake);
}

我尝试调试，但只能看到该值突出显示，但没有更改。

Answer 1

很难确定你的蛇是什么样的。目前还不清楚它是否在移动，比如改变位置、旋转等等，但是无论你的蛇看起来如何，无论你想如何移动你的蛇，如果它只是一个平移（在 2D 窗格内移动它），那么可以安全地假设所有线段都会进行相同的移动，因此您可以计算并添加第一个线段的 dx 和 dy，并将这些值也添加到所有其他线段。如果您只想移动靠近鼠标指针的线段，则可以像在循环中一样移动它，但请注意后续线段需要 1. 连接到前一个线段，并且 2. 远离前一个线段3. 鼠标不要与之前的任何片段重叠。

目前尚不清楚您的测试用例中哪些地方不太顺利，希望这个答案可以解决该问题。如果没有，那么请确保在您的问题中添加一个片段，其中会重现问题，并说明我们应该如何测试它并解释您的核心概念，例如片段是什么，它的大小是多少，蛇的一部分是否占据了整个片段一段等