Phaser多组子对象碰撞检测：Arcade Physics实现方案咨询

优先方案：Arcade Physics实现 #

Arcade Physics没有原生的“同时碰撞两组对象”检测API，但可以通过跟踪对象碰撞状态的方式实现需求。核心思路是给每个橙色对象添加状态标记，分别记录是否与粉色组、红色组对象接触，再通过检查标记组合触发逻辑。

实现步骤 #

1. 创建对象组并启用物理
   初始化三组对象，为每个组启用Arcade Physics，默认方形碰撞盒无需额外配置（若需自定义大小可调整setSize）。
2. 为橙色对象添加状态属性
   每个橙色对象新增isTouchingPink和isTouchingRed两个布尔属性，初始值为false。
3. 设置碰撞监听与状态更新
   分别为橙色组-粉色组、橙色组-红色组设置碰撞开始/结束的回调，更新对应状态标记。
4. 在Update中检查状态组合
   遍历橙色组对象，当两个状态标记同时为true时，执行目标逻辑。

代码示例 #

class GameScene extends Phaser.Scene {
    constructor() {
        super('GameScene');
    }

    preload() {
        // 预加载方块纹理（可替换为自定义资源）
        this.load.image('pinkSquare', 'assets/pink-square.png');
        this.load.image('redSquare', 'assets/red-square.png');
        this.load.image('orangeSquare', 'assets/orange-square.png');
    }

    create() {
        // 1. 创建三组对象
        this.pinkGroup = this.physics.add.group({
            key: 'pinkSquare',
            repeat: 2,
            setXY: { x: 100, y: 200, stepX: 200 }
        });

        this.redGroup = this.physics.add.group({
            key: 'redSquare',
            repeat: 2,
            setXY: { x: 150, y: 400, stepX: 200 }
        });

        this.orangeGroup = this.physics.add.group({
            key: 'orangeSquare',
            repeat: 3,
            setXY: { x: 200, y: 300, stepX: 150 }
        });

        // 2. 为橙色对象添加状态属性
        this.orangeGroup.getChildren().forEach(orange => {
            orange.isTouchingPink = false;
            orange.isTouchingRed = false;
        });

        // 3. 设置碰撞监听
        // 橙色-粉色碰撞
        this.physics.add.collider(this.orangeGroup, this.pinkGroup, 
            (orange) => orange.isTouchingPink = true, // 碰撞开始回调
            null,
            (orange) => orange.isTouchingPink = false // 碰撞结束回调
        );

        // 橙色-红色碰撞
        this.physics.add.collider(this.orangeGroup, this.redGroup, 
            (orange) => orange.isTouchingRed = true,
            null,
            (orange) => orange.isTouchingRed = false
        );
    }

    update() {
        // 4. 检查每个橙色对象是否同时接触两组
        this.orangeGroup.getChildren().forEach(orange => {
            if (orange.isTouchingPink && orange.isTouchingRed) {
                // 执行目标逻辑，比如改变颜色、触发事件等
                orange.setTint(0xffffff); // 示例：将橙色方块变白
            } else {
                orange.clearTint(); // 恢复原色
            }
        });
    }
}

// 初始化Phaser游戏
const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            debug: true // 开启物理调试，便于查看碰撞盒
        }
    },
    scene: [GameScene]
};

new Phaser.Game(config);

备选方案：Matter.js实现 #

如果需要更灵活的碰撞检测（比如直接获取所有碰撞对象），可以使用Matter.js。Matter支持直接获取对象的碰撞列表，通过遍历列表判断是否包含两个目标组的对象。

实现思路 #

1. 创建三组对象并启用Matter Physics，设置方形碰撞体。
2. 监听Matter的collisionstart和collisionend事件，跟踪每个橙色对象的碰撞集合。
3. 在Update中检查碰撞集合是否同时包含粉色组和红色组的对象。

代码示例 #

class GameScene extends Phaser.Scene {
    constructor() {
        super('GameScene');
    }

    preload() {
        this.load.image('pinkSquare', 'assets/pink-square.png');
        this.load.image('redSquare', 'assets/red-square.png');
        this.load.image('orangeSquare', 'assets/orange-square.png');
    }

    create() {
        // 启用Matter Physics
        this.matter.world.setBounds(0, 0, 800, 600);

        // 创建三组对象
        this.pinkGroup = this.matter.add.group({
            key: 'pinkSquare',
            repeat: 2,
            setXY: { x: 100, y: 200, stepX: 200 },
            shape: { type: 'rectangle', width: 64, height: 64 } // 方形碰撞体
        });

        this.redGroup = this.matter.add.group({
            key: 'redSquare',
            repeat: 2,
            setXY: { x: 150, y: 400, stepX: 200 },
            shape: { type: 'rectangle', width: 64, height: 64 }
        });

        this.orangeGroup = this.matter.add.group({
            key: 'orangeSquare',
            repeat: 3,
            setXY: { x: 200, y: 300, stepX: 150 },
            shape: { type: 'rectangle', width: 64, height: 64 }
        });

        // 为每个橙色对象添加碰撞集合
        this.orangeGroup.getChildren().forEach(orange => {
            orange.collidedBodies = new Set();
        });

        // 监听碰撞开始事件
        this.matter.world.on('collisionstart', (event) => {
            event.pairs.forEach(pair => {
                const { bodyA, bodyB } = pair;
                const orange = this.getOrangeObject(bodyA) || this.getOrangeObject(bodyB);
                const target = orange ? (bodyA === orange.body ? bodyB : bodyA) : null;

                if (orange && target) {
                    // 判断目标是否属于粉色或红色组
                    if (this.pinkGroup.contains(target.gameObject) || this.redGroup.contains(target.gameObject)) {
                        orange.collidedBodies.add(target);
                    }
                }
            });
        });

        // 监听碰撞结束事件
        this.matter.world.on('collisionend', (event) => {
            event.pairs.forEach(pair => {
                const { bodyA, bodyB } = pair;
                const orange = this.getOrangeObject(bodyA) || this.getOrangeObject(bodyB);
                const target = orange ? (bodyA === orange.body ? bodyB : bodyA) : null;

                if (orange && target) {
                    orange.collidedBodies.delete(target);
                }
            });
        });
    }

    // 辅助函数：判断是否为橙色组对象
    getOrangeObject(body) {
        return this.orangeGroup.contains(body.gameObject) ? body.gameObject : null;
    }

    update() {
        this.orangeGroup.getChildren().forEach(orange => {
            let hasPink = false;
            let hasRed = false;

            // 遍历碰撞集合，检查是否包含两组对象
            orange.collidedBodies.forEach(body => {
                if (this.pinkGroup.contains(body.gameObject)) hasPink = true;
                if (this.redGroup.contains(body.gameObject)) hasRed = true;
            });

            if (hasPink && hasRed) {
                // 执行目标逻辑
                orange.setTint(0xffffff);
            } else {
                orange.clearTint();
            }
        });
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'matter',
        matter: {
            debug: true
        }
    },
    scene: [GameScene]
};

new Phaser.Game(config);

内容的提问来源于stack exchange，提问作者Vatsa Pandey