JavaScript贪吃蛇游戏移动端屏幕箭头键无法启动问题求助

问题根源 #

你的代码里，启动游戏的核心逻辑（设置moveInterval）仅存在于keydown事件回调内部，只有按下键盘按键时才会触发启动判断。而移动端屏幕箭头的点击事件只修改了移动方向，没有触发启动游戏的逻辑，所以点击屏幕箭头无法启动游戏。另外，屏幕按钮的点击事件绑定被放在了keydown回调里，这意味着必须先按过键盘按键，屏幕按钮的点击才会生效，不符合移动端使用需求。

修复步骤 #

1. 抽离启动逻辑为独立函数：把判断并启动游戏的代码单独封装，让键盘事件和屏幕点击事件都能调用。
2. 将屏幕按钮事件绑定移至顶层：确保页面加载后屏幕按钮就能正常响应点击。
3. 在屏幕按钮点击函数中调用启动逻辑：让点击屏幕箭头时，既修改方向，又触发游戏启动。

修改后的代码 #

// Handling User Input
const handleInput = () => {
    // 抽离启动游戏的独立函数
    const startGameIfNotRunning = () => {
        if (moveInterval === undefined) {
            moveInterval = setInterval(() => {
                move(movingDirection || 'left');
            }, 1000 / speed);
        }
    };

    // 键盘按键处理
    document.addEventListener('keydown', e => {
        switch(e.keyCode) {
            case key.arrowUp:    movingDirection = movingDirection === 'down' ? 'down' : 'up'; break;
            case key.arrowDown:  movingDirection = movingDirection === 'up' ? 'up' : 'down'; break;
            case key.arrowLeft:  movingDirection = movingDirection === 'right' ? 'right' : 'left'; break;
            case key.arrowRight: movingDirection = movingDirection === 'left' ? 'left' : 'right'; break;
        }
        startGameIfNotRunning();
    });

    // 屏幕方向按钮的处理函数
    const left = () => {
        movingDirection = movingDirection === 'right' ? 'right' : 'left';
        startGameIfNotRunning();
    };
    const up = () => {
        movingDirection = movingDirection === 'down' ? 'down' : 'up';
        startGameIfNotRunning();
    };
    const down = () => {
        movingDirection = movingDirection === 'up' ? 'up' : 'down';
        startGameIfNotRunning();
    };
    const right = () => {
        movingDirection = movingDirection === 'left' ? 'left' : 'right';
        startGameIfNotRunning();
    };

    // 绑定屏幕按钮点击事件（页面加载后立即生效）
    document.getElementById("left").onclick = left;
    document.getElementById("up").onclick = up;
    document.getElementById("down").onclick = down;
    document.getElementById("right").onclick = right;
}


// Define key variables.
const speed = 6;
const worldSize = 10;
const startPoint = [5,5];
const snake = [startPoint];
const key = {
   arrowUp: 38,
   arrowDown: 40,
   arrowLeft: 37,
   arrowRight: 39,
};

let movingDirection;
let moveInterval;


// Start Game
const startGame = () => {
   handleInput();
   checkItemAt(...startPoint);
   placeAppleAt(...getRandomPosition());
}


startGame();

关键修改说明 #

• startGameIfNotRunning函数：统一处理游戏启动逻辑，避免重复代码，保证键盘和屏幕按钮都能触发启动。
• 屏幕按钮事件绑定移至handleInput顶层：页面加载完成后，屏幕按钮即可正常响应点击，无需先按键盘。
• 屏幕按钮处理函数调用启动逻辑：点击屏幕箭头时，先修改移动方向，再检查游戏状态，未启动则立即启动游戏。

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