JS Canvas类马里奥游戏移动端上滑触发跳跃功能实现求助

核心问题 #

你之前用touchmove事件直接触发跳跃，会导致只要触摸移动就重复触发，而非仅在上滑动作时触发。需要通过记录触摸起始位置、计算滑动方向与距离，来精准判断上滑操作。

实现步骤与代码 #

1. 初始化关键变量
   用于记录触摸起始位置、控制跳跃权限、设置触发阈值：

let touchStartY;
let canJump = true; // 仅当玩家在地面时允许跳跃
const JUMP_TRIGGER_DISTANCE = 20; // 触发跳跃的最小上滑距离（可按需调整）

2. 绑定触摸起始事件
   在手指刚接触屏幕时，记录初始Y坐标：

document.addEventListener('touchstart', (e) => {
  touchStartY = e.touches[0].clientY;
});

3. 绑定触摸移动事件，判断上滑触发跳跃
   计算滑动的Y轴差值，仅当向上滑动且超过阈值、同时允许跳跃时，执行跳跃逻辑：

document.addEventListener('touchmove', (e) => {
  e.preventDefault(); // 阻止页面滚动干扰游戏操作
  const currentTouchY = e.touches[0].clientY;
  const slideDistance = currentTouchY - touchStartY;

  // 向上滑（slideDistance为负）+ 超过触发阈值 + 处于可跳跃状态
  if (slideDistance < -JUMP_TRIGGER_DISTANCE && canJump) {
    player.velocity.y -= 15; // 执行你的跳跃速度设置
    canJump = false; // 触发后禁止空中二次跳跃
  }
});

4. 重置跳跃权限
   在游戏主循环中，检测玩家是否落地，重置canJump：

function gameLoop() {
  // ...其他游戏逻辑（比如碰撞检测、玩家位置更新）
  
  // 假设你有判断玩家是否在地面的变量（比如player.isOnGround）
  if (player.isOnGround) {
    canJump = true;
  }

  requestAnimationFrame(gameLoop);
}

额外说明 #

• e.preventDefault()：如果游戏页面存在滚动，这行代码可以避免触摸滑动时页面滚动，保证操作专注于游戏。
• 阈值调整：JUMP_TRIGGER_DISTANCE可根据玩家手感调整，建议在15-30px之间测试。
• 防重复触发：canJump变量是模拟马里奥"仅地面可跳跃"的核心逻辑，避免空中无限跳的bug。

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