Phaser转盘自动旋转及同一页面多转盘显示问题求助

问题1：页面加载完成后自动旋转转盘 #

直接在playGame场景的create方法末尾添加自动触发旋转的逻辑即可，场景创建完成后资源已加载完毕，初始状态canSpin为true，可以直接调用旋转方法：

create(){
    // ... 保留原有所有代码 ...

    // 绑定点击旋转事件
    this.input.on("pointerdown", this.spinWheel, this);

    // 页面加载完成后自动启动旋转
    this.spinWheel();
}

如果想要更自然的延迟效果（比如等待1秒再旋转），可以用Phaser的计时器替代直接调用：

// 替换上面的this.spinWheel();
this.time.delayedCall(1000, this.spinWheel, [], this);

问题2：支持多转盘/指定角度旋转/连续旋转两次 #

方案1：修改现有代码支持指定角度旋转 #

改造spinWheel方法，让它可以接受自定义的degrees参数（不传则保持随机逻辑）：

spinWheel(targetDegrees = null){
    if(this.canSpin){
        this.prizeText.setText("");

        // 保持2-4圈的基础旋转量
        var rounds = Phaser.Math.Between(2, 4);
        // 优先使用传入的指定角度，无参数则随机
        var degrees = targetDegrees !== null ? targetDegrees : Phaser.Math.Between(0, 360);

        var prize = gameOptions.slices - 1 - Math.floor(degrees / (360 / gameOptions.slices));
        this.canSpin = false;

        this.tweens.add({
            targets: [this.wheel],
            angle: 360 * rounds + degrees,
            duration: gameOptions.rotationTime,
            ease: "Cubic.easeOut",
            callbackScope: this,
            onComplete: function(tween){
                this.prizeText.setText(gameOptions.slicePrizes[prize]);
                this.canSpin = true;
            }
        });
    }
}

方案2：实现连续旋转两次 #

在第一次旋转完成的回调里触发第二次旋转，比如第一次随机、第二次指定角度：

// 修改spinWheel方法中的onComplete回调
onComplete: function(tween){
    this.prizeText.setText(gameOptions.slicePrizes[prize]);
    this.canSpin = true;
    // 延迟1秒后触发第二次旋转，指定角度为90度（对应第三个奖品）
    this.time.delayedCall(1000, this.spinWheel, [90], this);
}

方案3：页面显示多个独立转盘 #

将每个转盘封装为独立组件，存储各自的状态（避免互相干扰），示例代码如下：

class playGame extends Phaser.Scene{
    constructor(){
        super("PlayGame");
        // 存储所有转盘的状态数据
        this.wheelInstances = [];
    }

    create(){
        // 创建左侧转盘
        this.createSingleWheel(150, game.config.height/2, "left-wheel");
        // 创建右侧转盘
        this.createSingleWheel(400, game.config.height/2, "right-wheel");

        // 自动旋转左侧转盘
        this.spinWheelById("left-wheel");
        // 延迟2秒后旋转右侧转盘，指定角度180度
        this.time.delayedCall(2000, () => this.spinWheelById("right-wheel", 180), [], this);
    }

    // 创建单个转盘的方法
    createSingleWheel(x, y, wheelId){
        const wheelSprite = this.add.sprite(x, y, "wheel");
        const pinSprite = this.add.sprite(x, y, "pin");
        const prizeText = this.add.text(x, y + 280, "Spin the wheel", {
            font: "bold 20px Arial",
            align: "center",
            color: "white"
        });
        prizeText.setOrigin(0.5);

        // 存入转盘状态
        this.wheelInstances.push({
            id: wheelId,
            wheel: wheelSprite,
            text: prizeText,
            canSpin: true
        });
    }

    // 根据ID旋转指定转盘，支持传入角度
    spinWheelById(wheelId, targetDegrees = null){
        const wheelData = this.wheelInstances.find(item => item.id === wheelId);
        if(!wheelData || !wheelData.canSpin) return;

        wheelData.text.setText("");
        const rounds = Phaser.Math.Between(2, 4);
        const degrees = targetDegrees !== null ? targetDegrees : Phaser.Math.Between(0, 360);
        const prizeIndex = gameOptions.slices - 1 - Math.floor(degrees / (360 / gameOptions.slices));

        wheelData.canSpin = false;
        this.tweens.add({
            targets: [wheelData.wheel],
            angle: 360 * rounds + degrees,
            duration: gameOptions.rotationTime,
            ease: "Cubic.easeOut",
            callbackScope: this,
            onComplete: function(){
                wheelData.text.setText(gameOptions.slicePrizes[prizeIndex]);
                wheelData.canSpin = true;
            }
        });
    }
}

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