p5.js中重力代码放置位置及实现方法求助（附现有代码）

核心逻辑 #

要模拟重力，得利用p5.js的draw()循环逐帧更新角色的垂直位置：通过速度叠加重力加速度模拟下落的加速效果，同时添加地面碰撞检测，防止角色无限掉落。

修改后的完整代码 #

// 全局变量定义
let gameChar_x, gameChar_y;
let gravity;
let vy; // 垂直速度
let groundY; // 地面y坐标

function setup() {
  createCanvas(400, 200);
  // 初始化变量
  gameChar_x = 245;
  gameChar_y = 137;
  gravity = 0.5; // 重力加速度，数值越大下落越快
  vy = 0; // 初始垂直速度为0
  groundY = 137; // 角色站立的地面位置
}

function draw() {
  background(255); // 每一帧清空画布
  
  // 绘制题目提示框
  stroke(100);
  noFill();
  rect(220, 60, 50, 80);
  noStroke();
  fill(0);
  text("2. jumping facing forwards", 220, 160);
  
  // 重力逻辑处理
  vy += gravity; // 逐帧给垂直速度叠加重力
  gameChar_y += vy; // 根据垂直速度更新角色y坐标
  
  // 地面碰撞检测：碰到地面时重置位置和速度
  if (gameChar_y >= groundY) {
    gameChar_y = groundY;
    vy = 0;
  }
  
  // 绘制角色
  fill(255,102,179);
  rect(gameChar_x-10, gameChar_y-55, 20, 20);
  fill(153,77,0);
  ellipse(gameChar_x, gameChar_y-62, 20, 20);
  fill(255,255,255);
  ellipse(gameChar_x-5, gameChar_y-62, 5,5);
  fill(64,25,255);
  ellipse(gameChar_x, gameChar_y-62, 5,5);
}

// 可选：添加跳跃功能，按空格键触发
function keyPressed() {
  if (key === ' ' && gameChar_y === groundY) {
    vy = -10; // 向上的速度，负号表示向上，绝对值越大跳得越高
  }
}

关键部分说明 #

• 全局变量：把角色位置、重力、速度、地面坐标放在全局，方便在setup()初始化和draw()循环中持续更新。
• 重力模拟：vy += gravity让角色下落速度逐渐加快，符合现实中重力的加速特性；gameChar_y += vy让角色位置随速度动态变化。
• 地面碰撞：当角色y坐标超过地面位置时，强制拉回地面并重置垂直速度，避免角色穿透地面或无限下落。
• 跳跃功能：通过keyPressed()监听空格键，只有角色站在地面时才触发跳跃，给一个负的垂直速度实现向上跳跃。

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