如何在 Phaser.js 中实现精灵碰撞检测与响应-js教程-PHP中文网

如何在 Phaser.js 中实现精灵碰撞检测与响应

本文详解如何使用 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 中手动修改坐标）：

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

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。