您可以封装可重用的功能，例如：

• 你可以存储矩形属性（x，y，w，h），以便在需要时使用单个调用重新绘制
• 你可以写一个可重用的函数来检查一个点是否在矩形内（而不是复制/粘贴修改条件）

根据您的舒适程度，有多种方法可以实现这一点。例如，你可以这样做：

• 将矩形属性存储在数组（[x,y,w,h]）（或Object（{x:200, y: 200, w:80, y:80}））中
• 一个可重用的函数，测试一个点是否在矩形内（数据来自上面）

let rect1 = {x:160, y:160, w:80, h:80}
let rect2 = {x:180, y:180, w:40, h:40};

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

function draw() {
  background(200);
  
  let isOver1 = isOverRectangle(mouseX, mouseY, rect1);
  let isOver2 = isOverRectangle(mouseX, mouseY, rect2);
  
  fill(isOver1 && !isOver2 ? 0 : 255);
  drawRectangle(rect1);
  fill(isOver2 ? 0 : 255);
  drawRectangle(rect2);
}

function isOverRectangle(mx, my, rectangle){
  return (mx >= rectangle.x && mx <= (rectangle.x + rectangle.w)) && 
         (my >= rectangle.y && my <= (rectangle.y + rectangle.h));
}

function drawRectangle(r){
  rect(r.x, r.y, r.w, r.h);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>

你也可以选择define a class：

class Rect{
  
  constructor(x, y, w, h){
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
  }
  
  draw(){
    rect(this.x, this.y, this.w, this.h);
  }
  
  isOver(mx, my){
    return (mx >= this.x && mx <= (this.x + this.w)) && 
           (my >= this.y && my <= (this.y + this.h));
  }
  
}

let rect1 = new Rect(160, 160, 80, 80);
let rect2 = new Rect(180, 180, 40, 40);

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

function draw() {
  background(200);
  
  let isOver1 = rect1.isOver(mouseX, mouseY);
  let isOver2 = rect2.isOver(mouseX, mouseY);
  
  fill(isOver1 && !isOver2 ? 0 : 255);
  rect1.draw();
  fill(isOver2 ? 0 : 255);
  rect2.draw();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>

对于两个矩形，你可能不需要一个for循环，但是如果你选择了封装，现在会让这变得更容易。这对你自己来说将是一个有趣的挑战，特别是制定出逻辑来检查哪些框可以忽略，并考虑更改填充颜色。玩得开心点！