如何使用 for 循环简化此代码？

Question

如何使用 for 循环更改此代码，以便我可以创建具有相同功能的更大的矩形？ 当我使用for循环时，当我指向较小的矩形时，较大的矩形也会改变颜色。我不能让它只属于我所指的矩形。谢谢。

let rectX = 200;
let rectY = 200;

let rect1Width = 80;
let rect1Height = 80;

let rect2Width = 40;
let rect2Height = 40;

let isMouseOverRect1 = false;
let isMouseOverRect2 = false;
let rect1 = false;
let rect2 = false;

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

function draw() {
  background(200);

  if (
    mouseX > rectX - rect1Width / 2 &&
    mouseX < rectX + rect1Width / 2 &&
    mouseY > rectY - rect1Height / 2 &&
    mouseY < rectY + rect1Height / 2
  ) {
    isMouseOverRect1 = true;
    rect1 = true;
  } else {
    isMouseOverRect1 = false;
    rect1 = false;
  }

  if (
    mouseX > rectX - rect2Width / 2 &&
    mouseX < rectX + rect2Width / 2 &&
    mouseY > rectY - rect2Height / 2 &&
    mouseY < rectY + rect2Height / 2
  ) {
    isMouseOverRect2 = true;
    rect2 = true;
  } else {
    isMouseOverRect2 = false;
    rect2 = false;
  }

  if (isMouseOverRect1 && !rect2) {
    fill(0);
  } else {
    fill(255);
  }
  rect(rectX, rectY, rect1Width, rect1Height);

  if (isMouseOverRect2 && rect1) {
    fill(0);
  } else {
    fill(255);
  }
  rect(rectX, rectY, rect2Width, rect2Height);
}

用for循环画图，功能相同。

Answer 1

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

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

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

• 将矩形属性存储在数组中(

  [x,y,w,h]

  )（或对象(

  {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>

或者你可以定义一个类：

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 循环，但是如果您选择封装，现在会变得更容易一些。这对你自己来说将是一个有趣的挑战，特别是找出逻辑来检查要忽略哪些框并考虑更改填充颜色。玩得开心！