p5.js JavaScript问题：实现方块向光标移动功能出错求助

嘿，我来帮你拆解下代码里的问题，让你的方块乖乖跟着光标走～你的代码里有几个关键的小失误，导致效果完全不符合预期：

问题1：每次刷新都重置方块位置 #

你在draw()函数里第一行就把x和y设成了画布中心：

x = width/2; y = height/2;

而p5.js的draw()本身是每秒自动循环60次的，这意味着每一次画面刷新，方块都会被强制拉回中心，根本没法积累移动的位置，自然追不上光标。

问题2：错误使用while循环 #

你加的while (!(x == mouseX && y == mouseY))完全没必要，甚至会搞崩动画逻辑：

• p5.js的draw()已经是循环了，不需要手动再加while循环
• 这个while会在单次draw调用里一次性执行完所有迭代，瞬间把方块“跳”到鼠标位置，而且因为浏览器主线程被占满，根本不会实时更新画面，你看到的一堆静态方块就是循环里一次性画出来的残留
• 另外，浮点数精度问题会让x == mouseX几乎永远不成立，循环会无限跑，直接卡死浏览器

问题3：变量初始化不规范 #

你的x、y变量一开始没有初始值，虽然draw()里会赋值，但放到setup()里初始化更稳妥，能避免第一次计算时出现NaN的问题。

修正后的代码 #

这里直接给你改好的版本，还优化了减速效果：

// 声明全局变量
let xspeed;
let yspeed;
let x;
let y;

function setup() {
  createCanvas(500, 500);
  // 初始化方块初始位置，只执行一次
  x = width / 2;
  y = height / 2;
}

function update() {
  // 计算速度：距离除以系数，系数越大，靠近光标时减速越明显
  xspeed = (mouseX - x) / 20;
  yspeed = (mouseY - y) / 20;
  // 更新方块位置
  x += xspeed;
  y += yspeed;
}

function draw() {
  background(255); // 每次刷新清屏，避免残留
  update(); // 更新方块位置
  rect(x, y, 10, 10); // 画出方块
}

修正逻辑说明 #

1. 初始化移到setup()：setup()只执行一次，方块初始位置只会被设置一次，不会被每次draw()重置
2. 去掉while循环：依靠draw()的自动循环实现平滑动画，每次刷新只更新一次位置、画一次方块
3. 调整减速系数：把原来的除数2改成20，这样方块离光标越近，速度会越慢，刚好符合你想要的“靠近时减速”效果，你可以自己调整这个数值（比如10或30），找到你喜欢的速度

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