Phaser游戏碰撞检测失效：如何实现碰撞触发播放按钮显示

你当前的代码仅创建了碰撞检测的物理碰撞器，但未绑定碰撞发生时的自定义逻辑回调，因此两个图片碰撞后不会触发显示播放按钮的操作。以下是具体修复方案：

核心修改点 #

• 提前创建播放按钮并默认隐藏
• 为碰撞器添加碰撞回调函数，在碰撞触发时显示按钮
• 可选补充按钮的交互逻辑（如点击播放）

修复后的完整代码 #

const gameState = {}

function preload() {
  this.load.image('intro1','/images/Screenshot 2023-10-20 10.20.39 AM.png');
  this.load.image('intro2','/images/Screenshot 2023-10-20 10.23.58 AM.png');
  this.load.audio('madcityintro', '/audio/a357cdfe-4a46-452f-a536-c41f8d57f35c.mp3');
  // 若使用图片按钮，可在此预加载按钮资源：
  // this.load.image('playBtn', '/images/play-button.png');
}

function create() {
  gameState.madcitysound = this.sound.add('madcityintro')
  gameState.madcitysound.play()
  
  // 初始化两个移动的图片对象
  gameState.intro1 = this.physics.add.image(-100, 200, 'intro1')  
  gameState.intro1.setVelocityX(500);
  gameState.intro2 = this.physics.add.image(1230, 200, 'intro2') 
  gameState.intro2.setVelocityX(-500);

  // 创建播放按钮，默认隐藏
  // 这里用文本按钮示例，可替换为图片按钮
  gameState.playBtn = this.add.text(config.width/2, config.height/2, '播放', {
    fontSize: '32px',
    fill: '#fff',
    padding: {x: 20, y: 10},
    backgroundColor: '#0066ff'
  }).setOrigin(0.5).setInteractive().setVisible(false);

  // 按钮点击逻辑（可选）
  gameState.playBtn.on('pointerdown', () => {
    if(!gameState.madcitysound.isPlaying) {
      gameState.madcitysound.play();
    }
    // 也可添加跳转场景等其他逻辑
  });

  // 创建碰撞器并绑定回调函数
  this.physics.add.collider(gameState.intro1, gameState.intro2, handleCollision, null, this);
}

// 碰撞触发时执行的回调函数
function handleCollision(obj1, obj2) {
  // 可选：停止两个图片的移动
  obj1.setVelocityX(0);
  obj2.setVelocityX(0);
  // 显示播放按钮
  gameState.playBtn.setVisible(true);
}

function update(){
}

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

const game = new Phaser.Game(config);

关键细节说明 #

• this.physics.add.collider的第三个参数是碰撞触发时的回调函数，第四个参数this用于绑定场景上下文，确保函数内部能正常访问场景资源
• 按钮默认通过setVisible(false)隐藏，碰撞时调用setVisible(true)切换显示状态
• 若需要图片按钮，只需将add.text替换为add.image，并调整按钮的样式与交互逻辑即可

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