feat(menu) 完善菜单场景的功能与效果

This commit is contained in:
wvellichor committed 2026-01-20 01:58:58 +08:00
1 parent 6dbce8bdd5
commit cb5c7ac51b
5 files changed
+467 -13

No files matched your search

+59
View File
@@ -27,6 +27,8 @@ export default class GameScene extends Phaser.Scene {
// create方法:当场景创建时自动调用,用于初始化游戏元素
create() {
// 设置背景颜色
this.cameras.main.setBackgroundColor('#333333')
// === 0. 添加窗口大小变化监听 ===
// 监听浏览器窗口大小变化事件,当窗口大小改变时调用resizeGame方法
window.addEventListener('resize', this.resizeGame.bind(this));
@@ -102,6 +104,63 @@ export default class GameScene extends Phaser.Scene {
x: this.sys.game.config.width - 200 - 10, // 小地图在屏幕上的x坐标
y: 10 // 小地图在屏幕上的y坐标
});
// === 7. 添加菜单按钮 ===
// 添加返回菜单按钮
const menuButton = this.add.text(
20, // x坐标
20, // y坐标
'返回菜单', // 文本内容
{ fontSize: '16px', color: '#ffffff' } // 样式
).setOrigin(0, 0);
// 为返回菜单按钮添加点击区域
const menuClickArea = this.add.rectangle(
menuButton.x + menuButton.width / 2,
menuButton.y + menuButton.height / 2,
menuButton.width + 20,
menuButton.height + 10,
0x000000,
0 // 透明
).setOrigin(0.5, 0.5);
// 设置返回菜单按钮可交互
menuClickArea.setInteractive({ useHandCursor: true });
// 添加返回菜单按钮点击事件
menuClickArea.on('pointerdown', () => {
console.log('Return to menu clicked');
// 直接切换到菜单场景
this.scene.start('MenuScene');
});
// 添加进入boot菜单按钮
const bootButton = this.add.text(
20, // x坐标
60, // y坐标
'进入Boot菜单', // 文本内容
{ fontSize: '16px', color: '#ffffff' } // 样式
).setOrigin(0, 0);
// 为进入boot菜单按钮添加点击区域
const bootClickArea = this.add.rectangle(
bootButton.x + bootButton.width / 2,
bootButton.y + bootButton.height / 2,
bootButton.width + 20,
bootButton.height + 10,
0x000000,
0 // 透明
).setOrigin(0.5, 0.5);
// 设置进入boot菜单按钮可交互
bootClickArea.setInteractive({ useHandCursor: true });
// 添加进入boot菜单按钮点击事件
bootClickArea.on('pointerdown', () => {
console.log('Enter boot menu clicked');
// 直接切换到boot场景
this.scene.start('BootScene');
});
}
// update方法:每帧自动调用(约60次/秒),用于更新游戏状态