test(TS) 测试场景备份

scenes/testScenes/CharacterClassTestScene.js

@@ -0,0 +1,513 @@
+// scenes/testScenes/CharacterClassTestScene.js
+// 角色类测试场景
+
+import { InputSystem } from '../../systems/InputSystem.js';
+import Character from '../../objects/Character.js';
+import { VirtualJoystick } from '../../ui/VirtualJoystick.js';
+
+export default class CharacterClassTestScene extends Phaser.Scene {
+  constructor() {
+    super({ key: 'CharacterClassTestScene' });
+    this.character = null;
+    this.inputSystem = null;
+    this.cursors = null;
+    this.keys = null;
+    
+    // 虚拟摇杆相关
+    this.virtualJoystick = null;
+    this.joysticks = [];
+    
+
+  }
+  
+  preload() {
+    // 加载玩家瓦片图片
+    console.log('加载角色资源...');
+    
+    // 加载Player0的动画帧
+    for (let i = 0; i < 8; i++) {
+      this.load.image(`player0-${i}`, `assets/PNG/Players/Tiles/tile_${String(i).padStart(4, '0')}.png`);
+    }
+    
+    // 加载Player1的动画帧
+    for (let i = 8; i < 16; i++) {
+      this.load.image(`player1-${i-8}`, `assets/PNG/Players/Tiles/tile_${String(i).padStart(4, '0')}.png`);
+    }
+    
+    console.log('角色资源加载完成');
+  }
+  
+  create() {
+    // 设置物理世界
+    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.cameras.main.setBackgroundColor('#222222');
+    
+    // 创建地面网格
+    this.createGrid();
+    
+    // 创建角色动画
+    this.createAnimations();
+    
+    // 初始化输入系统
+    this.inputSystem = new InputSystem(this, {
+      keyboard: true,
+      mouse: true,
+      selection: true
+    });
+    
+    // 创建单位组
+    this.unitGroup = this.add.group();
+    
+    // 初始化技能轮盘
+    this.skillWheel = {
+      centerX: 0,
+      centerY: 0,
+      radius: 60,
+      isActive: false,
+      activeSkill: null,
+      activePointer: null,
+      skillButtons: [],
+      skillInfo: {
+        1: { key: 'skill1', name: '火球术', color: 0xff0000 },
+        2: { key: 'skill2', name: '治疗术', color: 0x00ff00 }
+      }
+    };
+    
+    // 创建角色
+    this.createCharacter();
+    
+    // 创建虚拟摇杆
+    this.createVirtualJoystick();
+    
+    // 创建技能轮盘
+    this.createSkillWheel();
+    // 绑定技能轮盘事件
+    this.bindSkillWheelEvents();
+    
+    // 设置输入控制
+    this.setupInput();
+    
+    // 监听move-to-point事件，实现鼠标点击移动
+    this.events.on('move-to-point', (x, y) => {
+      if (this.character) {
+        this.character.setTarget(x, y);
+      }
+    });
+    
+    // 监听select-unit事件
+    this.events.on('select-unit', (unit) => {
+      console.log('单位已选中:', unit);
+    });
+    
+    // 显示提示信息
+    this.showInstructions();
+  }
+  
+  /**
+   * 创建地面网格
+   */
+  createGrid() {
+    const gridGraphics = this.add.graphics();
+    gridGraphics.lineStyle(1, 0x444444, 0.5);
+    
+    // 绘制垂直线
+    for (let x = 0; x <= 2000; x += 16) {
+      gridGraphics.moveTo(x, 0);
+      gridGraphics.lineTo(x, 2000);
+    }
+    
+    // 绘制水平线
+    for (let y = 0; y <= 2000; y += 16) {
+      gridGraphics.moveTo(0, y);
+      gridGraphics.lineTo(2000, y);
+    }
+  }
+  
+  /**
+   * 创建角色动画
+   */
+  createAnimations() {
+    console.log('创建角色动画...');
+    
+    // 创建Player0的移动动画
+    this.anims.create({
+      key: 'player0-move',
+      frames: [
+        { key: 'player0-1' },
+        { key: 'player0-2' }
+      ],
+      frameRate: 10,
+      repeat: -1
+    });
+    
+    // 创建Player0的技能动画
+    this.anims.create({
+      key: 'player0-skill',
+      frames: [
+        { key: 'player0-3' },
+        { key: 'player0-4' },
+        { key: 'player0-5' }
+      ],
+      frameRate: 15,
+      repeat: 0
+    });
+    
+    console.log('角色动画创建完成');
+  }
+  
+  /**
+   * 创建角色
+   */
+  createCharacter() {
+    console.log('创建角色...');
+    
+    // 角色配置
+    const characterConfig = {
+      texture: 'player0-0',
+      idleTexture: 'player0-0',
+      moveAnimation: 'player0-move',
+      health: 100,
+      mana: 50,
+      speed: 150,
+      attack: 20,
+      defense: 10,
+      collisionRadius: 14,
+      skills: [
+        {
+          id: 'skill1',
+          name: '火球术',
+          cost: 10,
+          cooldown: 3000,
+          castTime: 1000,
+          animation: 'player0-skill'
+        },
+        {
+          id: 'skill2',
+          name: '治疗术',
+          cost: 15,
+          cooldown: 5000,
+          castTime: 1500,
+          animation: 'player0-skill'
+        }
+      ]
+    };
+    
+    // 创建角色
+    this.character = new Character(this, 100, 100, characterConfig);
+    this.character.setScale(2);
+    
+    // 将角色添加到单位组
+    this.unitGroup.add(this.character);
+    
+    // 自动选中角色
+    this.character.setSelected(true);
+    
+    console.log('角色创建完成');
+  }
+  
+  /**
+   * 设置输入控制
+   */
+  setupInput() {
+    // 键盘控制
+    this.cursors = this.input.keyboard.createCursorKeys();
+    
+    // 添加WASD键监听
+    this.keys = {
+      a: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A),
+      d: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D),
+      w: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W),
+      s: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S),
+      space: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE)
+    };
+    
+    // 技能按键
+    this.input.keyboard.on('keydown-Q', () => {
+      this.character.castSkill('skill1');
+    });
+    
+    this.input.keyboard.on('keydown-W', () => {
+      this.character.castSkill('skill2');
+    });
+    
+    // 鼠标点击设置目标由InputSystem处理，通过move-to-point事件
+  }
+  
+  /**
+   * 创建虚拟摇杆
+   */
+  createVirtualJoystick() {
+    // 创建左侧移动摇杆
+    this.virtualJoystick = new VirtualJoystick(this, true);
+    this.virtualJoystick.centerX = 150;
+    this.virtualJoystick.centerY = this.scale.height - 150;
+    this.virtualJoystick.base.setPosition(this.virtualJoystick.centerX, this.virtualJoystick.centerY);
+    this.virtualJoystick.knob.setPosition(this.virtualJoystick.centerX, this.virtualJoystick.centerY);
+    this.joysticks.push(this.virtualJoystick);
+    
+    // 监听虚拟摇杆移动事件
+    this.events.on('move-relative', (direction) => {
+      if (this.character) {
+        this.character.moveRelative(direction.x, direction.y);
+      }
+    });
+  }
+  
+  /**
+   * 创建技能轮盘
+   */
+  createSkillWheel() {
+    // 技能轮盘基础位置（右下角）
+    this.skillWheel.centerX = this.scale.width - 100;
+    this.skillWheel.centerY = this.scale.height - 100;
+    
+    // 创建技能轮盘基础（默认隐藏，选中技能时显示）
+    this.skillWheel.base = this.add.circle(this.skillWheel.centerX, this.skillWheel.centerY, this.skillWheel.radius, 0x444444, 0.5);
+    this.skillWheel.base.setScrollFactor(0); // 不随相机移动
+    this.skillWheel.base.setDepth(100);
+    this.skillWheel.base.setVisible(false);
+    
+    // 创建技能按钮（扇形排列：技能1-2在右下角左上方，大半径扇形分布）
+    const skills = [1, 2];
+    const startAngle = -Math.PI; // 起始角度（-90度，左）
+    const endAngle = -Math.PI / 2; // 结束角度（0度，上）
+    const angleRange = endAngle - startAngle;
+    const angleStep = angleRange / (skills.length - 1);
+    
+    this.skillWheel.skillButtons = [];
+    for (let i = 0; i < skills.length; i++) {
+      const skillIndex = skills[i];
+      // 计算技能按钮的角度（扇形排列）
+      const angle = startAngle + i * angleStep;
+      const distance = 120; // 增大技能按钮距离中心的距离
+      const x = this.skillWheel.centerX + Math.cos(angle) * distance;
+      const y = this.skillWheel.centerY + Math.sin(angle) * distance;
+      
+      // 创建技能按钮
+      const button = this.add.circle(x, y, 25, this.skillWheel.skillInfo[skillIndex].color, 0.6);
+      button.setScrollFactor(0);
+      button.setDepth(100);
+      
+      // 添加技能按键文本
+      const text = this.add.text(x, y, skillIndex.toString(), {
+        fontSize: '14px',
+        fill: '#000000',
+        fontFamily: 'Arial',
+        fontWeight: 'bold'
+      })
+      .setOrigin(0.5, 0.5)
+      .setScrollFactor(0)
+      .setDepth(101);
+      
+      // 保存技能信息
+      button.skillIndex = skillIndex;
+      button.skillKey = this.skillWheel.skillInfo[skillIndex].key;
+      button.x = x;
+      button.y = y;
+      
+      // 添加点击事件
+      button.setInteractive({ useHandCursor: true });
+      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);
+      });
+      
+      this.skillWheel.skillButtons.push(button);
+    }
+    
+    // 创建轮盘旋钮
+    this.skillWheel.knob = this.add.circle(this.skillWheel.centerX, this.skillWheel.centerY, this.skillWheel.radius * 0.5, 0xff0000, 0.8);
+    this.skillWheel.knob.setScrollFactor(0);
+    this.skillWheel.knob.setDepth(101);
+    this.skillWheel.knob.setVisible(false);
+  }
+  
+  /**
+   * 绑定技能轮盘事件
+   */
+  bindSkillWheelEvents() {
+    // 鼠标移动事件
+    this.input.on('pointermove', (ptr) => {
+      // 只有在技能轮盘激活时才处理
+      if (!this.skillWheel.isActive || this.skillWheel.activePointer !== ptr) {
+        return;
+      }
+      
+      // 更新旋钮位置
+      const dx = ptr.x - this.skillWheel.centerX;
+      const dy = ptr.y - this.skillWheel.centerY;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+      
+      if (distance > this.skillWheel.radius) {
+        // 限制在圆内
+        const angle = Math.atan2(dy, dx);
+        const knobX = this.skillWheel.centerX + Math.cos(angle) * this.skillWheel.radius;
+        const knobY = this.skillWheel.centerY + Math.sin(angle) * this.skillWheel.radius;
+        this.skillWheel.knob.setPosition(knobX, knobY);
+      } else {
+        this.skillWheel.knob.setPosition(ptr.x, ptr.y);
+      }
+    });
+    
+    // 鼠标释放事件
+    this.input.on('pointerup', (ptr) => {
+      // 只有在技能轮盘激活时才处理
+      if (!this.skillWheel.isActive || this.skillWheel.activePointer !== ptr) {
+        return;
+      }
+      
+      // 完成技能释放
+      this.finishSkillCast();
+    });
+  }
+  
+  /**
+   * 开始技能施法
+   */
+  startSkillCast(pointer) {
+    // 设置技能轮盘状态
+    this.skillWheel.isActive = true;
+    this.skillWheel.activePointer = pointer;
+    
+    // 显示旋钮和轮盘基础
+    this.skillWheel.knob.setVisible(true);
+    this.skillWheel.base.setVisible(true);
+    
+    // 设置旋钮初始位置为轮盘中心
+    this.skillWheel.knob.setPosition(this.skillWheel.centerX, this.skillWheel.centerY);
+    
+    // 根据技能索引改变旋钮颜色
+    if (this.skillWheel.activeSkill && this.skillWheel.skillInfo[this.skillWheel.activeSkill]) {
+      this.skillWheel.knob.fillColor = this.skillWheel.skillInfo[this.skillWheel.activeSkill].color;
+    }
+  }
+  
+  /**
+   * 完成技能释放
+   */
+  finishSkillCast() {
+    // 检查是否有激活的技能和角色
+    if (!this.skillWheel.activeSkill || !this.character) {
+      return;
+    }
+    
+    // 计算技能释放方向
+    const dx = this.skillWheel.knob.x - this.skillWheel.centerX;
+    const dy = this.skillWheel.knob.y - this.skillWheel.centerY;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+    
+    // 只有当旋钮移动到一定距离时才释放技能
+    if (distance > 10) {
+      // 归一化方向向量
+      const directionX = dx / distance;
+      const directionY = dy / distance;
+      
+      // 释放技能
+      this.character.castSkill(this.skillWheel.skillInfo[this.skillWheel.activeSkill].key);
+    }
+    
+    // 重置技能轮盘状态
+    this.skillWheel.isActive = false;
+    this.skillWheel.activeSkill = null;
+    this.skillWheel.activePointer = null;
+    
+    // 隐藏旋钮和轮盘基础
+    this.skillWheel.knob.setVisible(false);
+    this.skillWheel.base.setVisible(false);
+  }
+  
+  /**
+   * 显示提示信息
+   */
+  showInstructions() {
+    // 标题
+    this.add.text(20, 20, '角色类测试场景', {
+      fontSize: '20px',
+      fill: '#ffffff',
+      fontFamily: 'Arial',
+      fontWeight: 'bold'
+    }).setScrollFactor(0, 0).setDepth(11);
+    
+    // 操作提示
+    const instructions = [
+      '使用左侧虚拟摇杆移动角色',
+      '鼠标点击设置移动目标',
+      '右侧红色按钮：施放火球术',
+      '右侧绿色按钮：施放治疗术',
+      '角色会自动播放移动动画',
+      '按空格键返回启动场景'
+    ];
+    
+    for (let i = 0; i < instructions.length; i++) {
+      this.add.text(20, 50 + i * 25, instructions[i], {
+        fontSize: '14px',
+        fill: '#ffffff',
+        fontFamily: 'Arial'
+      }).setScrollFactor(0, 0).setDepth(11);
+    }
+    
+    // 显示角色属性
+    this.add.text(20, 200, '角色属性:', {
+      fontSize: '16px',
+      fill: '#00ff00',
+      fontFamily: 'Arial',
+      fontWeight: 'bold'
+    }).setScrollFactor(0, 0).setDepth(11);
+  }
+  
+  update() {
+    // 更新输入系统
+    if (this.inputSystem) {
+      this.inputSystem.update();
+    }
+    
+    // 更新虚拟摇杆
+    if (this.virtualJoystick) {
+      this.virtualJoystick.update();
+    }
+    
+    // 键盘移动控制
+    if (this.cursors && this.keys) {
+      let moveX = 0;
+      let moveY = 0;
+      
+      if (this.cursors.left.isDown || this.keys.a.isDown) {
+        moveX = -1;
+      } else if (this.cursors.right.isDown || this.keys.d.isDown) {
+        moveX = 1;
+      }
+      
+      if (this.cursors.up.isDown || this.keys.w.isDown) {
+        moveY = -1;
+      } else if (this.cursors.down.isDown || this.keys.s.isDown) {
+        moveY = 1;
+      }
+      
+      // 只有在虚拟摇杆未激活时才使用键盘控制
+      if (this.character && (!this.virtualJoystick || !this.virtualJoystick.isActive)) {
+        this.character.moveRelative(moveX, moveY);
+      }
+    }
+    
+    // 更新角色
+    if (this.character) {
+      this.character.update();
+    }
+    
+    // 按空格键返回启动场景
+    if (this.keys && this.keys.space.isDown) {
+      this.scene.start('BootScene');
+    }
+  }
+}