如何获取矩形的x、y值并实现方块与矩形的碰撞检测？

1. 无法获取rect的x/y值的原因 #

你调用collision(rect(0,350,400,50))时，rect()是绘图函数（比如在p5.js这类常见图形库中），它的作用是直接在画布上绘制矩形，并不会返回一个包含x、y、宽高属性的对象。因此你传给collision函数的rext其实是无意义的（通常是undefined），自然无法通过rext.x或rext[0]获取参数。

2. 正确传递矩形参数的两种方式 #

方式一：拆分参数传递 #

修改函数接收矩形的x、y、宽、高四个独立参数，调用时先传参数再单独执行绘图：

function collision(rectX, rectY, rectW, rectH) {
  // 检测方块右边缘是否在矩形内部：右边缘 >= 矩形左边界 且 <= 矩形右边界
  const isRightEdgeInside = (x + 20) >= rectX && (x + 20) <= (rectX + rectW);
  // 检测方块下边缘是否在矩形内部：下边缘 >= 矩形上边界 且 <= 矩形下边界
  const isBottomEdgeInside = (y + 20) >= rectY && (y + 20) <= (rectY + rectH);

  if (isRightEdgeInside || isBottomEdgeInside) {
    print("矩形x坐标：", rectX);
    print("矩形y坐标：", rectY);
  }
}

// 调用逻辑：先传参数给碰撞检测，再单独调用rect绘图
collision(0, 350, 400, 50);
rect(0, 350, 400, 50);

方式二：封装成对象传递 #

把矩形参数打包成对象，统一传入函数，便于维护：

function collision(rectObj) {
  const isRightEdgeInside = (x + 20) >= rectObj.x && (x + 20) <= (rectObj.x + rectObj.w);
  const isBottomEdgeInside = (y + 20) >= rectObj.y && (y + 20) <= (rectObj.y + rectObj.h);

  if (isRightEdgeInside || isBottomEdgeInside) {
    print(rectObj.x, rectObj.y);
  }
}

// 定义矩形对象
const groundRect = { x: 0, y: 350, w: 400, h: 50 };
// 调用函数+执行绘图
collision(groundRect);
rect(groundRect.x, groundRect.y, groundRect.w, groundRect.h);

3. 更简便的完整碰撞检测方法 #

如果需要检测整个方块与矩形的碰撞（而非仅边缘），可以使用轴对齐矩形碰撞的标准逻辑，直接对比边界重叠情况：

// 假设方块尺寸为20x20，当前坐标为x、y
function checkFullCollision(rectX, rectY, rectW, rectH) {
  // 方块的四个边界
  const blockLeft = x;
  const blockRight = x + 20;
  const blockTop = y;
  const blockBottom = y + 20;

  // 矩形的四个边界
  const rectLeft = rectX;
  const rectRight = rectX + rectW;
  const rectTop = rectY;
  const rectBottom = rectY + rectH;

  // 碰撞条件：x轴和y轴同时存在重叠区域
  const xOverlap = blockRight > rectLeft && blockLeft < rectRight;
  const yOverlap = blockBottom > rectTop && blockTop < rectBottom;

  return xOverlap && yOverlap;
}

// 使用示例
if (checkFullCollision(0, 350, 400, 50)) {
  print("方块与矩形发生碰撞");
}

内容的提问来源于stack exchange，提问作者Dumb Programmer Guy Man