Phaser.js中实现精灵碰撞后停止的问题求助

你的问题核心在于未给精灵启用物理体，且没有配置碰撞检测逻辑。Phaser的Arcade物理系统需要明确将精灵纳入物理世界才能触发碰撞，下面是具体修复步骤：

关键改动点 #

• 用this.physics.add.sprite()替代this.add.sprite()创建精灵，让精灵拥有物理属性
• 关闭不必要的重力（你的场景不需要Y方向重力）
• 添加碰撞检测器，并绑定碰撞回调函数来停止精灵移动
• 改用物理系统的速度控制（setVelocityX）替代直接修改x坐标，让碰撞逻辑能正确干预移动

修复后的完整代码 #

function preload(){
    this.load.image('intro2', '/images/Screenshot 2023-10-20 10.23.58 AM.png');
    this.load.image('intro1', '/images/Screenshot 2023-10-20 10.20.39 AM.png');
    this.load.audio('madcityintro','/sounds/mad city intro.mp3' );
}

function create(){
    gameState.m = this.physics.add.sprite(-179, 200, 'intro1')
        .setGravityY(0); // 关闭Y方向重力
    gameState.mad = this.sound.add('madcityintro');
    gameState.mad.play(); 
    gameState.w = this.physics.add.sprite(989, 200, 'intro2')
        .setGravityY(0); // 关闭Y方向重力

    // 添加碰撞检测器，绑定碰撞回调
    this.physics.add.collider(gameState.m, gameState.w, handleCollision, null, this);
    gameState.isCollided = false;
}  

function update(){
    // 仅在未碰撞时保持移动
    if (!gameState.isCollided) {
        gameState.m.setVelocityX(7);
        gameState.w.setVelocityX(-7);
    }
}

// 碰撞回调函数：停止两个精灵的移动
function handleCollision() {
    gameState.isCollided = true;
    gameState.m.setVelocityX(0);
    gameState.w.setVelocityX(0);
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 500,
    backgroundColor: "b9eaff",
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 200 },
            enableBody: true,
        }
    },
    scene: {
        preload,
        create,
        update
    }
};

const game = new Phaser.Game(config);

额外说明 #

• enableBody: true是全局默认设置，但手动创建精灵时仍需用physics.add.sprite才能真正启用物理体
• 碰撞回调函数里可以扩展更多逻辑，比如播放碰撞音效、触发动画等
• 如果不需要全局重力，也可以直接在config的physics.arcade里把gravity.y设为0，避免每个精灵单独设置

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