本文详解如何使用 phaser 3 的 arcade 物理系统检测两个精灵间的碰撞，并在接触时停止运动，涵盖物理启用、碰撞器配置、速度控制及调试技巧。
本文详解如何使用 phaser 3 的 arcade 物理系统检测两个精灵间的碰撞，并在接触时停止运动，涵盖物理启用、碰撞器配置、速度控制及调试技巧。
在 Phaser.js 中，仅靠手动更新 x 坐标（如 sprite.x += speed）无法触发内置碰撞检测——因为此时精灵未启用物理体（Physics Body），属于“纯渲染对象”。要实现“相撞即停”，必须启用 Arcade 物理系统，并使用 this.physics.add.collider() 建立可响应的碰撞关系。
✅ 正确做法：启用物理体 + 添加碰撞器
首先确保配置中启用了 Arcade 物理（您原代码已具备，但需补充关键设置）：
const config = {
type: Phaser.AUTO,
width: 800,
height: 500,
backgroundColor: "b9eaff",
physics: {
default: 'arcade',
arcade: {
gravity: { y: 0 }, // 水平碰撞无需重力，设为 0 更清晰
debug: false // 开发时可设为 true 查看碰撞体边界（绿色框）
}
},
scene: { preload, create, update }
};在 create() 中，必须使用 this.physics.add.sprite()（而非 this.add.sprite()）创建带物理体的精灵，并为其设置速度（而非在 update 中手动修改坐标）：
function create() {
// 启用物理体的精灵（自动获得 body）
gameState.m = this.physics.add.sprite(-179, 200, 'intro1');
gameState.w = this.physics.add.sprite(989, 200, 'intro2');
// 设置水平初速度（正向右，负向左）
gameState.m.setVelocityX(7);
gameState.w.setVelocityX(-7);
// 关键：添加碰撞器 —— 相撞时自动调用回调（默认停止运动）
this.physics.add.collider(gameState.m, gameState.w, handleCollision, null, this);
}
// 可选：自定义碰撞回调，实现“双方停止”
function handleCollision(sprite1, sprite2) {
sprite1.setVelocity(0); // 清零速度
sprite2.setVelocity(0);
// 也可添加视觉反馈，如闪烁或音效
}⚠️ 注意事项与常见误区
- 勿混用物理与手动坐标更新：一旦启用物理体，应避免在 update() 中直接修改 sprite.x 或 sprite.y，否则会绕过物理引擎，导致 collider 失效。所有运动应通过 setVelocity()、setAcceleration() 或 body.allowGravity = false 等物理 API 控制。
- debug: true 是调试利器：开启后可在浏览器中直观看到每个精灵的碰撞盒（AABB 边界），确认尺寸是否合理（默认匹配纹理大小，可通过 body.setSize(w, h) 调整）。
- 碰撞器是“守卫者”：collider(a, b) 不仅检测碰撞，还会在碰撞发生时自动解决穿透（即分离重叠物体），并触发回调。若只需检测不响应（如触发事件但不阻止穿透），请改用 overlap()。
- 音频与资源加载：您的 preload() 已正确加载图像与音频，但注意：.mp3 文件需确保 MIME 类型支持，且建议在 create() 中调用 sound.play() 前检查 sound.isReady。
✅ 最终效果验证
当两个精灵因速度相向运动而接触时：
- Arcade 物理引擎自动检测碰撞；
- collider 触发 handleCollision 回调；
- 双方速度被置零，运动立即停止，不再相互穿透。
? 提示：如需更复杂行为（如反弹、伤害计算、粒子特效），可在 handleCollision 回调中扩展逻辑。官方示例库（Phaser Physics Demos）提供了从基础到高级的完整参考。
通过以上改造，您的双图碰撞将真正“看得见、停得住、可扩展”。
