如何用JavaScript实现游戏角色跳跃功能

阿华AIGC实验室

2026-5-20

实现2D角色跳跃的简单物理方案

嘿，很高兴看到你已经搞定了角色的平滑左右移动！跳跃的话，咱们用重力加速度+垂直速度变量的模拟方案就很合适，这也是2D平台游戏里最常用的思路，既能实现你要的“指定高度后下落”，还能让动作更自然流畅。我给你拆解具体步骤和代码示例：

第一步：定义核心状态变量

先把角色垂直运动的关键变量定义好，这些参数你可以根据游戏手感随时调整：

// 角色垂直状态
let playerY = 300; // 角色初始位置（地面y坐标）
const groundY = 300; // 固定地面的y坐标
let jumpVelocity = -15; // 跳跃初始向上速度（负号是因为canvas的y轴向下）
const gravity = 0.8; // 重力加速度，值越大下落越快
let verticalSpeed = 0; // 当前垂直方向的速度
let isOnGround = true; // 标记是否在地面，防止空中连跳
const targetJumpHeight = 100; // 你想要的指定跳跃高度

第二步：监听跳跃输入（W键）

只有当角色在地面时，按下W键才触发跳跃，避免玩家无限连跳：

document.addEventListener('keydown', (e) => {
  if (e.key.toLowerCase() === 'w' && isOnGround) {
    verticalSpeed = jumpVelocity;
    isOnGround = false;
  }
});

第三步：在动画循环里处理垂直运动

把跳跃和重力的逻辑整合到你已经在用的requestAnimationFrame循环里，这部分是核心：

function gameLoop() {
  // 处理垂直方向的运动：重力叠加到速度上
  verticalSpeed += gravity;
  // 用速度更新角色y坐标
  playerY += verticalSpeed;

  // 地面碰撞检测：防止角色穿过地面
  if (playerY >= groundY) {
    playerY = groundY; // 拉回地面位置
    verticalSpeed = 0; // 重置垂直速度
    isOnGround = true; // 标记回到地面，允许再次跳跃
  }

  // --- 这里放你原来的左右移动逻辑 ---
  // 比如你之前控制playerX的AD键处理代码

  // 渲染角色（假设用canvas绘制圆形）
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(playerX, playerY, 20, 0, Math.PI * 2);
  ctx.fillStyle = '#3498db';
  ctx.fill();

  requestAnimationFrame(gameLoop);
}