如何在Phaser.js 3中实现碰撞检测？附代码求解决方案

要实现Codey和金币的碰撞检测，需要借助Phaser的Arcade物理系统，以下是修改后的完整代码及关键改动说明：

关键改动点 #

• 在游戏配置中启用Arcade物理系统
• 用物理精灵替代普通精灵，让对象具备物理属性
• 添加碰撞检测逻辑，处理碰撞后的行为

修改后的完整代码 #

var gameState = {};

function preload() {
  this.load.image('codey', 'https://content.codecademy.com/courses/learn-phaser/codey.png');
  this.load.image('coin', 'coin.png');
}

function create() {
  gameState.cursors = this.input.keyboard.createCursorKeys();
  // 改用物理精灵创建，赋予物理属性
  gameState.codey = this.physics.add.sprite(50, 50, 'codey');
  gameState.coin = this.physics.add.sprite(Math.floor(Math.random() * 301), Math.floor(Math.random() * 301), 'coin');
  
  // 绑定碰撞检测回调，当两个对象重叠时触发
  this.physics.add.overlap(gameState.codey, gameState.coin, collectCoin, null, this);
}

function update() {
  // 控制Codey移动
  if (gameState.cursors.down.isDown) {
    gameState.codey.y += 1;
  }
  if (gameState.cursors.up.isDown) {
    gameState.codey.y -= 1;
  }
  if (gameState.cursors.left.isDown) {
    gameState.codey.x -= 1;
  }
  if (gameState.cursors.right.isDown) {
    gameState.codey.x += 1;
  }
}

// 碰撞后的处理函数：重置金币位置
function collectCoin(codey, coin) {
  coin.setPosition(Math.floor(Math.random() * 301), Math.floor(Math.random() * 301));
}

const config = {
  width: 300,
  height: 300,
  backgroundColor: 0xdda0dd,
  // 启用Arcade物理系统
  physics: {
    default: 'arcade',
    arcade: {
      debug: false // 若开启debug会显示碰撞体边框，方便调试
    }
  },
  scene: {
    preload,
    create,
    update
  }
};

const game = new Phaser.Game(config);

说明 #

1. 启用物理系统：在config中添加physics配置，指定使用Arcade物理引擎，这是Phaser中最常用的轻量物理系统，适合2D休闲游戏。
2. 物理精灵创建：使用this.physics.add.sprite替代this.add.sprite，这样创建的精灵会自动拥有碰撞体等物理属性，才能被物理系统检测碰撞。
3. 碰撞检测绑定：this.physics.add.overlap用于检测两个对象是否重叠（即碰撞），当检测到碰撞时，会调用collectCoin函数，在这个函数里可以实现金币重置、加分等逻辑。
4. 调试选项：如果开启debug: true，游戏运行时会显示每个物理精灵的碰撞体边框，方便你直观查看碰撞范围是否符合预期。

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