如何阻止矩形离开屏幕使用 p5.js

在开发游戏或动画时，矩形或其他形状的物体需要在屏幕上移动，但有时它们可能离开屏幕，并且在游戏或动画中看起来很奇怪。 在这种情况下，我们需要阻止这些物体离开屏幕。 我们可以使用 p5.js 来实现这一点。

粗略的实现方法

我们为矩形设置 x 和 y 坐标，并且在 draw（）函数中更改这些坐标以移动矩形。 为了防止矩形离开屏幕，我们需要检查矩形的边界是否接触屏幕的边界。 如果矩形的边缘接触了屏幕的任何一侧，则需要将其坐标调整为留在屏幕内。

以下是一个快速示例代码：

let rectX = 50;
let rectY = 50;
let rectSize = 50;

function draw() {
  background(220);
  
  rect(rectX, rectY, rectSize, rectSize);
  
  rectX += 2;
  rectY += 2;
  
  if(rectX > width-rectSize){
    rectX = width-rectSize;
  }
  if(rectX < 0){
    rectX = 0;
  }
  if(rectY > height-rectSize){
    rectY = height-rectSize;
  }
  if(rectY < 0){
    rectY = 0;
  }
}

在这个示例中，我们使用变量 rectX 和 rectY 来存储矩形左上角的坐标， rectSize 存储矩形的大小。 在 draw（）函数中，我们使用 rect() 函数来绘制矩形，然后将 rectX 和 rectY 自增以移动矩形。 然后，我们使用一系列 if 语句来检查矩形是否离开屏幕，如果是，则将其坐标调整为留在屏幕内。

这种方法可以防止矩形离开屏幕，但是如果矩形速度快或者屏幕非常小，矩形可能会穿过屏幕边界，因此我们需要一种更精确的方法。

精确的实现方法

如上所述，用一个粗略的方法来防止矩形离开屏幕的方法是如果矩形接触到同一屏幕上的任何一侧，则将其坐标调整为留在屏幕内。 然而，在这个方法中，我们不检查矩形的每个角落是否都在屏幕内。这就是我们用更精确的方法来解决问题的原因。

以下是一个示例代码，这段代码使用了边框和碰撞检测:

let rectX = 50;
let rectY = 50;
let rectSize = 50;
let rectSpeedX = 2;
let rectSpeedY = 2;

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

function draw() {
  background(220);
  stroke(0);
  noFill();
  rect(0, 0, width, height);
  
  rectX += rectSpeedX;
  rectY += rectSpeedY;
  
  if(rectX < 0 || rectX > width - rectSize){
    rectSpeedX = -rectSpeedX;
  }
  if(rectY < 0 || rectY > height - rectSize){
    rectSpeedY = -rectSpeedY;
  }
  
  fill(255,0,0);
  rect(rectX, rectY, rectSize, rectSize);
}

在这个例子中，我们使用变量 rectSpeedX 和 rectSpeedY 来表示矩形在水平和垂直方向上的速度。 使用 setup() 函数来创建画布，并且在 draw() 函数中绘制矩形和屏幕边框。 使用该比例将矩形更改它的x，y值来移动它。 如果矩形超出屏幕边界则将速度变成负值，让它在下一步中反弹回来。 这种方法可以防止矩形离开屏幕，同时保证了较高的运动精度。

总结

本文展示了如何使用 p5.js 防止矩形或其他形状离开屏幕。 我们介绍了两种实现方法。 粗略的方法是在矩形接触屏幕上的任何一侧时将其坐标调整为留在屏幕内。 更精确的方法是使用矩形的四个角来检查，并且使用边框和碰撞检测来实现更高的精度。 您可以根据自己的需求和项目选择其中一种方法。