P5.js多对象碰撞检测技巧分享

golang学习网今天将给大家带来《P5.js多对象碰撞检测技巧与实现方法》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

1. 问题背景：多对象碰撞检测的挑战

在开发基于p5.js的Pong类游戏时，当游戏引入多于一套的“球-挡板”组合（例如，达到一定分数后增加额外的球和挡板）时，开发者可能会遇到一个常见的问题：碰撞检测不再按预期工作。具体表现为，初始的球只能与初始的挡板发生碰撞，而新增的球或挡板无法与原有的对象进行碰撞，反之亦然。

究其原因，这通常不是p5.collide2d库本身的问题，而是游戏对象设计和碰撞检测逻辑实现方式的问题。原始代码中，一个名为Thing的类被用来同时封装了玩家挡板、对手挡板和球的状态及行为。在Thing类的collide()方法中，碰撞检测仅针对该Thing实例所“拥有”的挡板和球进行，即：

// 原始代码中的碰撞检测片段
hit = collideRectRect(30, this.y, 1, this.f, this.w, this.h, 10, 10);

这里的this.y代表当前Thing实例的玩家挡板Y坐标，this.w和this.h代表当前Thing实例的球坐标。这意味着每个Thing实例只负责检查“自己的”挡板与“自己的”球之间的碰撞。当游戏中存在多个Thing实例时，它们各自独立地进行检测，导致了不同实例所代表的球和挡板之间无法互相检测到碰撞。

2. 核心问题分析：混合实体与局部检测

问题的根源在于对游戏实体的抽象不够清晰。一个Thing实例不应该同时代表一个玩家挡板、一个对手挡板和一个球。这种混合的设计模式（也称为“上帝对象”或“多重职责”）导致了以下问题：

• 职责混淆： Thing类承担了过多的职责，包括玩家输入处理、AI移动、球的物理行为以及碰撞检测，使得代码难以理解和维护。
• 状态耦合： 玩家挡板、对手挡板和球的状态紧密耦合在一个Thing实例中，使得独立管理和交互变得复杂。
• 局部碰撞检测： collide()方法仅基于当前实例的内部状态进行检测，无法实现全局的、所有对象之间的碰撞检测。例如，当有ThingA和ThingB两个实例时，ThingA.collide()只检测ThingA的挡板和ThingA的球，而ThingB.collide()只检测ThingB的挡板和ThingB的球，它们之间没有交叉检测。

为了解决这个问题，我们需要重新设计游戏实体的结构，并调整碰撞检测的逻辑。

3. 解决方案：分离实体与全局碰撞检测

解决多对象碰撞检测问题的关键在于以下两点：

1. 分离游戏实体： 将不同类型的游戏对象（如挡板和球）定义为独立的类，每个类只负责管理自身的状态和行为。
2. 实现全局碰撞检测： 在主游戏循环中，通过嵌套循环遍历所有可能的碰撞对，进行全面的碰撞检测。

3.1 重新设计游戏实体类

我们将原始的Thing类拆分为Paddle（挡板）类和Ball（球）类。

Paddle 类：

负责挡板的位置、尺寸、颜色和移动逻辑。可以添加一个isPlayer属性来区分玩家挡板和对手挡板。

class Paddle {
  constructor(x, y, w, h, isPlayer = false) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.isPlayer = isPlayer; // 标识是否为玩家挡板
    this.speed = 5; // 挡板移动速度
  }

  show() {
    noStroke();
    fill(255, 229, 236); // 挡板颜色
    rect(this.x, this.y, this.w, this.h);
  }

  move(ballY = null) { // ballY 用于对手AI的跟踪
    if (this.isPlayer) {
      // 玩家挡板通过键盘控制
      if (keyIsDown(DOWN_ARROW)) this.y += this.speed;
      if (keyIsDown(UP_ARROW)) this.y -= this.speed;
      this.y = constrain(this.y, 0, height - this.h); // 限制在画布内
    } else {
      // 对手挡板（AI）跟随球移动
      if (ballY !== null) {
        this.y = ballY - this.h / 2; // 简单AI：挡板中心对准球
        this.y = constrain(this.y, 0, height - this.h); // 限制在画布内
      }
    }
  }
}

Ball 类：

负责球的位置、尺寸、颜色、速度和移动逻辑。

class Ball {
  constructor(x, y, size, color) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.color = color;
    this.speedX = 5;
    this.speedY = 5;
  }

  show() {
    noStroke();
    fill(this.color); // 球的颜色
    rect(this.x, this.y, this.size, this.size);
  }

  move() {
    this.x += this.speedX;
    this.y += this.speedY;

    // 球与上下墙壁的碰撞反弹
    if (this.y < 0 || this.y > height - this.size) {
      this.speedY *= -1;
    }
  }

  // 检查球是否出界（未被挡住）
  isOutOfBounds() {
    return this.x < -this.size || this.x > width + this.size;
  }

  // 重置球的位置和速度
  reset() {
    this.x = width / 2;
    this.y = height / 2;
    this.speedX = 5;
    this.speedY = 5;
  }
}

3.2 实现全局碰撞检测逻辑

在setup()函数中，我们将创建独立的Paddle和Ball实例，并分别存储在paddles和balls数组中。在draw()函数中，我们将遍历这些数组，实现所有球与所有挡板之间的碰撞检测。

let paddles = []; // 存储所有挡板实例
let balls = [];   // 存储所有球实例
let s = 0;        // 游戏分数
let b = 0;        // 最高分数
let mode;         // 游戏模式
const STARTSCREEN = 1;
const GAME = 2;

function setup() {
  createCanvas(600, 600);
  rectMode(CORNER); // 设置矩形绘制模式为左上角

  // 创建玩家挡板 (x=20, y=居中, 宽10, 高60)
  paddles.push(new Paddle(20, height / 2 - 30, 10, 60, true));
  // 创建对手挡板 (x=width-30, y=居中, 宽10, 高60)
  paddles.push(new Paddle(width - 30, height / 2 - 30, 10, 60, false));

  // 创建初始球 (白色)
  balls.push(new Ball(width / 2, height / 2, 10, 'white'));

  mode = STARTSCREEN; // 初始游戏模式
}

function draw() {
  if (mode === STARTSCREEN) {
    startScreen();
  } else if (mode === GAME) {
    game();
  }
}

// 游戏开始画面（省略具体实现，与原代码类似）
function startScreen() {
  background(255, 194, 209);
  textAlign(CENTER);
  textSize(33);
  fill(255, 179, 198);
  text("CLICK TO START", width / 2, height / 2 + 10);
  fill(255, 229, 236);
  text("HIGH SCORE: " + b, width / 2, height / 6);
  textSize(50);
  text("PONG PERFECT", width / 2, height / 6 * 4.75);
}

function mousePressed() {
  if (mode === STARTSCREEN) {
    mode = GAME; // 点击开始游戏
  } else if (mode === GAME) {
    // 游戏中的点击事件（如果需要）
  }
}

function game() {
  background(255, 194, 209);
  // 绘制分数板和中线
  rectMode(CENTER);
  fill(255, 229, 236);
  rect(width/2, height / 8, 100

以上就是《P5.js多对象碰撞检测技巧分享》的详细内容，更多关于的资料请关注golang学习网公众号！