diff --git a/config/gameConfig.js b/config/gameConfig.js index 8c72703..3407e37 100644 --- a/config/gameConfig.js +++ b/config/gameConfig.js @@ -2,19 +2,15 @@ export default { // 游戏渲染类型:Phaser.AUTO表示自动选择最佳渲染方式(WebGL或Canvas) type: Phaser.AUTO, - // 游戏窗口宽度:设置为浏览器窗口的宽度 - width: window.innerWidth, - // 游戏窗口高度:设置为浏览器窗口的高度 - height: window.innerHeight, // 游戏背景颜色:使用十六进制颜色值设置为天蓝色 - backgroundColor: '#87ceeb', + backgroundColor: '#bbbbbb', // 输入系统配置 input: { // 启用多点触控支持 multiTouch: true, // 触摸事件捕获配置 touch: { - // 捕获触摸事件,防止事件冒泡 + // 捕获触摸事件,防止事件冒泡,阻止浏览器默认触摸行为(如页面滚动) capture: true } }, @@ -36,8 +32,6 @@ export default { mode: Phaser.Scale.RESIZE, // 自动居中:Phaser.Scale.NO_CENTER表示不自动居中游戏窗口 autoCenter: Phaser.Scale.NO_CENTER, - // 扩展父容器:true表示游戏会扩展到父容器的大小 - expandParent: true, // 缩放后的宽度:设置为浏览器窗口宽度 width: window.innerWidth, // 缩放后的高度:设置为浏览器窗口高度 diff --git a/main.js b/main.js index dc6c167..a6014ee 100644 --- a/main.js +++ b/main.js @@ -32,6 +32,8 @@ import FarmingTestScene from './scenes/testScenes/FarmingTestScene.js'; import SkillTestScene from './scenes/testScenes/SkillTestScene.js'; // 导入攻击技能测试场景 import AttackSkillTestScene from './scenes/testScenes/AttackSkillTestScene.js'; +// 导入菜单场景 +import MenuScene from './scenes/MenuScene.js'; // 创建游戏的最终配置对象 const config = { @@ -41,6 +43,7 @@ const config = { // 指定游戏使用的场景列表,包括主场景和所有测试场景 scene: [ BootScene, + MenuScene, GameScene, KeyboardMovementTestScene, TargetMovementTestScene, diff --git a/scenes/BootScene.js b/scenes/BootScene.js index a0a0d4c..2f87d88 100644 --- a/scenes/BootScene.js +++ b/scenes/BootScene.js @@ -1,6 +1,3 @@ -// 启动场景:用于选择进入不同的测试场景 -import GameScene from './GameScene.js'; - export default class BootScene extends Phaser.Scene { constructor() { super({ key: 'BootScene' }); @@ -36,7 +33,8 @@ export default class BootScene extends Phaser.Scene { { key: 'SelectionAndMovementTestScene', name: '测试场景3:单位选择与移动命令' }, { key: 'TargetMovementTestScene', name: '测试场景2:目标点移动' }, { key: 'KeyboardMovementTestScene', name: '测试场景1:相对移动(键盘控制)' }, - { key: 'GameScene', name: '返回主游戏场景' } + { key: 'GameScene', name: '返回主游戏场景' }, + { key: 'MenuScene', name: '返回菜单场景' } ]; // 滚动容器配置 @@ -157,17 +155,19 @@ export default class BootScene extends Phaser.Scene { this.scrollY = 0; // 最大滚动位置 this.maxScrollY = contentHeight - containerHeight; + // 容器初始Y位置 + const initialContainerY = this.scrollContainer.y; // 添加鼠标滚轮事件 this.input.on('wheel', (pointer, gameObjects, deltaX, deltaY, deltaZ) => { - // 计算新的滚动位置 + // 计算新的滚动位置(向下滚动为正,应该增加 scrollY) this.scrollY += deltaY * 0.5; // 调整滚动速度 // 限制滚动范围 this.scrollY = Math.max(0, Math.min(this.scrollY, this.maxScrollY)); - // 应用滚动 - this.scrollContainer.setPosition(this.scrollContainer.x, this.scrollContainer.y - this.scrollContainer.list[0].y + this.scrollY); + // 应用滚动(容器Y = 初始Y - scrollY,确保向下滚动时容器向上移动) + this.scrollContainer.setPosition(this.scrollContainer.x, initialContainerY - this.scrollY); }); // 添加触摸滚动支持 @@ -183,14 +183,14 @@ export default class BootScene extends Phaser.Scene { if (isDragging) { const deltaY = pointer.y - lastY; - // 计算新的滚动位置 - this.scrollY -= deltaY * 0.5; // 调整滚动速度 + // 计算新的滚动位置(手指向下移动时,应该增加 scrollY) + this.scrollY += deltaY * 0.5; // 调整滚动速度 // 限制滚动范围 this.scrollY = Math.max(0, Math.min(this.scrollY, this.maxScrollY)); - // 应用滚动 - this.scrollContainer.setPosition(this.scrollContainer.x, this.scrollContainer.y - this.scrollContainer.list[0].y + this.scrollY); + // 应用滚动(容器Y = 初始Y - scrollY) + this.scrollContainer.setPosition(this.scrollContainer.x, initialContainerY - this.scrollY); lastY = pointer.y; } diff --git a/scenes/MenuScene.js b/scenes/MenuScene.js new file mode 100644 index 0000000..efe592f --- /dev/null +++ b/scenes/MenuScene.js @@ -0,0 +1,28 @@ +export default class MenuScene extends Phaser.Scene { + constructor() { + super('MenuScene') + } + + create() { + // 设置背景颜色 + this.cameras.main.setBackgroundColor('#333333') + // 获取主相机对象 + const cam = this.cameras.main; + + // 添加菜单文本 + this.add.text( + cam.centerX/5, // 文本在x轴上的位置,相机中心的1/5 + cam.centerY/5, // 文本在y轴上的位置,相机中心的1/5 + 'CINC', + { fontSize: '64px', color: '#ffffff' } + ).setOrigin(0.5, 0.5); + + this.add.rectangle( + cam.centerX/5, // 矩形在x轴上的位置,相机中心的1/5 + cam.centerY, // 矩形在y轴上的位置,相机中心的1/5 + 10, // 矩形的宽度 + 10, // 矩形的高度 + 0xffffff // 矩形的颜色,这里是白色 + ).setOrigin(0.5, 0.5); + } +} \ No newline at end of file diff --git a/scenes/testScenes/AttackSkillTestScene.js b/scenes/testScenes/AttackSkillTestScene.js index 4fd7996..006a2c3 100644 --- a/scenes/testScenes/AttackSkillTestScene.js +++ b/scenes/testScenes/AttackSkillTestScene.js @@ -52,7 +52,7 @@ export default class AttackSkillTestScene extends Phaser.Scene { // 获取Canvas的2D绘图上下文 const ctx = canvas.getContext('2d'); - ctx.fillStyle = '#000000ff'; // 设置填充颜色为完全不透明的黑色 + ctx.fillStyle = '#7d2100ff'; // 设置填充颜色 ctx.beginPath(); // 开始绘制路径 // 绘制一个圆形:圆心(16,16),半径14,从0到2π(完整圆形) ctx.arc(16, 16, 14, 0, Math.PI * 2);