如何让程序持续监测score变量？Phaser框架JS开发问题

在Phaser框架中，要持续监测score变量并触发对应逻辑，核心是利用框架的帧循环机制或事件驱动模式，以下是两种可行方案：

方案一：利用场景update方法实现持续轮询 #

Phaser的场景update方法会在游戏的每一帧执行，天然适合用来持续检查变量状态：

class GameScene extends Phaser.Scene {
    constructor() {
        super('GameScene');
        this.score = 1;
        this.hasUpdatedImages = false; // 标记是否已执行过图片移动逻辑
    }

    create() {
        // 初始化玩家、星星、目标图片组等资源
        // 配置星星与玩家的碰撞检测
        this.physics.add.overlap(this.player, this.star, this.collectStar, null, this);
    }

    collectStar(player, star) {
        // 玩家移动到屏幕底部
        player.y = this.game.config.height - player.height / 2;
        this.score += 1;
    }

    update() {
        // 每帧检查score状态，且只执行一次图片移动逻辑
        if (this.score === 2 && !this.hasUpdatedImages) {
            // 批量设置图片的x坐标
            this.imageGroup.getChildren().forEach(img => {
                img.x = 1300;
            });
            this.hasUpdatedImages = true; // 标记已执行，避免重复操作
        }
    }
}

关键说明： #

• update方法是Phaser的核心循环，每帧都会触发，能实时捕捉score的变化
• 添加hasUpdatedImages标记是为了避免每帧重复执行图片移动逻辑，如果你需要多次响应score=2的状态，可以去掉这个标记

方案二：用自定义事件触发逻辑（高效响应状态变化） #

如果只需要在score变化时执行一次逻辑，使用事件驱动更高效，无需持续轮询：

class GameScene extends Phaser.Scene {
    constructor() {
        super('GameScene');
        this.score = 1;
    }

    create() {
        // 初始化资源与碰撞检测
        this.physics.add.overlap(this.player, this.star, this.collectStar, null, this);
        // 监听自定义的score变化事件
        this.events.on('score-updated', this.handleScoreChange, this);
    }

    collectStar(player, star) {
        player.y = this.game.config.height - player.height / 2;
        this.score += 1;
        // 触发score更新事件，传递最新score值
        this.events.emit('score-updated', this.score);
    }

    handleScoreChange(newScore) {
        if (newScore === 2) {
            this.imageGroup.getChildren().forEach(img => {
                img.x = 1300;
            });
            // 可选：如果只需响应一次，触发后移除事件监听
            this.events.off('score-updated', this.handleScoreChange, this);
        }
    }
}

关键说明： #

• 只有当score真正被修改时才触发事件，避免不必要的性能消耗
• 适合只需要响应一次状态变化的场景，若需要多次响应，可跳过移除事件监听的步骤

排查原有问题的关键点 #

1. 原有代码的执行时机问题：你之前的if (score == 2)可能只在create或某个单次执行的函数里运行，只会检查一次，后续score变化后不会再触发判断
2. 图片对象引用是否正确：确保你获取的图片组/单个图片对象是有效的，可通过console.log(this.imageGroup)确认对象是否存在
3. score值是否正确修改：在collectStar回调中添加console.log(this.score)，确认score确实被递增到了2

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