如何在Processing中实现图像碰撞时调用自定义函数？

你这段代码的碰撞检测部分踩了两个新手常见坑：一是误把图像对象当成带位置属性的精灵，poma.x、cistell.x根本不是你绘制时的坐标；二是碰撞判断的逻辑完全不对。下面一步步帮你修正：

1. 用矩形碰撞检测替代距离计算 #

对于你的苹果和篮子这类矩形图像，**轴对齐矩形碰撞检测（AABB）**是最直观且简单的方案。只要两个矩形的边界满足以下四个重叠条件，就说明发生了碰撞：

• 苹果的右边界 > 篮子的左边界
• 苹果的左边界 < 篮子的右边界
• 苹果的下边界 > 篮子的上边界
• 苹果的上边界 < 篮子的下边界

2. 编写碰撞检测函数 #

先封装一个专门的函数来判断单个苹果和篮子是否碰撞：

function checkCollision(appleX, appleY, appleW, appleH, basketX, basketY, basketW, basketH) {
  // 计算各物体的边界坐标
  const appleRight = appleX + appleW;
  const appleLeft = appleX;
  const appleBottom = appleY + appleH;
  const appleTop = appleY;
  
  const basketRight = basketX + basketW;
  const basketLeft = basketX;
  const basketBottom = basketY + basketH;
  const basketTop = basketY;
  
  // 判断是否发生碰撞
  return appleRight > basketLeft && appleLeft < basketRight && appleBottom > basketTop && appleTop < basketBottom;
}

3. 在苹果循环中检测碰撞 #

遍历每个苹果时，调用上面的检测函数，一旦碰撞就触发你的自定义逻辑：

for (i = 0; i < 3; i = i + 1) {
  image(poma, x[i], y[i], 50, 50);
  y[i] = y[i] + 3;
  
  // 获取篮子的实时位置（随鼠标移动）
  const basketX = mouseX;
  const basketY = 440;
  
  // 检测当前苹果与篮子的碰撞
  if (checkCollision(x[i], y[i], 50, 50, basketX, basketY, 100, 100)) {
    handleCollision(i); // 调用自定义碰撞处理函数，传入苹果索引
  }
  
  // 苹果落地后重置位置
  if (y[i] > 440) {
    y[i] = 0;
    x[i] = int(random(0, 400));
  }
}

4. 自定义碰撞处理逻辑 #

写一个专门的函数来处理碰撞后的行为，比如重置苹果位置、加分等：

function handleCollision(appleIndex) {
  print("接住苹果啦！");
  // 把当前苹果重置到顶部随机位置
  y[appleIndex] = 0;
  x[appleIndex] = int(random(0, 400));
  // 后续可在这里添加分数增加、音效播放等逻辑
}

完整修改后的代码 #

var arbol;
var poma;
var pomaicono;
var cistell;
var y = [];
var x = [];
var v = [];
let font;

function setup() {
  createCanvas(400, 550);
  arbol = loadImage ("ARBOL.png");
  poma = loadImage ("POMA.png");
  pomaicono = loadImage ("POMA.png");
  cistell = loadImage ("CISTELL.png");
  font = loadFont ("dogica.otf");
  
  for (i = 0; i < 3; i = i + 1) {
    x[i] = int(random(0, 400));
    y[i] = int(random(0, 400));
  }
}

function draw() {
  background(65,105,255);
  image (arbol, 120, -320, 500, 500);
  image (arbol, -200, -320, 500, 500);
  image (cistell, mouseX, 440, 100, 100);
  image (pomaicono, 10,10,30,30);
  
  textFont(font);
  fill(220);
  textSize (25);
  stroke(0);
  strokeWeight(3);
  text("x1",47,37);
  
  for (i = 0; i < 3; i = i + 1) {
    image(poma, x[i], y[i], 50, 50);
    y[i] = y[i] + 3;
    
    // 检测碰撞
    const basketX = mouseX;
    const basketY = 440;
    if (checkCollision(x[i], y[i], 50, 50, basketX, basketY, 100, 100)) {
      handleCollision(i);
    }
    
    if (y[i] > 440) {
      y[i] = 0;
      x[i] = int(random(0, 400));
    }
  }
}

// 碰撞检测工具函数
function checkCollision(appleX, appleY, appleW, appleH, basketX, basketY, basketW, basketH) {
  const appleRight = appleX + appleW;
  const appleLeft = appleX;
  const appleBottom = appleY + appleH;
  const appleTop = appleY;
  
  const basketRight = basketX + basketW;
  const basketLeft = basketX;
  const basketBottom = basketY + basketH;
  const basketTop = basketY;
  
  return appleRight > basketLeft && appleLeft < basketRight && appleBottom > basketTop && appleTop < basketBottom;
}

// 自定义碰撞处理函数
function handleCollision(appleIndex) {
  print("接住苹果啦！");
  y[appleIndex] = 0;
  x[appleIndex] = int(random(0, 400));
  // 可扩展：分数增加、音效播放等
}

关键提醒 #

• 不要用poma.x这类方式获取位置，loadImage返回的图像对象没有x/y属性，你调用image()时传入的x[i]、mouseX才是真正的绘制坐标。
• 把碰撞逻辑拆成独立函数，不仅代码更清晰，后续扩展功能也更方便。

内容的提问来源于stack exchange，提问作者Berta Martínez Gil