如何在JavaScript中进行2d字符的奔跑和跳跃

<canvas id="gameCanvas" width="800" height="400"></canvas>

const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

// 绘制角色矩形
ctx.fillStyle = "red";
ctx.fillRect(x, y, width, height);

// 或者绘制角色图像
const image = new Image();
image.src = "character.png";
ctx.drawImage(image, x, y, width, height);

document.addEventListener("keydown", function(event) {
  if (event.key === "ArrowRight") {
    // 向右奔跑
    x += speed;
  } else if (event.key === "ArrowUp") {
    // 跳跃
    jump();
  }
});

function update() {
  // 更新角色位置
  x += speed;
  y += gravity;

  // 碰撞检测等其他逻辑

  // 重新绘制画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, y, width, height);

  // 循环调用更新函数
  requestAnimationFrame(update);
}

// 启动游戏循环
update();