p5.js中使用if语句实现椭圆全屏循环移动问题求助

我帮你分析下代码里的问题：你现在的逻辑里，当椭圆走到右下角（屏幕底部右侧）时，会先触发y>=height的条件让x继续向右走，直接跑出屏幕右侧，之后才会开始向上移动，所以你看不到椭圆向上走的过程。另外不同方向的移动步长不一样（向左是12，其他是21），也会让循环的节奏混乱，甚至可能导致边缘判断出错。

咱们可以用两种方式修正，先看第一种更直观的状态判断写法：

var x;
var y;
var r = 33;
var speed = 4; // 统一速度，让移动更平滑

function setup() {
  createCanvas(660, 500);
  // 调整初始位置，让椭圆边缘刚好贴合屏幕右上角，避免一半在外面
  x = width - r/2;
  y = r/2;
}

function draw() {
  background("black");
  ellipse(x, y, r);

  // 左移阶段：从右上到左上
  if (x > r/2 && y === r/2) {
    x -= speed;
  }
  // 下移阶段：从左上到左下
  else if (x === r/2 && y < height - r/2) {
    y += speed;
  }
  // 右移阶段：从左下到右下
  else if (x < width - r/2 && y === height - r/2) {
    x += speed;
  }
  // 上移阶段：从右下到右上
  else if (x === width - r/2 && y > r/2) {
    y -= speed;
  }
}

这个写法的核心是：

• 用椭圆的半径校准边缘位置（因为椭圆坐标是中心，所以边缘到屏幕边界的距离是r/2）
• 用else if让每个移动阶段互斥，避免多个条件同时触发导致冲突
• 统一移动速度，让四个方向的节奏保持一致

如果觉得这种判断方式不够灵活，还可以用状态变量来管理当前移动方向，逻辑会更清晰：

var x;
var y;
var r = 33;
var speed = 4;
var direction = 'left'; // 初始方向设为向左

function setup() {
  createCanvas(660, 500);
  x = width - r/2;
  y = r/2;
}

function draw() {
  background("black");
  ellipse(x, y, r);

  switch(direction) {
    case 'left':
      x -= speed;
      // 到达左边缘后，切换为向下移动
      if (x <= r/2) {
        x = r/2; // 修正位置，避免超出屏幕
        direction = 'down';
      }
      break;
    case 'down':
      y += speed;
      if (y >= height - r/2) {
        y = height - r/2;
        direction = 'right';
      }
      break;
    case 'right':
      x += speed;
      if (x >= width - r/2) {
        x = width - r/2;
        direction = 'up';
      }
      break;
    case 'up':
      y -= speed;
      if (y <= r/2) {
        y = r/2;
        direction = 'left';
      }
      break;
  }
}

这个版本用direction变量跟踪当前移动方向，每次到达边缘就切换到下一个方向，后续如果要调整移动逻辑或者添加新方向，会非常方便。

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