Phaser.js自动全屏后，如何实现用户点击X按钮退出全屏？

你的代码主要有三个问题导致退出全屏功能失效，修正后即可实现需求：

错误点分析 #

1. 方法名拼写错误：Phaser中退出全屏的正确方法是stopFullscreen（驼峰命名，F大写），你写的stopfullScreen是错误的。
2. this指向问题：直接把this.scale.stopFullscreen作为回调函数时，函数内部的this会丢失指向，无法正确调用方法。
3. 全屏状态判断错误：没有使用Phaser提供的this.scale.isFullscreen属性，而是错误地调用了不存在的全局isFullscreen()函数。

修正后的完整代码 #

// 保留自动进入全屏的代码
this.scale.startFullscreen();

// 创建右上角的退出按钮文本
this.add.text(750, 20, 'X', { fontSize: '20px', fill: '#000' });

// 创建覆盖按钮的可交互透明区域（提升点击范围）
this.exitFullScreen = this.add.rectangle(760, 30, 40, 40, 0x000000, 0);
this.exitFullScreen.setInteractive();

// 绑定点击退出事件，用箭头函数保证this指向当前场景
this.exitFullScreen.on('pointerup', () => {
    // 检查当前是否处于全屏状态
    if (this.scale.isFullscreen) {
        this.scale.stopFullscreen();
    }
});

额外优化说明 #

• 把可交互矩形设为透明（alpha=0），既不遮挡文本，又能提供足够的点击区域；
• 调整矩形坐标和大小，让它刚好覆盖X文本，避免用户点击空区域；
• 箭头函数确保回调内的this始终指向当前游戏场景，不会出现上下文丢失的问题。

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