Phaser 教程：实现精灵面向运动方向并响应碰撞动态更新旋转

document.body.style = 'margin:0;'; // 移除默认边距

var config = {
    type: Phaser.AUTO,
    width: 800, // 游戏画布宽度
    height: 600, // 游戏画布高度
    physics: {
        default: 'arcade', // 使用Arcade物理系统
        arcade: {            
            gravity: { y: 0 }, // 禁用重力，使精灵自由移动
            debug: false // 设置为true可以在调试时显示物理体边界
        }
    },
    scene: { create, update } // 定义场景的create和update方法
}; 

function create () {
    // 在屏幕左上角添加一个提示文本
    this.add.text(10, 10, '精灵面向运动方向演示')
        .setScale(1.5)
        .setOrigin(0)
        .setStyle({fontStyle: 'bold', fontFamily: 'Arial', color: '#ffffff'});

    // 动态生成一个三角形纹理，用于表示方向
    let graphics  = this.make.graphics();
    graphics.fillStyle(0xffffff); // 白色填充
    // 创建一个尖端朝右的等腰三角形，尺寸为10x10像素
    graphics.fillTriangle(0, 0, 10, 5, 0, 10); 
    graphics.generateTexture('triangle_sprite', 10, 10); // 生成名为'triangle_sprite'的纹理

    // 创建一个精灵组
    this.photons = this.physics.add.group({
      key: "triangle_sprite", // 使用生成的三角形纹理
      repeat: 5, // 创建6个精灵（1个原始 + 5个重复）
      setXY: { x: 50, y: 50, stepX: 60 }, // 设置初始位置和间隔
    });

    // ... 后续代码将在这里添加
}

function update() {
    // 此处可添加全局游戏逻辑，例如相机控制、输入处理等
    // 如果有Phaser.Cameras.Controls.SmoothedKeyControl，可以在这里更新：
    // this.controls.update(delta); 
}

new Phaser.Game(config);

    this.photons.children.iterate(function (child) {
      child.body.bounce.set(1); // 设置弹力为1，使其在碰撞时完全反弹
      // 设置随机初始速度，使其在X和Y轴上以-200到200像素/秒的速度移动
      child.setVelocity(Phaser.Math.Between(-200, 200), Phaser.Math.Between(-200, 200)); 

      // 计算并设置初始旋转角度
      // Phaser.Math.Vector2(child.body.velocity) 从速度创建一个向量
      // .angle() 方法返回该向量与正X轴的夹角（弧度）
      let initialAngle = (new Phaser.Math.Vector2(child.body.velocity)).angle();
      child.setRotation(initialAngle); // Phaser的rotation属性使用弧度

      child.body.collideWorldBounds = true; // 启用精灵与世界边界的碰撞检测
      child.body.onWorldBounds = true; // 启用世界边界碰撞事件的触发
    });

    this.physics.world.on('worldbounds', (body, up, down, left, right) => {
        // body 参数是发生碰撞的物理体 (Phaser.Physics.Arcade.Body)
        // up, down, left, right 为布尔值，指示碰撞发生在哪一侧

        // 重新计算物理体的速度向量角度
        let newAngle = (new Phaser.Math.Vector2(body.velocity)).angle();
        // body.gameObject 引用了与该物理体关联的精灵对象，更新其旋转
        body.gameObject.setRotation(newAngle); 
    });

    this.physics.add.collider(this.photons, this.photons, (p1, p2) => {
        // p1 和 p2 是发生碰撞的两个精灵对象