JavaScript贪吃蛇游戏运行时，如何禁止页面随上下方向键滚动？

有两种简单的方法可以解决这个问题，根据你的需求选择：

方法一：阻止方向键的默认滚动行为 #

直接在键盘事件中，当游戏处于活跃状态时，阻止上下方向键触发的页面滚动动作：

1. 在SnakeGame类的constructor中添加游戏状态标识：

constructor() {
  // ... 现有代码
  this.isGameActive = false; // 新增：标记游戏是否处于活跃状态
}

2. 修改startGame方法，激活游戏时更新状态：

startGame() {
  // ... 现有代码
  this.isGameActive = true; // 新增
}

3. 修改endGame方法，结束游戏时重置状态：

endGame() {
  // ... 现有代码
  this.isGameActive = false; // 新增
}

4. 调整键盘事件监听逻辑，在init方法中统一处理（避免重复绑定事件）：

init() {
  // ... 现有代码（选择难度、开始按钮监听逻辑）

  // 统一绑定键盘事件
  document.addEventListener('keydown', event => {
    if (this.isGameActive) {
      const keyCode = event.keyCode;
      this.changeDirection(keyCode);
      // 阻止上下方向键的默认滚动行为
      if (keyCode === 38 || keyCode === 40) {
        event.preventDefault();
      }
    }
  });
}

这样只有在游戏运行时，按下上下键才会阻止页面滚动，其他场景不影响正常页面操作。

方法二：用CSS锁定页面滚动（更彻底） #

通过给body添加类，直接禁用页面滚动，适合需要用户专注于游戏操作的场景：

1. 添加以下CSS样式：

body.no-scroll {
  overflow: hidden;
  height: 100vh;
}

2. 在startGame方法中给body添加锁定类：

startGame() {
  // ... 现有代码
  document.body.classList.add('no-scroll'); // 新增
}

3. 在endGame方法中移除锁定类，恢复页面滚动：

endGame() {
  // ... 现有代码
  document.body.classList.remove('no-scroll'); // 新增
}

这种方法会完全锁定页面滚动，不管用户用键盘还是鼠标滚轮，游戏结束后自动恢复正常滚动，体验更连贯。

内容的提问来源于stack exchange，提问作者Thor The dog