如何使用p5.js实现按下空格键控制火柴人角色跳跃的功能？

核心原理 #

通过模拟基础物理效果实现自然跳跃：给角色添加垂直速度属性，按下空格时给一个向上的初速度，模拟重力的参数会持续把角色向下拉，碰到地面后停止下落，就可以实现和常见平台游戏一致的跳跃效果。

具体实现步骤 #

• 新增全局变量，存储跳跃相关的物理参数
  你需要在原有代码的变量区域新增4个变量，分别控制垂直速度、重力、跳跃力度、角色站在地面时的头部Y坐标：

  // 原有坐标变量
  let chX = 100;
  // 原初始chY=250需要修改为185，保证角色初始站在地面上
  let chY = 185;
  // 新增跳跃参数
  let velocityY = 0; // 垂直方向速度，负值代表向上移动，正值代表向下移动
  const gravity = 0.2; // 重力系数，数值越大下落速度越快，跳跃手感越沉重
  const jumpForce = -7; // 跳跃初速度，绝对值越大跳跃高度越高
  const groundY = 185; // 角色站在地面时的头部Y坐标：你的地面在y=300位置，角色脚到头高度为115，计算得300-115=185
  

• 添加空格键触发跳跃的事件逻辑
  新增p5.js内置的keyPressed函数，只有角色处于地面时才触发跳跃，避免出现空中多次跳跃的问题：

  function keyPressed() {
    // 空格键的keyCode为32，判断角色在地面时才赋予向上的初速度
    if (keyCode === 32 && chY === groundY) {
      velocityY = jumpForce;
    }
  }
  

• 在draw函数中更新垂直位置，处理重力和地面碰撞
  在原有左右移动判断的代码后面，新增以下逻辑，每一帧更新角色的垂直位置：

  // 应用重力，垂直速度持续增加
  velocityY += gravity;
  // 更新角色Y轴坐标
  chY += velocityY;
  // 地面碰撞检测，防止角色穿模到地面下方
  if (chY > groundY) {
    chY = groundY;
    velocityY = 0;
  }
  

修改后的完整可运行代码 #

let chX = 100;
let chY = 185;
let velocityY = 0;
const gravity = 0.2;
const jumpForce = -7;
const groundY = 185;

function setup() {
  createCanvas(800,400);
}

function draw() {
  background("#0c3c5e");
  noStroke();
  fill("#466D1D");
  rect(0,300,800,100);
  mainCharacter(chX,chY);
  if(keyDown('LEFT_ARROW')){
    chX = chX - 1;
  }
  if(keyDown('RIGHT_ARROW')){
    chX = chX + 1;
  }
  // 跳跃相关逻辑
  velocityY += gravity;
  chY += velocityY;
  if (chY > groundY) {
    chY = groundY;
    velocityY = 0;
  }
}

function keyPressed() {
  if (keyCode === 32 && chY === groundY) {
    velocityY = jumpForce;
  }
}

function mainCharacter(chX, chY){
  fill(255);
  stroke(0);
  rectMode(CENTER);
  rect(chX, chY + 49, 20, 50); //lichaam
  circle(chX, chY, 50); //hoofd
  line(chX - 30, chY + 20, chX - 10, chY + 40); //arm links
  line(chX + 10, chY + 40, chX + 30, chY + 20); //arm rechts
  line(chX - 10, chY + 75, chX - 10, chY + 115); //been links
  line(chX - 10, chY + 75, chX - 10, chY + 115); //been rechts
  line(chX + 10, chY + 75, chX + 10, chY + 115); //been rechts
  strokeWeight(5);
  point(chX - 10, chY);
  point(chX + 10, chY);
}

参数调整说明 #

你可以根据自己想要的手感调整参数：

• 增大gravity的数值，角色下落更快，跳跃更短促
• 减小gravity的数值，角色会有漂浮感，跳跃更轻盈
• 增大jumpForce的绝对值（比如改成-10），角色跳跃高度更高

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