Processing中实现4个独立方块垂直移动碰壁转向的无重复循环方法

嘿，我来帮你解决这个问题！既然已经能搞定单个方块的垂直移动+边缘反弹，那扩展到4个完全不需要写4遍重复代码——核心思路就是用数组来管理所有方块的状态，再配合循环统一处理更新和绘制逻辑就行。下面给你两种实用的实现方式，按需选择：

方式一：用类封装（推荐，易维护） #

这种方式把每个方块的属性和行为都封装成一个类，后续要加更多方块或者扩展功能（比如改变颜色、大小）都超级方便。

1. 定义方块类 #

先写一个Box类，把每个方块需要的位置、速度、大小，还有更新、绘制的方法都放进去：

class Box {
  float x; // 水平位置
  float y; // 垂直位置
  float speed; // 垂直移动速度
  float size; // 方块尺寸

  // 构造函数：初始化方块的初始状态
  Box(float startX, float startY, float startSpeed, float boxSize) {
    x = startX;
    y = startY;
    speed = startSpeed;
    size = boxSize;
  }

  // 更新位置+边缘反弹逻辑
  void update() {
    y += speed;
    // 碰到窗口顶部或底部时反转速度
    if (y <= 0 || y + size >= height) {
      speed *= -1;
    }
  }

  // 绘制方块
  void display() {
    rect(x, y, size, size);
  }
}

2. 初始化方块数组 #

在主代码里声明一个Box类型的数组，然后在setup()里创建4个不同的方块实例（可以给它们设不同的水平位置、初始速度，让移动效果更丰富）：

Box[] boxes; // 存储所有方块的数组

void setup() {
  size(400, 400);
  boxes = new Box[4]; // 数组长度设为4，对应4个方块
  
  // 逐个初始化方块，参数分别是：x位置、y初始位置、移动速度、尺寸
  boxes[0] = new Box(50, 100, 2, 40);
  boxes[1] = new Box(150, 50, -3, 35);
  boxes[2] = new Box(250, 200, 1.5f, 45);
  boxes[3] = new Box(320, 300, -2.5f, 30);
}

3. 循环处理所有方块 #

在draw()里只需要一个循环，遍历数组里的每个方块，调用它们的update()和display()方法就搞定了，完全没有重复代码：

void draw() {
  background(220); // 每次刷新画布
  
  // 遍历所有方块，统一更新+绘制
  for (int i = 0; i < boxes.length; i++) {
    boxes[i].update();
    boxes[i].display();
  }
}

方式二：平行数组（适合刚入门，不用类） #

如果还没接触过Processing的类，也可以用多个平行数组来分别存储每个方块的位置、速度、尺寸，同样能实现无重复代码：

// 定义4个数组，分别存储每个方块的x位置、y位置、速度、尺寸
float[] xPositions;
float[] yPositions;
float[] speeds;
float[] sizes;

void setup() {
  size(400, 400);
  // 初始化4个方块的各项属性
  xPositions = new float[]{50, 150, 250, 320};
  yPositions = new float[]{100, 50, 200, 300};
  speeds = new float[]{2, -3, 1.5f, -2.5f};
  sizes = new float[]{40, 35, 45, 30};
}

void draw() {
  background(220);
  
  // 循环处理每个方块
  for (int i = 0; i < 4; i++) {
    // 更新垂直位置
    yPositions[i] += speeds[i];
    // 边缘检测+反弹
    if (yPositions[i] <= 0 || yPositions[i] + sizes[i] >= height) {
      speeds[i] *= -1;
    }
    // 绘制方块
    rect(xPositions[i], yPositions[i], sizes[i], sizes[i]);
  }
}

两种方式都能完美实现你要的效果：4个独立方块垂直移动，碰到边缘自动转向，而且完全没有重复的代码。个人更推荐第一种类封装的方式，后续扩展功能会省心很多~

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