如何在p5.js中实现带重力的GIF跳跃并固定落地y值为730

第一步：补充物理相关变量 #

给你的cat对象新增物理属性，同时全局定义重力、跳跃力参数：

let gravity = 0.8; // 重力数值越大，下落速度越快
let jumpForce = -16; // 跳跃初速度为负代表向上，绝对值越大跳得越高
let catGif; // 提前声明GIF元素变量，避免运行报错
let cat = {
  x:70,
  y:730,
  vy:0, // 垂直方向速度
  isOnGround: true // 标记是否在地面，防止空中连跳
}

第二步：新增按键监听逻辑 #

新增keyPressed函数，同时处理游戏启动和跳跃触发逻辑：

function keyPressed() {
  // 按空格键启动游戏
  if (mode === 0 && keyCode === 32) {
    mode = 1;
  }
  // 游戏运行中、角色在地面时按空格触发跳跃
  if (mode === 1 && keyCode === 32 && cat.isOnGround) {
    cat.vy = jumpForce;
    cat.isOnGround = false;
  }
}

第三步：draw函数中加入物理更新逻辑 #

在draw函数的背景渲染逻辑之后加入物理计算代码，同时同步GIF角色的位置：

if (mode === 1) {
  // 应用重力，更新垂直速度
  cat.vy += gravity;
  // 更新角色y坐标
  cat.y += cat.vy;
  // 落地检测，强制角色精准停在y=730位置
  if (cat.y >= 730) {
    cat.y = 730;
    cat.vy = 0;
    cat.isOnGround = true;
  }
  // 同步更新GIF元素的显示位置
  catGif.position(cat.x, cat.y);
}

调参提示 #

你可以自行修改gravity和jumpForce的数值，调整跳跃手感：比如重力调大时跳跃会更短促，跳力调大时角色跳跃高度更高。

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