feat(skill) 添加攻击技能特效

2026-10-29 17:47:34 +08:00 · 2026-01-18 00:55:44 +08:00
parent e0ba6f1c9e
commit 63f38c59eb
4 changed files with 1957 additions and 1 deletions
@@ -0,0 +1,870 @@
+# 场景技术实现方案详细解读
+
+## 项目概述
+
+本项目是一个基于Phaser.js游戏框架的测试项目，包含多个测试场景，用于验证不同游戏功能的技术实现。项目使用模块化设计，将不同功能封装到独立的系统和组件中，便于测试和扩展。
+
+## 核心系统架构
+
+### 1. 输入系统 (InputSystem)
+- 处理玩家的键盘、鼠标和虚拟摇杆输入
+- 支持多种输入模式切换
+- 提供统一的输入处理接口
+
+### 2. 选择系统 (SelectionSystem)
+- 处理单位的选择逻辑
+- 支持单选和框选功能
+- 管理选中状态的视觉反馈
+
+### 3. 命令系统 (CommandSystem)
+- 处理玩家对单位的命令（如移动、攻击等）
+- 实现命令的分发和执行
+- 支持不同类型命令的处理
+
+### 4. 单位系统 (Unit)
+- 游戏中可控制实体的基类
+- 实现基本的移动、碰撞和状态管理
+- 支持目标点移动和路径计算
+
+### 5. 物品系统 (ItemSystem)
+- 管理游戏中的物品
+- 实现物品的拾取、使用和效果
+- 支持物品的属性和分类
+
+## 场景技术实现详解
+
+### 1. 攻击技能测试场景 (AttackSkillTestScene)
+
+#### 功能概述
+测试攻击技能的释放和效果，包括元歌的傀儡控制和扇形飞镖技能。
+
+#### 核心技术实现
+- **技能轮盘系统**：实现了基于拖拽的技能释放机制
+- **傀儡控制**：实现了元歌与傀儡的切换控制
+- **技能预览**：为飞镖技能添加了扇形范围预览
+- **飞镖攻击**：实现了多方向扇形飞镖的发射和碰撞检测
+
+#### 关键代码分析
+```javascript
+// 技能轮盘创建
+createSkillWheel() {
+  // 技能按钮扇形排列
+  const skills = [1, 2, 3, 4];
+  const startAngle = -Math.PI;
+  const endAngle = -Math.PI / 2;
+  const angleRange = endAngle - startAngle;
+  const angleStep = angleRange / (skills.length - 1);
+  
+  // 为每个技能按钮添加点击事件
+  button.on('pointerdown', (pointer) => {
+    // 选中技能后，将轮盘中心设置为技能按钮的中心位置
+    this.skillWheel.centerX = x;
+    this.skillWheel.centerY = y;
+    this.skillWheel.base.setPosition(x, y);
+    this.skillWheel.base.setVisible(true);
+    
+    this.skillWheel.activeSkill = skillIndex;
+    this.startSkillCast(pointer);
+  });
+}
+```
+
+#### 技术特点
+- 使用Phaser的图形系统绘制技能预览
+- 实现了基于角度计算的技能方向控制
+- 支持技能释放的视觉反馈
+- 实现了复杂的角色切换控制逻辑
+
+### 2. 技能移动效果测试场景 (SkillTestScene)
+
+#### 功能概述
+测试技能的移动效果，包括元歌的傀儡控制和技能位移。
+
+#### 核心技术实现
+- **技能轮盘系统**：与攻击技能场景类似的技能释放机制
+- **傀儡控制**：实现元歌与傀儡的切换和位置交换
+- **技能位移**：实现角色通过技能进行的位置移动
+
+#### 关键代码分析
+```javascript
+// 元歌技能释放
+castYuangeSkill(skillIndex) {
+  const yuange = this.characters.find(char => char.name === 'yuange');
+  
+  // 计算技能释放方向
+  const pointer = this.input.activePointer;
+  const directionX = pointer.x - this.skillWheel.centerX;
+  const directionY = pointer.y - this.skillWheel.centerY;
+  
+  if (this.isControllingPuppet) {
+    // 控制傀儡时的技能
+    switch (skillIndex) {
+      case 1: // 收回傀儡
+        this.switchToYuange();
+        break;
+      case 2: // 交换位置
+        // 实现位置交换逻辑
+        break;
+      case 4: // 傀儡快速移动并拉本体
+        // 实现快速移动逻辑
+        break;
+    }
+  } else {
+    // 控制本体时的技能
+    switch (skillIndex) {
+      case 1: // 扔出傀儡
+        // 实现傀儡生成和控制切换
+        break;
+      case 4: // 本体向技能指向方向移动
+        // 实现本体移动逻辑
+        break;
+    }
+  }
+}
+```
+
+#### 技术特点
+- 实现了复杂的角色状态管理
+- 支持角色间的位置交换
+- 实现了基于技能方向的位移计算
+
+### 3. 种田功能测试场景 (FarmingTestScene)
+
+#### 功能概述
+测试游戏中的种田系统，包括种子种植、作物生长和收获。
+
+#### 核心技术实现
+- **种植模式**：实现了专门的种植模式和交互
+- **作物生长**：实现了作物的生长周期和状态变化
+- **收获系统**：实现了作物的收获和物品掉落
+- **背包集成**：与背包系统集成，支持种子的存储和管理
+
+#### 关键代码分析
+```javascript
+// 开始种植模式
+startPlantingMode(seed, user) {
+  this.isPlantingMode = true;
+  this.selectedSeed = seed;
+  
+  this.generalInfoText.setText(`点击地面种植 ${seed.name}`);
+  
+  // 显示种植光标
+  this.plantingCursor = this.add.text(this.input.mousePointer.x, this.input.mousePointer.y, '🌱', { 
+    fontSize: '24px' 
+  });
+  
+  this.plantingCursor.setOrigin(0.5, 0.5);
+  this.plantingCursor.setScrollFactor(0, 0);
+  this.plantingCursor.setDepth(100);
+  
+  // 跟随鼠标移动
+  const scene = this;
+  this.mouseMoveListener = (pointer) => {
+    if (scene.plantingCursor) {
+      scene.plantingCursor.setPosition(pointer.x, pointer.y);
+    }
+  };
+  
+  this.input.on('pointermove', this.mouseMoveListener);
+}
+```
+
+#### 技术特点
+- 实现了专门的种植交互模式
+- 支持作物的生长周期管理
+- 与背包系统的无缝集成
+- 实现了种植光标的跟随效果
+
+### 4. 角色动画测试场景 (CharacterAnimationTestScene)
+
+#### 功能概述
+测试角色的动画效果，包括移动动画和角色切换。
+
+#### 核心技术实现
+- **动画系统**：使用Phaser的动画系统实现角色动画
+- **精灵帧管理**：加载和管理多个动画帧
+- **动画控制**：根据角色状态控制动画播放
+- **角色切换**：实现不同角色之间的切换
+
+#### 关键代码分析
+```javascript
+// 创建角色动画
+createCharacterAnimations() {
+  console.log('创建角色动画...');
+  
+  // 创建Player0的移动动画
+  this.anims.create({
+    key: 'player0-move',
+    frames: [
+      { key: 'player0-0' },
+      { key: 'player0-1' },
+      { key: 'player0-2' },
+      { key: 'player0-3' },
+      { key: 'player0-4' },
+      { key: 'player0-5' },
+      { key: 'player0-6' },
+      { key: 'player0-7' }
+    ],
+    frameRate: 10,
+    repeat: -1
+  });
+  
+  // 创建Player1的移动动画
+  this.anims.create({
+    key: 'player1-move',
+    frames: [
+      { key: 'player1-0' },
+      { key: 'player1-1' },
+      { key: 'player1-2' },
+      { key: 'player1-3' },
+      { key: 'player1-4' },
+      { key: 'player1-5' },
+      { key: 'player1-6' },
+      { key: 'player1-7' }
+    ],
+    frameRate: 10,
+    repeat: -1
+  });
+}
+```
+
+#### 技术特点
+- 使用Phaser的动画系统实现流畅的角色动画
+- 支持多角色动画切换
+- 实现了动画与移动状态的同步
+- 支持角色朝向的自动调整
+
+### 5. 地图编辑测试场景 (MapEditTestScene)
+
+#### 功能概述
+测试地图编辑功能，包括瓦片放置、删除和地图管理。
+
+#### 核心技术实现
+- **瓦片选择**：实现了瓦片的预览和选择
+- **地图绘制**：支持瓦片的放置和删除
+- **地图管理**：实现了地图的保存和加载
+- **地形编辑**：支持不同地形类型的编辑
+
+#### 关键代码分析
+```javascript
+// 放置瓦片
+placeTile(pointer) {
+  // 将屏幕坐标转换为世界坐标
+  const worldPoint = this.cameras.main.getWorldPoint(pointer.x, pointer.y);
+  
+  // 计算瓦片坐标
+  const tileX = Math.floor(worldPoint.x / this.tileSize);
+  const tileY = Math.floor(worldPoint.y / this.tileSize);
+  
+  // 检查瓦片坐标是否在地图范围内
+  if (tileX < 0 || tileX >= this.mapWidth || tileY < 0 || tileY >= this.mapHeight) {
+    return;
+  }
+  
+  // 检查是否已经绘制过这个位置，避免重复绘制
+  if (this.lastDrawnTile && this.lastDrawnTile.x === tileX && this.lastDrawnTile.y === tileY) {
+    return;
+  }
+  
+  // 地形模式：只设置地形，不修改瓦片
+  if (this.isTerrainMode) {
+    // 更新地图数据中的地形ID
+    this.mapData[tileY][tileX].terrainId = this.selectedTerrain;
+  }
+  // 瓦片模式：放置或删除瓦片
+  else if (this.selectedTile === -1) {
+    this.removeTile(tileX, tileY);
+  } else {
+    // 放置瓦片
+    const tileKey = this.tileSet[this.selectedTile];
+    
+    // 检查该位置是否已有瓦片
+    const existingTile = this.getTileAt(tileX, tileY);
+    if (existingTile) {
+      // 删除现有瓦片
+      existingTile.destroy();
+    }
+    
+    // 计算精确的绘制位置
+    const drawX = tileX * this.tileSize;
+    const drawY = tileY * this.tileSize;
+    
+    // 创建新瓦片
+    const tile = this.add.image(drawX, drawY, tileKey);
+    tile.setOrigin(0, 0);
+    tile.setDepth(2);
+    this.mapLayer.add(tile);
+    
+    // 更新地图数据，包含瓦片索引和地形ID
+    this.mapData[tileY][tileX] = {
+      tileIndex: this.selectedTile,
+      terrainId: this.selectedTerrain
+    };
+  }
+  
+  // 记录最后绘制的瓦片位置
+  this.lastDrawnTile = { x: tileX, y: tileY };
+}
+```
+
+#### 技术特点
+- 实现了直观的地图编辑界面
+- 支持瓦片的精确放置和删除
+- 实现了地图的保存和加载功能
+- 支持地形类型的编辑和管理
+
+### 6. 地图编辑单瓦片图资源测试场景 (MapEditSinglePicTestScene)
+
+#### 功能概述
+测试使用单张瓦片图资源进行地图编辑的技术实现。
+
+#### 核心技术实现
+- **单瓦片图管理**：使用单张瓦片图替代多张独立瓦片
+- **瓦片裁剪**：实现从单张图中裁剪指定区域作为瓦片
+- **缩放控制**：支持地图的缩放和平移
+- **性能优化**：通过单张图加载提高性能
+
+#### 关键代码分析
+```javascript
+// 加载瓦片资源
+loadTileAssets() {
+  console.log('开始加载瓦片资源');
+  
+  // 只加载单张瓦片图，替代多张瓦片资源
+  const tilemapKey = 'mapedit-tilemap';
+  const tilemapPath = 'assets/PNG/Tiles/Tilemap/tilemap_packed.png';
+  console.log(`加载瓦片图: ${tilemapKey} -> ${tilemapPath}`);
+  this.load.image(tilemapKey, tilemapPath);
+  
+  // 加载完成回调
+  this.load.on('complete', () => {
+    console.log('所有资源加载完成！');
+    this.assetsLoaded = true;
+    this.loadingText.setText('资源加载完成！');
+    
+    // 设置瓦片图的过滤模式为NEAREST
+    if (this.textures.exists(tilemapKey)) {
+      const texture = this.textures.get(tilemapKey);
+      texture.setFilter(Phaser.Textures.FilterMode.NEAREST);
+      console.log(`设置纹理 ${tilemapKey} 的过滤模式为NEAREST`);
+    }
+    
+    // 初始化瓦片集合 - 只使用单张瓦片图键名
+    this.tileCount = 234; // 根据Tilesheet.txt，总瓦片数为18x13=234
+    this.tilemapKey = tilemapKey;
+    // 存储瓦片的位置信息，用于后续切割
+    this.tileImageSize = 16; // 瓦片大小16x16px
+    this.tileSpacing = 0; // 瓦片间距0px
+    this.tileColumns = 18; // 18列
+    this.tileRows = 13; // 13行
+  });
+}
+```
+
+#### 技术特点
+- 使用单张瓦片图提高加载性能
+- 实现了从单张图中精确裁剪瓦片
+- 支持地图的缩放和平移操作
+- 提供了更高效的瓦片管理方式
+
+### 7. 资源包测试场景 (ResourceTestScene)
+
+#### 功能概述
+测试游戏资源包的加载和管理，包括图像和音效资源。
+
+#### 核心技术实现
+- **资源加载**：批量加载不同类型的资源
+- **资源分类**：按类型组织和显示资源
+- **资源预览**：提供资源的可视化预览
+- **音效测试**：测试音效的加载和播放
+
+#### 关键代码分析
+```javascript
+// 加载所有资源
+loadAssets() {
+  // 加载PNG资源
+  this.load.image('enemies-tilemap', 'assets/PNG/Enemies/Tilemap/tilemap.png');
+  this.load.image('enemies-tilemap-packed', 'assets/PNG/Enemies/Tilemap/tilemap_packed.png');
+  
+  this.load.image('interface-tilemap', 'assets/PNG/Interface/Tilemap/tilemap.png');
+  this.load.image('interface-tilemap-packed', 'assets/PNG/Interface/Tilemap/tilemap_packed.png');
+  
+  this.load.image('players-tilemap', 'assets/PNG/Players/Tilemap/tilemap.png');
+  this.load.image('players-tilemap-packed', 'assets/PNG/Players/Tilemap/tilemap_packed.png');
+  
+  this.load.image('tiles-tilemap', 'assets/PNG/Tiles/Tilemap/tilemap.png');
+  this.load.image('tiles-tilemap-packed', 'assets/PNG/Tiles/Tilemap/tilemap_packed.png');
+  
+  this.load.image('weapons-tilemap', 'assets/PNG/Weapons/Tilemap/tilemap.png');
+  this.load.image('weapons-tilemap-packed', 'assets/PNG/Weapons/Tilemap/tilemap_packed.png');
+  
+  // 加载前几个敌人瓦片
+  for (let i = 0; i < 8; i++) {
+    this.load.image(`enemy-tile-${i}`, `assets/PNG/Enemies/Tiles/tile_${String(i).padStart(4, '0')}.png`);
+  }
+  
+  // 加载音效资源
+  this.load.audio('coin-a', 'assets/Sounds/coin-a.ogg');
+  this.load.audio('coin-b', 'assets/Sounds/coin-b.ogg');
+  this.load.audio('jump-a', 'assets/Sounds/jump-a.ogg');
+  this.load.audio('shoot-a', 'assets/Sounds/shoot-a.ogg');
+  this.load.audio('explosion-a', 'assets/Sounds/explosion-a.ogg');
+  this.load.audio('hurt-a', 'assets/Sounds/hurt-a.ogg');
+}
+```
+
+#### 技术特点
+- 实现了批量资源加载和管理
+- 提供了资源的分类和预览
+- 支持音效资源的加载和播放
+- 实现了资源加载进度的可视化反馈
+
+### 8. 物品列表菜单测试场景 (ItemListTestScene)
+
+#### 功能概述
+测试物品列表菜单的显示和交互功能。
+
+#### 核心技术实现
+- **物品列表UI**：实现了物品的列表显示
+- **物品筛选**：支持按类型筛选物品
+- **物品交互**：实现了物品的选择和操作
+- **背包集成**：与背包系统集成，支持物品的快速操作
+
+#### 关键代码分析
+```javascript
+// 初始化物品列表UI
+initItemListUI() {
+  // 创建物品列表UI，位于屏幕左下角
+  const x = 10;
+  const y = this.sys.game.config.height - 350;
+  this.itemListUI = new ItemListUI(this, x, y);
+}
+
+// 创建测试物品
+createTestItems() {
+  // 等待物品数据加载完成
+  this.itemManager.onDataLoaded(() => {
+    // 创建初始物品
+    this.createInitialItems();
+    
+    // 绑定物品点击事件
+    this.events.on('item-clicked', (item) => {
+      this.showItemInfo(item);
+    });
+  });
+}
+```
+
+#### 技术特点
+- 实现了专门的物品列表UI
+- 支持物品的快速选择和操作
+- 与背包系统的无缝集成
+- 提供了物品的详细信息显示
+
+### 9. 背包系统测试场景 (InventoryTestScene)
+
+#### 功能概述
+测试背包系统的功能，包括物品存储、管理和使用。
+
+#### 核心技术实现
+- **背包UI**：实现了网格布局的背包界面
+- **物品管理**：支持物品的添加、移除和移动
+- **物品使用**：实现了物品的使用和效果
+- **容量管理**：实现了背包容量的限制和管理
+
+#### 关键代码分析
+```javascript
+// 初始化背包系统
+initInventory() {
+  // 创建背包（6x4网格）
+  this.player.inventory = new Inventory(6, 4);
+  
+  // 创建背包UI（会自动固定在右侧）
+  this.inventoryUI = new InventoryUI(this, this.player.inventory, 40);
+}
+
+// 显示物品信息
+showItemInfo(item) {
+  const unit = this.player;
+  const isInRange = item.isInInteractionRange(unit);
+  
+  const info = item.getInfo();
+  let infoText = `${info.name}\n`;
+  infoText += `${info.description}\n`;
+  infoText += `类型: ${info.type}\n`;
+  infoText += `重量: ${info.weight}kg\n`;
+  infoText += `体积: ${info.volume}L\n`;
+  infoText += `价值: ${info.value}金币\n`;
+  infoText += `尺寸: ${info.gridSize.width}x${info.gridSize.height}\n`;
+  infoText += `距离: ${Math.round(Math.sqrt(Math.pow(item.x - unit.x, 2) + Math.pow(item.y - unit.y, 2)))}m\n`;
+  
+  // 显示物品属性
+  infoText += '属性: ';
+  const properties = [];
+  for (const [key, value] of Object.entries(info.properties)) {
+    properties.push(`${key}: ${value}`);
+  }
+  infoText += properties.join(', ');
+  
+  this.itemInfoText.setText(infoText);
+}
+```
+
+#### 技术特点
+- 实现了网格布局的背包系统
+- 支持物品的拖拽和管理
+- 实现了物品的详细信息显示
+- 与物品系统的无缝集成
+
+### 10. 物品系统测试场景 (ItemTestScene)
+
+#### 功能概述
+测试物品系统的基本功能，包括物品的创建、属性和交互。
+
+#### 核心技术实现
+- **物品创建**：实现了不同类型物品的创建
+- **物品属性**：支持物品的各种属性和效果
+- **物品交互**：实现了物品的拾取和使用
+- **物品分类**：支持不同类型物品的管理
+
+#### 关键代码分析
+```javascript
+// 创建初始物品
+createInitialItems() {
+  // 在不同位置创建各种类型的物品
+  const itemTypes = ['food', 'tool', 'medical', 'weapon'];
+  const unit = this.unitGroup.getFirstAlive();
+  
+  for (let i = 0; i < itemTypes.length; i++) {
+    const x = unit.x + (i - 2) * 200;
+    const y = unit.y - 200;
+    this.itemManager.createItemByType(itemTypes[i], x, y);
+  }
+}
+
+// 显示物品信息
+showItemInfo(item) {
+  const unit = this.unitGroup.getFirstAlive();
+  const isInRange = item.isInInteractionRange(unit);
+  
+  const info = item.getInfo();
+  let infoText = `${info.name}\n`;
+  infoText += `${info.description}\n`;
+  infoText += `类型: ${info.type}\n`;
+  infoText += `重量: ${info.weight}kg\n`;
+  infoText += `体积: ${info.volume}L\n`;
+  infoText += `价值: ${info.value}金币\n`;
+  infoText += `距离: ${Math.round(Math.sqrt(Math.pow(item.x - unit.x, 2) + Math.pow(item.y - unit.y, 2)))}m\n`;
+  
+  // 显示物品属性
+  infoText += '属性: ';
+  const properties = [];
+  for (const [key, value] of Object.entries(info.properties)) {
+    properties.push(`${key}: ${value}`);
+  }
+  infoText += properties.join(', ');
+  
+  this.itemInfoText.setText(infoText);
+}
+```
+
+#### 技术特点
+- 实现了物品的创建和管理
+- 支持物品的属性和效果
+- 实现了物品的交互和使用
+- 提供了物品的详细信息显示
+
+### 11. 小地图测试场景 (MiniMapTestScene)
+
+#### 功能概述
+测试小地图的显示和交互功能。
+
+#### 核心技术实现
+- **小地图UI**：实现了游戏世界的缩略图显示
+- **单位显示**：在小地图上显示单位的位置
+- **相机控制**：通过小地图控制主相机视角
+- **交互功能**：支持点击小地图快速移动视角
+
+#### 关键代码分析
+```javascript
+// 创建小地图
+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'
+});
+```
+
+#### 技术特点
+- 实现了游戏世界的缩略图显示
+- 支持通过小地图控制视角
+- 显示单位在小地图上的位置
+- 提供了直观的小地图交互方式
+
+### 12. 移动更新逻辑测试场景 (AutoMovementTestScene)
+
+#### 功能概述
+测试单位的自动移动逻辑和路径计算。
+
+#### 核心技术实现
+- **自动移动**：实现单位的自动路径寻找和移动
+- **目标点设置**：支持为单位设置移动目标
+- **路径计算**：实现基本的路径计算和避障
+- **碰撞检测**：实现单位间的碰撞避免
+
+#### 关键代码分析
+```javascript
+// 创建多个测试单位，分布在不同位置
+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;
+  }
+});
+```
+
+#### 技术特点
+- 实现了单位的自动路径寻找
+- 支持目标点的设置和更新
+- 实现了基本的碰撞避免
+- 提供了多单位移动的测试环境
+
+### 13. 虚拟摇杆控制测试场景 (JoystickMovementTestScene)
+
+#### 功能概述
+测试虚拟摇杆的控制功能，模拟移动设备上的操作。
+
+#### 核心技术实现
+- **虚拟摇杆UI**：实现了屏幕上的虚拟摇杆
+- **输入处理**：将摇杆输入转换为单位移动
+- **灵敏度调整**：支持摇杆灵敏度的调整
+- **移动设备适配**：为移动设备提供操作支持
+
+#### 关键代码分析
+```javascript
+// 初始化系统 - 只开启虚拟摇杆移动，禁用框选
+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);
+
+// 添加场景说明文本
+const moveText = this.add.text(10, 40, '使用屏幕右下角的虚拟摇杆控制单位移动', {
+  fontSize: '16px',
+  fill: '#ffffff'
+});
+```
+
+#### 技术特点
+- 实现了屏幕上的虚拟摇杆
+- 支持摇杆输入到移动的转换
+- 为移动设备提供操作支持
+- 实现了摇杆的视觉反馈
+
+### 14. 单位选择与移动命令测试场景 (SelectionAndMovementTestScene)
+
+#### 功能概述
+测试单位的选择和移动命令功能。
+
+#### 核心技术实现
+- **单位选择**：实现了单位的单选和框选
+- **移动命令**：实现了向选中单位下达移动命令
+- **命令队列**：支持命令的队列和执行
+- **选中反馈**：实现了选中状态的视觉反馈
+
+#### 关键代码分析
+```javascript
+// 初始化系统 - 开启鼠标选择、移动和框选功能
+this.inputSystem = new InputSystem(this, {
+  keyboard: false,
+  mouse: true,
+  joystick: false,
+  selection: true
+});
+this.selectionSystem = new SelectionSystem(this);
+this.commandSystem = new CommandSystem(this);
+
+// 创建多个测试单位
+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);
+}
+```
+
+#### 技术特点
+- 实现了单位的单选和框选
+- 支持向选中单位下达命令
+- 实现了命令的队列和执行
+- 提供了选中状态的视觉反馈
+
+### 15. 目标点移动测试场景 (TargetMovementTestScene)
+
+#### 功能概述
+测试单位向指定目标点移动的功能。
+
+#### 核心技术实现
+- **目标点设置**：实现了通过鼠标设置移动目标点
+- **路径计算**：实现了基本的路径计算
+- **移动平滑**：实现了单位移动的平滑过渡
+- **到达检测**：实现了目标点到达的检测
+
+#### 关键代码分析
+```javascript
+// 初始化系统 - 只开启鼠标移动，禁用框选
+this.inputSystem = new InputSystem(this, {
+  keyboard: false,
+  mouse: true,
+  joystick: false,
+  selection: false
+});
+this.selectionSystem = new SelectionSystem(this);
+this.commandSystem = new CommandSystem(this);
+
+// 创建一个测试单位
+const unit = new Unit(this, 0, 0, 'player');
+this.unitGroup.add(unit);
+
+// 自动选中单位
+this.events.emit('select-unit', unit);
+```
+
+#### 技术特点
+- 实现了通过鼠标设置移动目标
+- 支持单位的平滑移动
+- 实现了目标点到达的检测
+- 提供了直观的目标点设置方式
+
+### 16. 相对移动（键盘控制）测试场景 (KeyboardMovementTestScene)
+
+#### 功能概述
+测试通过键盘控制单位进行相对移动的功能。
+
+#### 核心技术实现
+- **键盘输入**：处理键盘方向键的输入
+- **相对移动**：实现单位的相对方向移动
+- **移动速度**：控制单位的移动速度
+- **输入响应**：实现键盘输入的实时响应
+
+#### 关键代码分析
+```javascript
+// 初始化系统 - 只开启键盘移动，禁用框选
+this.inputSystem = new InputSystem(this, {
+  keyboard: true,
+  mouse: false,
+  joystick: false,
+  selection: false
+});
+this.selectionSystem = new SelectionSystem(this);
+this.commandSystem = new CommandSystem(this);
+
+// 创建一个测试单位
+const unit = new Unit(this, 0, 0, 'player');
+this.unitGroup.add(unit);
+
+// 自动选中单位
+this.events.emit('select-unit', unit);
+```
+
+#### 技术特点
+- 实现了通过键盘控制单位移动
+- 支持相对方向的移动控制
+- 提供了实时的输入响应
+- 实现了移动速度的控制
+
+## 技术架构总结
+
+### 1. 模块化设计
+- **系统分离**：将不同功能分离到独立的系统中
+- **组件化**：使用组件化设计，便于复用和扩展
+- **事件驱动**：使用事件系统实现模块间通信
+
+### 2. 性能优化
+- **资源管理**：合理管理游戏资源，避免内存泄漏
+- **渲染优化**：使用Phaser的渲染优化功能
+- **计算优化**：优化路径计算等复杂操作
+
+### 3. 用户体验
+- **直观交互**：提供直观的用户交互方式
+- **视觉反馈**：为用户操作提供及时的视觉反馈
+- **响应速度**：确保系统对用户输入的快速响应
+
+### 4. 可扩展性
+- **模块化设计**：便于添加新功能和系统
+- **配置化**：使用配置文件管理游戏参数
+- **抽象接口**：提供抽象接口，便于扩展
+
+## 技术亮点
+
+1. **多输入模式支持**：实现了键盘、鼠标和虚拟摇杆的统一输入处理
+2. **模块化系统架构**：使用模块化设计，便于测试和扩展
+3. **流畅的动画系统**：实现了角色的流畅动画效果
+4. **直观的地图编辑**：提供了直观的地图编辑工具
+5. **完整的物品系统**：实现了物品的完整生命周期管理
+6. **智能的移动系统**：实现了单位的智能移动和避障
+7. **响应式UI设计**：UI元素会根据屏幕大小自动调整
+8. **资源管理优化**：通过单张瓦片图等方式优化资源加载
+
+## 未来扩展方向
+
+1. **网络多人游戏**：添加网络同步功能，支持多人游戏
+2. **高级AI系统**：实现更复杂的AI行为和决策
+3. **物理引擎集成**：更深入地集成物理引擎，实现更真实的物理效果
+4. **音效系统**：完善音效系统，添加更多音频反馈
+5. **剧情系统**：添加剧情管理和任务系统
+6. **多人协作**：实现玩家间的协作机制
+7. **自定义角色**：添加角色自定义和升级系统
+8. **世界生成**：实现 procedural 世界生成
+
+## 结论
+
+本项目通过多个测试场景全面验证了游戏开发中的核心技术实现，包括输入处理、单位控制、物品系统、地图编辑等。采用模块化设计和Phaser.js框架，构建了一个可扩展的游戏开发基础架构。每个测试场景都针对特定功能进行了详细测试，为游戏开发提供了有价值的技术参考。
+
+项目的技术实现注重代码质量和可扩展性，使用了现代JavaScript的最佳实践，如模块化设计、事件驱动架构和组件化开发。这些技术方案不仅适用于当前的测试项目，也可以作为实际游戏开发的基础架构参考。
@@ -30,6 +30,8 @@ import MapEditTestScene from './scenes/testScenes/MapEditTestScene.js';
 import FarmingTestScene from './scenes/testScenes/FarmingTestScene.js';
 // 导入技能测试场景
 import SkillTestScene from './scenes/testScenes/SkillTestScene.js';
+// 导入攻击技能测试场景
+import AttackSkillTestScene from './scenes/testScenes/AttackSkillTestScene.js';

 // 创建游戏的最终配置对象
 const config = {
@@ -54,7 +56,8 @@ const config = {
    CharacterAnimationTestScene,
    MapEditTestScene,
    FarmingTestScene,
-    SkillTestScene
+    SkillTestScene,
+    AttackSkillTestScene
  ]
 };

@@ -20,6 +20,7 @@ export default class BootScene extends Phaser.Scene {

    // 测试场景列表
    const testScenes = [
+      { key: 'AttackSkillTestScene', name: '测试场景16：攻击技能测试' },
      { key: 'SkillTestScene', name: '测试场景15：技能移动效果测试' },
      { key: 'FarmingTestScene', name: '测试场景14：种田功能测试' },
      { key: 'CharacterAnimationTestScene', name: '测试场景13：角色动画测试' },