如何通过用户输入实现P5画布内对象的持续移动？

你的代码出现运行问题的核心原因有三个：

• keyPressed回调中写的while(true)无限循环直接阻塞了p5.js的单线程执行，整个程序会卡在这个死循环里，负责渲染的draw函数完全没有执行机会
• 仅用单个value变量控制位移，无法实现上下左右四个方向的独立移动
• 3参数的translate是WebGL 3D模式下的用法，2D场景下不需要第三个参数，两次translate叠加也会导致位移计算不符合预期

我们可以用两个独立变量分别控制X轴、Y轴的位移，依托p5.js内置的keyIsDown判断来实现按住方向键连续移动的效果，不需要额外写循环逻辑，完全适配p5.js的自带渲染周期。

完整可运行代码 #

// 分别控制X轴、Y轴的位移量
let x = 200;
let y = 200;
// 每次移动的步长
const step = 5;

function setup() {
  createCanvas(400, 400);
  rectMode(CENTER);
}

function draw() {
  // 每次渲染先清屏
  background(200);
  
  // 判断按键状态更新位移
  if(keyIsDown(LEFT_ARROW)) {
    x -= step;
  }
  if(keyIsDown(RIGHT_ARROW)) {
    x += step;
  }
  if(keyIsDown(UP_ARROW)) {
    y -= step;
  }
  if(keyIsDown(DOWN_ARROW)) {
    y += step;
  }
  
  // 绘制矩形
  rect(x, y, 20, 20);
}

代码说明 #

• 用x、y两个变量分别记录矩形的中心坐标，初始放在画布中心
• keyIsDown是p5.js内置的状态判断函数，可以直接检测对应按键是否处于按住状态，写在draw循环里每帧都会检测，自然实现按住按键连续移动的效果
• 不需要额外的事件回调或者循环逻辑，完全贴合p5.js的执行机制，运行流畅不会卡顿
• 如果想要实现按一次按键移动一次的效果，只需要把按键判断逻辑移到keyPressed回调里即可，不需要修改其他部分

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