P5.js常量异常：方块无法固定位置，松开鼠标后消失

嘿，我来帮你搞定这个P5.js的小问题！你猜的没错——变量覆盖是一部分原因，但更核心的问题是你没有把生成的方块持久化存储起来，导致每次刷新帧的时候，旧的方块就被丢弃了，自然会跟着鼠标动、松开就消失。

问题根源拆解 #

你之前的代码应该是在draw()函数里调用shoot()，这样每一帧都会执行一次shoot：

• 每次shoot都重新声明一个方块变量，新的变量会覆盖旧的，而且这个变量只在当前帧有效；
• 因为每一帧都用当前鼠标位置创建方块，所以看起来方块在跟着鼠标跑；
• 松开鼠标后，shoot不再执行（或者你是用mouseIsPressed判断），没有新的方块生成，旧的也没被保留，就消失了。

解决方案：用数组持久化存储方块 #

我们只需要做三个关键修改：

1. 新增一个数组来保存所有生成的方块；
2. 只在鼠标按下的瞬间调用shoot生成方块，而不是每一帧都调用；
3. 在draw里遍历数组，把所有方块都画出来。

修改后的完整代码：

var clocker = 0; // NOT YET USED
var player = { x:400, y:400 };
// 新增：用数组存储所有生成的方块，确保它们不会随帧刷新丢失
var squares = [];

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

function draw() {
  background(220);
  // 绘制玩家（如果你的原代码有这部分的话）
  rect(player.x, player.y, 20, 20);
  
  // 遍历方块数组，逐个绘制所有已生成的方块
  for (let square of squares) {
    rect(square.x, square.y, 20, 20);
  }
}

// 只在鼠标按下的瞬间触发一次shoot，生成一个固定位置的方块
function mousePressed() {
  shoot(mouseX, mouseY);
}

function shoot(x, y) {
  // 把新方块对象添加到数组里，而不是声明临时变量覆盖
  squares.push({
    x: x,
    y: y
  });
}

关键部分解释 #

• squares数组：这个数组是所有方块的“仓库”，每次点击生成的新方块都会被存进去，不管多少帧过去，这些方块的位置数据都不会丢失；
• mousePressed事件：代替在draw里循环调用shoot，确保只有当你点击鼠标时才生成一个方块，不会每一帧都重复创建；
• draw里的遍历绘制：每一帧都会把数组里所有的方块重新画一遍，这样即使松开鼠标，之前生成的方块依然会显示在画布上。

如果你的原shoot函数还有其他逻辑（比如方块的大小、颜色设置），只需要把对应的属性加到push的对象里就行，核心思路就是用数组来持久化你需要保留的元素~

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