В p5.js обеспечение того, чтобы прямоугольник оставался в пределах экрана, является общим требованием при разработке игр или интерактивной графики. В этой статье мы рассмотрим различные методы блокировки выхода прямоугольника за пределы экрана, попутно предоставляя примеры кода. Итак, давайте углубимся и освоим искусство включения прямоугольников в p5.js!

Метод 1: условное ограничение
Один простой подход — использовать условные операторы, чтобы проверить, выходит ли положение прямоугольника за границы экрана. Если это так, мы можем соответствующим образом отрегулировать положение, чтобы оно не выходило за пределы экрана. Вот пример:

let rectX = 100;
let rectY = 100;
let rectWidth = 50;
let rectHeight = 50;
function draw() {
  // ... other code ...

  // Check horizontal boundaries
  if (rectX < 0) {
    rectX = 0;
  } else if (rectX + rectWidth > width) {
    rectX = width - rectWidth;
  }
// Check vertical boundaries
  if (rectY < 0) {
    rectY = 0;
  } else if (rectY + rectHeight > height) {
    rectY = height - rectHeight;
  }
// Draw the rectangle at the updated position
  rect(rectX, rectY, rectWidth, rectHeight);
}

Метод 2: функция ограничения
p5.js предоставляет удобную функцию constrain(), которую можно использовать для ограничения значения в определенном диапазоне. Мы можем использовать эту функцию, чтобы гарантировать, что положение прямоугольника останется в пределах границ экрана. Вот пример:

let rectX = 100;
let rectY = 100;
let rectWidth = 50;
let rectHeight = 50;
function draw() {
  // ... other code ...

  // Constrain horizontal position
  rectX = constrain(rectX, 0, width - rectWidth);

  // Constrain vertical position
  rectY = constrain(rectY, 0, height - rectHeight);

  // Draw the rectangle at the updated position
  rect(rectX, rectY, rectWidth, rectHeight);
}

Метод 3: смещение с использованием минимальных и максимальных значений
Другой подход заключается в вычислении минимального и максимального значений, которыми должно быть ограничено положение прямоугольника, на основе границ экрана. Затем мы можем использовать эти значения для соответствующего смещения положения прямоугольника. Вот пример:

let rectX = 100;
let rectY = 100;
let rectWidth = 50;
let rectHeight = 50;
function draw() {
  // ... other code ...

  // Calculate minimum and maximum values
  let minX = 0;
  let maxX = width - rectWidth;
  let minY = 0;
  let maxY = height - rectHeight;

  // Offset the rectangle's position
  rectX = min(max(rectX, minX), maxX);
  rectY = min(max(rectY, minY), maxY);

  // Draw the rectangle at the updated position
  rect(rectX, rectY, rectWidth, rectHeight);
}

Предотвращение выхода прямоугольника за пределы экрана в p5.js имеет решающее значение для создания визуально привлекательного и удобного для пользователя интерфейса. В этой статье мы рассмотрели три метода достижения этой цели: условное ограничение с использованием функции constrain()и смещение с минимальными и максимальными значениями. Поэкспериментируйте с этими методами, чтобы найти тот, который лучше всего подходит для вашего проекта. Теперь у вас есть инструменты, которые помогут контролировать ваши прямоугольники!

Не забывайте учитывать границы экрана при разработке игр или интерактивной графики в p5.js. Используя эти методы ограничения прямоугольников, вы можете гарантировать, что ваши визуальные элементы останутся в поле зрения пользователя, улучшая общее впечатление.