蛇游戏按键控制时移动延迟/停顿问题技术求助

我正在独立开发一款蛇游戏，但遇到了按键控制时移动间隔（interval）大幅暂停的问题，我不希望移动暂停，而是希望它持续进行。相关代码如下：

const trackMovement = () => {
    let direction
    const catchError = (e) => {
        // cells that are places on the border
        if (e instanceof TypeError) {
            location.reload()
        } else {
            location.reload()
        }
    }
    let movementInterval;
    const movePlayerMinus = (num) => {
        try {
            const newIndex = randomGreenIndex - num;
            // Check if the new index is within the grid boundaries and not hitting the right wall
            // when you divide by 16 all the left cells - num of the wall have a remainder of 15
            // This checks to see if a new row has started
            if (newIndex >= 0 && newIndex % 16 === 15) {
                location.reload()
            } else {
                playerGreenCell.classList.remove(snakeColor);
                randomGreenIndex = newIndex;
                playerGreenCell = cellArray[randomGreenIndex];
                playerGreenCell.classList.add(snakeColor);
            }
        } catch (e) {
            catchError(e);
        }
    };

    const movePlayerPositive = (num) => {
        try {
            const newIndex = randomGreenIndex + num;
            // Check if the new index is within the grid boundaries and not hitting the left wall
            // when you divide by 16 all the right cells + num of the wall have no remainder
            // this checks to see if a new row has started
            if (newIndex < cellArray.length && newIndex % 16 === 0) {
                location.reload()
            } else {
                playerGreenCell.classList.remove(snakeColor);
                randomGreenIndex = newIndex;
                playerGreenCell = cellArray[randomGreenIndex];
                playerGreenCell.classList.add(snakeColor);
            }

        } catch (e) {
            catchError(e);
        }
    };
    document.addEventListener("keydown", (e) => {
        if (movementInterval) {
            clearInterval(movementInterval);
        }
        switch (e.key) {
            case "ArrowUp":
            case "w":
            case "W":
                movementInterval = setInterval(() => movePlayerMinus(16), 200)
                break;
            case "ArrowDown":
            case "s":
            case "S":
                movementInterval = setInterval(() => movePlayerPositive(16), 200)
                break;
            case "ArrowRight":
            case "d":
            case "D":
                movementInterval = setInterval(() => movePlayerPositive(1), 200)
                break;
            case "ArrowLeft":
            case "a":
            case "A":
                movementInterval = setInterval(() => movePlayerMinus(1), 200)
                break;
            default:
                console.log("not working")
        }
    });
};

项目使用Vite构建，可通过终端执行npm run dev启动测试。目前按下按键时，移动会变慢，若间隔设置较慢甚至会停止，我认为实现方式有误，希望获得技术指导。

问题根源 #

当前代码每次按下按键都会clearInterval(movementInterval)然后重新创建新的定时器，这会导致：

• 新定时器要等待200ms才会执行第一次移动，产生明显停顿
• 连续按键时频繁销毁重建定时器，移动节奏被打乱

正确的做法是维护一个持续运行的主循环，按键只负责更新移动方向，不直接控制定时器的创建和销毁。

修改后的代码 #

const trackMovement = () => {
    let direction = null; // 存储当前移动方向对应的偏移量
    const catchError = (e) => {
        location.reload(); // 简化错误处理逻辑
    };

    const movePlayer = () => {
        if (!direction) return; // 无方向时不执行移动
        try {
            let newIndex = randomGreenIndex + direction;
            
            // 边界碰撞检测：超出网格范围直接重启
            if (newIndex < 0 || newIndex >= cellArray.length) {
                location.reload();
                return;
            }

            // 左右墙壁碰撞检测：基于16列网格判断
            const currentCol = randomGreenIndex % 16;
            const newCol = newIndex % 16;
            if ((direction === -1 && currentCol === 0) || (direction === 1 && currentCol === 15)) {
                location.reload();
                return;
            }

            // 执行移动操作
            playerGreenCell.classList.remove(snakeColor);
            randomGreenIndex = newIndex;
            playerGreenCell = cellArray[randomGreenIndex];
            playerGreenCell.classList.add(snakeColor);
        } catch (e) {
            catchError(e);
        }
    };

    // 启动持续运行的主移动循环
    const movementInterval = setInterval(movePlayer, 200);

    // 按键仅更新移动方向，不触碰定时器
    document.addEventListener("keydown", (e) => {
        switch (e.key) {
            case "ArrowUp":
            case "w":
            case "W":
                direction = -16;
                break;
            case "ArrowDown":
            case "s":
            case "S":
                direction = 16;
                break;
            case "ArrowRight":
            case "d":
            case "D":
                direction = 1;
                break;
            case "ArrowLeft":
            case "a":
            case "A":
                direction = -1;
                break;
            default:
                console.log("无效按键");
        }
    });
};

关键优化点 #

• 分离方向控制与移动执行：主定时器持续运行，按键仅修改方向变量
• 移除每次按键的定时器销毁重建逻辑，彻底解决停顿问题
• 优化碰撞检测逻辑，代码更清晰易懂
• 简化错误处理，减少冗余代码

额外建议 #

• 可添加keyup事件处理，避免长按按键时重复触发方向更新
• 后续扩展蛇身增长逻辑时，主循环模式会更易维护
• 可将移动间隔设为变量，随着得分增加提升游戏速度

内容的提问来源于stack exchange，提问作者MuhammadTheProgrammer