HTML贪吃蛇游戏移动端触控控制异常问题求助

核心问题分析 #

1. 语法结构错误：你代码里的上下方向判断逻辑嵌套完全混乱，else if (touchY < halfHeight)被错误放在touchY >= halfHeight的代码块内，还缺少闭合大括号，这会直接触发JavaScript语法错误，导致游戏崩溃重启。
2. 未阻止触摸默认行为：移动端touchstart事件会触发浏览器默认行为（如页面滚动、下拉刷新），和游戏事件冲突引发卡顿。
3. 触摸逻辑重叠：同时判断X轴和Y轴触摸区域，同一个触摸动作可能触发左右、上下方向的双重判断，造成方向设置混乱。

修复后的触控代码 #

// touch controls
document.addEventListener('touchstart', function (e) {
  // 阻止浏览器默认触摸行为，避免滚动/刷新干扰
  e.preventDefault();

  const touchX = e.touches[0].clientX;
  const touchY = e.touches[0].clientY;
  const halfWidth = window.innerWidth / 2;
  const halfHeight = window.innerHeight / 2;

  // 优先处理游戏启动逻辑
  if (!gameStarted) {
    startGame();
    return; // 启动后直接退出，避免触发方向控制
  }

  // 优先判断触摸是横向还是纵向操作
  const deltaX = Math.abs(touchX - halfWidth);
  const deltaY = Math.abs(touchY - halfHeight);

  if (deltaX > deltaY) {
    // 横向触摸（左右）
    if (touchX < halfWidth) {
      // 左半屏：仅当当前非横向移动时，转向左
      if (snake.dx === 0) {
        snake.dx = -grid;
        snake.dy = 0;
      }
    } else {
      // 右半屏：仅当当前非横向移动时，转向右
      if (snake.dx === 0) {
        snake.dx = grid;
        snake.dy = 0;
      }
    }
  } else {
    // 纵向触摸（上下）
    if (touchY < halfHeight) {
      // 上半屏：仅当当前非纵向移动时，转向上
      if (snake.dy === 0) {
        snake.dy = -grid;
        snake.dx = 0;
      }
    } else {
      // 下半屏：仅当当前非纵向移动时，转向下
      if (snake.dy === 0) {
        snake.dy = grid;
        snake.dx = 0;
      }
    }
  }
}, { passive: false }); // 必须设置passive:false才能调用preventDefault

额外优化建议 #

• 添加触摸防抖：限制短时间内只能触发一次方向改变，避免连续触摸导致方向混乱：

  let touchTimeout = null;
  document.addEventListener('touchstart', function (e) {
    if (touchTimeout) clearTimeout(touchTimeout);
    touchTimeout = setTimeout(() => {
      // 上述触控逻辑代码
    }, 150);
  }, { passive: false });
  

• 适配移动端视口：在HTML头部添加视口标签，确保游戏在移动端正确显示：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  

• 优化游戏循环：用requestAnimationFrame替代setInterval实现游戏主循环，更适配浏览器刷新机制，减少卡顿。

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