feat(item) 优化移动及添加测试场景

This commit is contained in:
chicrobot committed 2026-01-04 00:55:48 +08:00
1 parent 2f7210f47e
commit b9a5180293
15 files changed
+1428 -62

No files matched your search

+80
View File
@@ -0,0 +1,80 @@
// 启动场景:用于选择进入不同的测试场景
import GameScene from './GameScene.js';
export default class BootScene extends Phaser.Scene {
constructor() {
super({ key: 'BootScene' });
}
create() {
// 设置背景色
this.cameras.main.setBackgroundColor('#000000');
// 添加标题文本
this.add.text(this.sys.game.config.width / 2, 100, '测试场景菜单', {
fontSize: '32px',
fill: '#ffffff',
fontFamily: 'Arial'
}).setOrigin(0.5, 0.5);
// 测试场景列表
const testScenes = [
{ key: 'MovementTestScene1', name: '测试场景1:相对移动(键盘控制)' },
{ key: 'MovementTestScene2', name: '测试场景2:目标点移动' },
{ key: 'MovementTestScene3', name: '测试场景3:单位选择与移动命令' },
{ key: 'MovementTestScene4', name: '测试场景4:虚拟摇杆控制' },
{ key: 'MovementTestScene5', name: '测试场景5:移动更新逻辑' },
{ key: 'MovementTestScene6', name: '测试场景6:小地图测试' },
{ key: 'ItemTestScene', name: '测试场景7:物品系统测试' },
{ key: 'GameScene', name: '返回主游戏场景' }
];
// 创建按钮网格
const buttonWidth = 400;
const buttonHeight = 50;
const buttonSpacing = 20;
const startY = 200;
testScenes.forEach((scene, index) => {
// 创建按钮背景
const button = this.add.rectangle(
this.sys.game.config.width / 2,
startY + index * (buttonHeight + buttonSpacing),
buttonWidth,
buttonHeight,
0x333333
).setOrigin(0.5, 0.5);
// 添加按钮文本
const text = this.add.text(
this.sys.game.config.width / 2,
startY + index * (buttonHeight + buttonSpacing),
scene.name,
{
fontSize: '18px',
fill: '#ffffff',
fontFamily: 'Arial'
}
).setOrigin(0.5, 0.5);
// 使按钮可交互
button.setInteractive({
useHandCursor: true
});
// 添加点击事件
button.on('pointerdown', () => {
this.scene.start(scene.key);
});
// 添加悬停效果
button.on('pointerover', () => {
button.setFillStyle(0x555555);
});
button.on('pointerout', () => {
button.setFillStyle(0x333333);
});
});
}
}
+1 -1
View File
@@ -94,7 +94,7 @@ export default class GameScene extends Phaser.Scene {
this.miniMap = new MiniMap(this, {
worldSize: worldSize, // 游戏世界大小
mapSize: 200, // 小地图显示大小
x: this.sys.game.config.width - mapSize - 10, // 小地图在屏幕上的x坐标
x: this.sys.game.config.width - 200 - 10, // 小地图在屏幕上的x坐标
y: 10 // 小地图在屏幕上的y坐标
});
}
+93
View File
@@ -0,0 +1,93 @@
// 测试场景1:相对移动(键盘控制)
import Unit from '../objects/Unit.js';
import { InputSystem } from '../systems/InputSystem.js';
import { SelectionSystem } from '../systems/SelectionSystem.js';
import { CommandSystem } from '../systems/CommandSystem.js';
export default class MovementTestScene1 extends Phaser.Scene {
constructor() {
super({ key: 'MovementTestScene1' });
}
create() {
// 创建玩家纹理
if (!this.textures.exists('player')) {
const canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 32;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#000000ff';
ctx.beginPath();
ctx.arc(16, 16, 14, 0, Math.PI * 2);
ctx.fill();
this.textures.addCanvas('player', canvas);
}
// 物理世界和相机边界
const worldSize = 1000;
this.physics.world.setBounds(-worldSize, -worldSize, worldSize * 2, worldSize * 2);
this.cameras.main.setBounds(-worldSize, -worldSize, worldSize * 2, worldSize * 2);
this.cameras.main.centerOn(0, 0);
// 初始化系统 - 只开启键盘移动,禁用框选
this.inputSystem = new InputSystem(this, {
keyboard: true,
mouse: false,
joystick: false,
selection: false
});
this.selectionSystem = new SelectionSystem(this);
this.commandSystem = new CommandSystem(this);
// 创建单位组
this.unitGroup = this.add.group();
// 创建一个测试单位
const unit = new Unit(this, 0, 0, 'player');
this.unitGroup.add(unit);
// 自动选中单位
this.events.emit('select-unit', unit);
// 添加碰撞检测
this.physics.add.collider(this.unitGroup, this.unitGroup);
// 添加场景说明文本
const titleText = this.add.text(10, 10, '测试场景1:相对移动(键盘控制)', {
fontSize: '20px',
fill: '#ffffff'
});
titleText.setScrollFactor(0, 0); // 固定在屏幕上,不随相机移动
titleText.setDepth(10); // 设置深度,确保显示在游戏元素上方
const moveText = this.add.text(10, 40, '使用WASD或方向键移动单位', {
fontSize: '16px',
fill: '#ffffff'
});
moveText.setScrollFactor(0, 0); // 固定在屏幕上,不随相机移动
moveText.setDepth(10); // 设置深度,确保显示在游戏元素上方
const spaceText = this.add.text(10, 70, '按空格键返回菜单', {
fontSize: '16px',
fill: '#ffffff'
});
spaceText.setScrollFactor(0, 0); // 固定在屏幕上,不随相机移动
spaceText.setDepth(10); // 设置深度,确保显示在游戏元素上方
// 空格键切换场景
this.input.keyboard.on('keydown-SPACE', () => {
this.scene.start('BootScene');
});
}
update() {
this.inputSystem.update();
this.unitGroup.getChildren().forEach(unit => {
if (unit.update) {
unit.update();
}
unit.updateMovement();
});
}
}
+93
View File
@@ -0,0 +1,93 @@
// 测试场景2:目标点移动
import Unit from '../objects/Unit.js';
import { InputSystem } from '../systems/InputSystem.js';
import { SelectionSystem } from '../systems/SelectionSystem.js';
import { CommandSystem } from '../systems/CommandSystem.js';
export default class MovementTestScene2 extends Phaser.Scene {
constructor() {
super({ key: 'MovementTestScene2' });
}
create() {
// 创建玩家纹理
if (!this.textures.exists('player')) {
const canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 32;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#000000ff';
ctx.beginPath();
ctx.arc(16, 16, 14, 0, Math.PI * 2);
ctx.fill();
this.textures.addCanvas('player', canvas);
}
// 物理世界和相机边界
const worldSize = 1000;
this.physics.world.setBounds(-worldSize, -worldSize, worldSize * 2, worldSize * 2);
this.cameras.main.setBounds(-worldSize, -worldSize, worldSize * 2, worldSize * 2);
this.cameras.main.centerOn(0, 0);
// 初始化系统 - 只开启鼠标移动,禁用框选
this.inputSystem = new InputSystem(this, {
keyboard: false,
mouse: true,
joystick: false,
selection: false
});
this.selectionSystem = new SelectionSystem(this);
this.commandSystem = new CommandSystem(this);
// 创建单位组
this.unitGroup = this.add.group();
// 创建一个测试单位
const unit = new Unit(this, 0, 0, 'player');
this.unitGroup.add(unit);
// 自动选中单位
this.events.emit('select-unit', unit);
// 添加碰撞检测
this.physics.add.collider(this.unitGroup, this.unitGroup);
// 添加场景说明文本
const titleText = this.add.text(10, 10, '测试场景2:目标点移动', {
fontSize: '20px',
fill: '#ffffff'
});
titleText.setScrollFactor(0, 0); // 固定在屏幕上,不随相机移动
titleText.setDepth(10); // 设置深度,确保显示在游戏元素上方
const moveText = this.add.text(10, 40, '点击鼠标右键或点击空地指定移动目标点', {
fontSize: '16px',
fill: '#ffffff'
});
moveText.setScrollFactor(0, 0); // 固定在屏幕上,不随相机移动
moveText.setDepth(10); // 设置深度,确保显示在游戏元素上方
const spaceText = this.add.text(10, 70, '按空格键返回菜单', {
fontSize: '16px',
fill: '#ffffff'
});
spaceText.setScrollFactor(0, 0); // 固定在屏幕上,不随相机移动
spaceText.setDepth(10); // 设置深度,确保显示在游戏元素上方
// 空格键切换场景
this.input.keyboard.on('keydown-SPACE', () => {
this.scene.start('BootScene');
});
}
update() {
this.inputSystem.update();
this.unitGroup.getChildren().forEach(unit => {
if (unit.update) {
unit.update();
}
unit.updateMovement();
});
}
}
+111
View File
@@ -0,0 +1,111 @@
// 测试场景3:单位选择与移动命令
import Unit from '../objects/Unit.js';
import { InputSystem } from '../systems/InputSystem.js';
import { SelectionSystem } from '../systems/SelectionSystem.js';
import { CommandSystem } from '../systems/CommandSystem.js';
export default class MovementTestScene3 extends Phaser.Scene {
constructor() {
super({ key: 'MovementTestScene3' });
}
create() {
// 创建玩家纹理
if (!this.textures.exists('player')) {
const canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 32;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#000000ff';
ctx.beginPath();
ctx.arc(16, 16, 14, 0, Math.PI * 2);
ctx.fill();
this.textures.addCanvas('player', canvas);
}
// 物理世界和相机边界
const worldSize = 1000;
this.physics.world.setBounds(-worldSize, -worldSize, worldSize * 2, worldSize * 2);
this.cameras.main.setBounds(-worldSize, -worldSize, worldSize * 2, worldSize * 2);
this.cameras.main.centerOn(0, 0);
// 初始化系统 - 开启鼠标选择、移动和框选功能
this.inputSystem = new InputSystem(this, {
keyboard: false,
mouse: true,
joystick: false,
selection: true
});
this.selectionSystem = new SelectionSystem(this);
this.commandSystem = new CommandSystem(this);
// 创建单位组
this.unitGroup = this.add.group();
// 创建多个测试单位
const unitCount = 5;
let firstUnit = null;
for (let i = 0; i < unitCount; i++) {
const x = -200 + i * 100;
const y = 0;
const unit = new Unit(this, x, y, 'player');
this.unitGroup.add(unit);
if (i === 0) {
firstUnit = unit;
}
}
// 自动选中第一个单位
if (firstUnit) {
this.events.emit('select-unit', firstUnit);
}
// 添加碰撞检测
this.physics.add.collider(this.unitGroup, this.unitGroup);
// 添加场景说明文本
const titleText = this.add.text(10, 10, '测试场景3:单位选择与移动命令', {
fontSize: '20px',
fill: '#ffffff'
});
titleText.setScrollFactor(0, 0); // 固定在屏幕上,不随相机移动
titleText.setDepth(10); // 设置深度,确保显示在游戏元素上方
const selectText = this.add.text(10, 40, '左键点击单选单位,拖拽框选多个单位', {
fontSize: '16px',
fill: '#ffffff'
});
selectText.setScrollFactor(0, 0); // 固定在屏幕上,不随相机移动
selectText.setDepth(10); // 设置深度,确保显示在游戏元素上方
const moveText = this.add.text(10, 70, '右键或点击空地对选中单位下达移动命令', {
fontSize: '16px',
fill: '#ffffff'
});
moveText.setScrollFactor(0, 0); // 固定在屏幕上,不随相机移动
moveText.setDepth(10); // 设置深度,确保显示在游戏元素上方
const spaceText = this.add.text(10, 100, '按空格键返回菜单', {
fontSize: '16px',
fill: '#ffffff'
});
spaceText.setScrollFactor(0, 0); // 固定在屏幕上,不随相机移动
spaceText.setDepth(10); // 设置深度,确保显示在游戏元素上方
// 空格键切换场景
this.input.keyboard.on('keydown-SPACE', () => {
this.scene.start('BootScene');
});
}
update() {
this.inputSystem.update();
this.unitGroup.getChildren().forEach(unit => {
if (unit.update) {
unit.update();
}
unit.updateMovement();
});
}
}
+99
View File
@@ -0,0 +1,99 @@
// 测试场景4:虚拟摇杆控制
import Unit from '../objects/Unit.js';
import { InputSystem } from '../systems/InputSystem.js';
import { SelectionSystem } from '../systems/SelectionSystem.js';
import { CommandSystem } from '../systems/CommandSystem.js';
import { VirtualJoystick } from '../ui/VirtualJoystick.js';
export default class MovementTestScene4 extends Phaser.Scene {
constructor() {
super({ key: 'MovementTestScene4' });
}
create() {
// 创建玩家纹理
if (!this.textures.exists('player')) {
const canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 32;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#000000ff';
ctx.beginPath();
ctx.arc(16, 16, 14, 0, Math.PI * 2);
ctx.fill();
this.textures.addCanvas('player', canvas);
}
// 物理世界和相机边界
const worldSize = 1000;
this.physics.world.setBounds(-worldSize, -worldSize, worldSize * 2, worldSize * 2);
this.cameras.main.setBounds(-worldSize, -worldSize, worldSize * 2, worldSize * 2);
this.cameras.main.centerOn(0, 0);
// 初始化系统 - 只开启虚拟摇杆移动,禁用框选
this.inputSystem = new InputSystem(this, {
keyboard: false,
mouse: false,
joystick: true,
selection: false
});
this.selectionSystem = new SelectionSystem(this);
this.commandSystem = new CommandSystem(this);
this.virtualJoystick = new VirtualJoystick(this, true);
// 创建单位组
this.unitGroup = this.add.group();
// 创建一个测试单位
const unit = new Unit(this, 0, 0, 'player');
this.unitGroup.add(unit);
// 自动选中单位
this.events.emit('select-unit', unit);
// 添加碰撞检测
this.physics.add.collider(this.unitGroup, this.unitGroup);
// 添加场景说明文本
const titleText = this.add.text(10, 10, '测试场景4:虚拟摇杆控制', {
fontSize: '20px',
fill: '#ffffff'
});
titleText.setScrollFactor(0, 0); // 固定在屏幕上,不随相机移动
titleText.setDepth(10); // 设置深度,确保显示在游戏元素上方
const moveText = this.add.text(10, 40, '使用屏幕右下角的虚拟摇杆控制单位移动', {
fontSize: '16px',
fill: '#ffffff'
});
moveText.setScrollFactor(0, 0); // 固定在屏幕上,不随相机移动
moveText.setDepth(10); // 设置深度,确保显示在游戏元素上方
const spaceText = this.add.text(10, 70, '按空格键返回菜单', {
fontSize: '16px',
fill: '#ffffff'
});
spaceText.setScrollFactor(0, 0); // 固定在屏幕上,不随相机移动
spaceText.setDepth(10); // 设置深度,确保显示在游戏元素上方
// 空格键切换场景
this.input.keyboard.on('keydown-SPACE', () => {
this.scene.start('BootScene');
});
}
update() {
this.inputSystem.update();
this.unitGroup.getChildren().forEach(unit => {
if (unit.update) {
unit.update();
}
unit.updateMovement();
});
if (this.virtualJoystick) {
this.virtualJoystick.update();
}
}
}
+123
View File
@@ -0,0 +1,123 @@
// 测试场景5:移动更新逻辑
import Unit from '../objects/Unit.js';
import { InputSystem } from '../systems/InputSystem.js';
import { SelectionSystem } from '../systems/SelectionSystem.js';
import { CommandSystem } from '../systems/CommandSystem.js';
export default class MovementTestScene5 extends Phaser.Scene {
constructor() {
super({ key: 'MovementTestScene5' });
}
create() {
// 创建玩家纹理
if (!this.textures.exists('player')) {
const canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 32;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#000000ff';
ctx.beginPath();
ctx.arc(16, 16, 14, 0, Math.PI * 2);
ctx.fill();
this.textures.addCanvas('player', canvas);
}
// 物理世界和相机边界
const worldSize = 1000;
this.physics.world.setBounds(-worldSize, -worldSize, worldSize * 2, worldSize * 2);
this.cameras.main.setBounds(-worldSize, -worldSize, worldSize * 2, worldSize * 2);
this.cameras.main.centerOn(0, 0);
// 初始化系统 - 这个场景单位自动移动,禁用所有输入和框选
this.inputSystem = new InputSystem(this, {
keyboard: false,
mouse: false,
joystick: false,
selection: false
});
this.selectionSystem = new SelectionSystem(this);
this.commandSystem = new CommandSystem(this);
// 创建单位组
this.unitGroup = this.add.group();
// 创建多个测试单位,分布在不同位置
const unitPositions = [
{ x: -300, y: -300 },
{ x: 300, y: -300 },
{ x: -300, y: 300 },
{ x: 300, y: 300 }
];
// 自动选中第一个单位
let firstUnit = null;
unitPositions.forEach(pos => {
const unit = new Unit(this, pos.x, pos.y, 'player');
// 为每个单位设置不同的目标点,观察它们的移动
const targetX = Math.random() * 400 - 200;
const targetY = Math.random() * 400 - 200;
unit.setTarget(targetX, targetY);
this.unitGroup.add(unit);
// 保存第一个单位的引用
if (!firstUnit) {
firstUnit = unit;
}
});
// 自动选中第一个单位
if (firstUnit) {
this.events.emit('select-unit', firstUnit);
}
// 添加碰撞检测
this.physics.add.collider(this.unitGroup, this.unitGroup);
// 添加场景说明文本
const titleText = this.add.text(10, 10, '测试场景5:移动更新逻辑', {
fontSize: '20px',
fill: '#ffffff'
});
titleText.setScrollFactor(0, 0); // 固定在屏幕上,不随相机移动
titleText.setDepth(10); // 设置深度,确保显示在游戏元素上方
const autoMoveText = this.add.text(10, 40, '观察单位自动向随机目标点移动', {
fontSize: '16px',
fill: '#ffffff'
});
autoMoveText.setScrollFactor(0, 0); // 固定在屏幕上,不随相机移动
autoMoveText.setDepth(10); // 设置深度,确保显示在游戏元素上方
const pathText = this.add.text(10, 70, '单位会自动计算路径并在到达后停止', {
fontSize: '16px',
fill: '#ffffff'
});
pathText.setScrollFactor(0, 0); // 固定在屏幕上,不随相机移动
pathText.setDepth(10); // 设置深度,确保显示在游戏元素上方
const spaceText = this.add.text(10, 100, '按空格键返回菜单', {
fontSize: '16px',
fill: '#ffffff'
});
spaceText.setScrollFactor(0, 0); // 固定在屏幕上,不随相机移动
spaceText.setDepth(10); // 设置深度,确保显示在游戏元素上方
// 空格键切换场景
this.input.keyboard.on('keydown-SPACE', () => {
this.scene.start('BootScene');
});
}
update() {
this.inputSystem.update();
this.unitGroup.getChildren().forEach(unit => {
if (unit.update) {
unit.update();
}
unit.updateMovement();
});
}
}
+143
View File
@@ -0,0 +1,143 @@
// 测试场景6:小地图测试
import Unit from '../objects/Unit.js';
import { InputSystem } from '../systems/InputSystem.js';
import { SelectionSystem } from '../systems/SelectionSystem.js';
import { CommandSystem } from '../systems/CommandSystem.js';
import { MiniMap } from '../ui/MiniMap.js';
export default class MovementTestScene6 extends Phaser.Scene {
constructor() {
super({ key: 'MovementTestScene6' });
}
create() {
// 创建玩家纹理
if (!this.textures.exists('player')) {
const canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 32;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#000000ff';
ctx.beginPath();
ctx.arc(16, 16, 14, 0, Math.PI * 2);
ctx.fill();
this.textures.addCanvas('player', canvas);
}
// 物理世界和相机边界
const worldSize = 2000;
this.physics.world.setBounds(-worldSize, -worldSize, worldSize * 2, worldSize * 2);
this.cameras.main.setBounds(-worldSize, -worldSize, worldSize * 2, worldSize * 2);
this.cameras.main.centerOn(0, 0);
// 初始化系统 - 开启鼠标移动和框选
this.inputSystem = new InputSystem(this, {
keyboard: true,
mouse: true,
joystick: false,
selection: true
});
this.selectionSystem = new SelectionSystem(this);
this.commandSystem = new CommandSystem(this);
// 创建单位组
this.unitGroup = this.add.group();
// 创建多个测试单位,分布在不同位置
for (let i = 0; i < 10; i++) {
const x = Math.random() * 2000 - 1000;
const y = Math.random() * 2000 - 1000;
const unit = new Unit(this, x, y, 'player');
this.unitGroup.add(unit);
// 自动选中第一个单位
if (i === 0) {
this.events.emit('select-unit', unit);
}
}
// 添加碰撞检测
this.physics.add.collider(this.unitGroup, this.unitGroup);
// 创建小地图
this.miniMap = new MiniMap(this, {
worldSize: worldSize,
mapSize: 200,
x: this.sys.game.config.width - 210,
y: 10
});
// 添加场景说明文本
const titleText = this.add.text(10, 10, '测试场景6:小地图测试', {
fontSize: '20px',
fill: '#ffffff'
});
titleText.setScrollFactor(0, 0); // 固定在屏幕上,不随相机移动
titleText.setDepth(10); // 设置深度,确保显示在游戏元素上方
const miniMapText = this.add.text(10, 40, '使用鼠标拖拽小地图或点击小地图快速移动视角', {
fontSize: '16px',
fill: '#ffffff'
});
miniMapText.setScrollFactor(0, 0); // 固定在屏幕上,不随相机移动
miniMapText.setDepth(10); // 设置深度,确保显示在游戏元素上方
const controlsText = this.add.text(10, 70, 'WASD或方向键移动视角,鼠标右键移动单位', {
fontSize: '16px',
fill: '#ffffff'
});
controlsText.setScrollFactor(0, 0); // 固定在屏幕上,不随相机移动
controlsText.setDepth(10); // 设置深度,确保显示在游戏元素上方
const spaceText = this.add.text(10, 100, '按空格键返回菜单', {
fontSize: '16px',
fill: '#ffffff'
});
spaceText.setScrollFactor(0, 0); // 固定在屏幕上,不随相机移动
spaceText.setDepth(10); // 设置深度,确保显示在游戏元素上方
// 空格键切换场景
this.input.keyboard.on('keydown-SPACE', () => {
this.scene.start('BootScene');
});
// 添加相机移动控制
this.cameraSpeed = 2;
this.cameraKeys = this.input.keyboard.addKeys({
up: Phaser.Input.Keyboard.KeyCodes.W,
down: Phaser.Input.Keyboard.KeyCodes.S,
left: Phaser.Input.Keyboard.KeyCodes.A,
right: Phaser.Input.Keyboard.KeyCodes.D
});
}
update() {
this.inputSystem.update();
// 更新相机移动
if (this.cameraKeys.left.isDown) {
this.cameras.main.scrollX -= this.cameraSpeed;
}
if (this.cameraKeys.right.isDown) {
this.cameras.main.scrollX += this.cameraSpeed;
}
if (this.cameraKeys.up.isDown) {
this.cameras.main.scrollY -= this.cameraSpeed;
}
if (this.cameraKeys.down.isDown) {
this.cameras.main.scrollY += this.cameraSpeed;
}
this.unitGroup.getChildren().forEach(unit => {
if (unit.update) {
unit.update();
}
unit.updateMovement();
});
// 更新小地图显示
if (this.miniMap) {
this.miniMap.update();
}
}
}