JavaScript贪吃蛇游戏Shift长按卡顿问题求助及代码修复

我来帮你搞定这个Shift长按导致蛇停止移动的问题！

问题原因 #

你当前的代码中，长按Shift键时浏览器会连续触发keydown事件，每触发一次就执行clearInterval(my_game)然后重新创建定时器。这种频繁重置定时器的操作会彻底打乱游戏的定时执行节奏，最终导致蛇看起来停止了移动。

修复方案 #

我们需要添加一个状态变量来标记Shift键是否已经处于按下状态，避免重复执行定时器重置逻辑。具体步骤如下：

• 新增isShiftPressed变量，初始值设为false，用来跟踪Shift键的按下状态
• 在keyPush方法中，先判断isShiftPressed是否为true，如果是则直接返回，不执行后续操作
• 只有当Shift键首次按下时，才执行加速逻辑并将isShiftPressed设为true
• 在keyRelease方法中，恢复正常速度后将isShiftPressed重置为false

修改后的完整代码 #

var trail = [];
var tail = 5;
var normal_speed = 1000 / 10 
var speed = 1000 / 10;
var game_status = 0;
var my_game;
// 新增状态变量：标记Shift是否已按下
var isShiftPressed = false;

button.addEventListener("click", function () {
    clearInterval(my_game);
    my_game = setInterval(game, speed);
});

window.onload = function () {
    canv = document.getElementById("gc");
    context = canv.getContext("2d");
    document.addEventListener("keydown", keyPush);
    document.addEventListener("keyup", keyRelease);
}

function game() {
    // 假设你已定义grid_size、player_x、player_y等核心变量
    for (var i = 0; i < trail.length; i++) {
        context.fillRect(trail[i].x * grid_size, trail[i].y * grid_size, grid_size - 2, grid_size - 2);
        if (trail[i].x == player_x && trail[i].y == player_y) {
            if (game_status == 0) {
                tail = 5;
            } else {
                endGame();
                return;
            }
        }
    }
    trail.push({ x: player_x, y: player_y });
    while (trail.length > tail) {
        trail.shift();
    }
}

function keyPush(keyEvent) {
    switch (keyEvent.keyCode) {
        case 16:
            // 如果Shift已经按下，直接返回，避免重复重置定时器
            if (isShiftPressed) return;
            clearInterval(my_game);
            speed = normal_speed * 0.5;
            my_game = setInterval(game, speed);
            isShiftPressed = true;
            break;
        // 保留你原有方向键的逻辑代码
    }
}

function keyRelease(keyEvent) {
    switch (keyEvent.keyCode) {
        case 16:
            clearInterval(my_game);
            speed = normal_speed;
            my_game = setInterval(game, speed);
            isShiftPressed = false;
            break;
        // 保留你原有方向键的逻辑代码
    }
}

额外说明 #

• 浏览器默认会在长按按键时连续触发keydown事件，这是正常行为，通过状态变量做防抖处理是这类场景的通用解决方案
• 代码中我添加了注释标注关键修改点，方便你理解逻辑变化

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