mirror of
http://junepve.top:3000/chicrobot/CINC.git
synced 2026-10-30 04:31:29 +08:00
775 lines
27 KiB
JavaScript
775 lines
27 KiB
JavaScript
// 游戏场景文件：这是游戏的主要场景，包含了游戏的核心逻辑和玩法实现
|
||
|
||
// 导入单位类：用于创建游戏中的角色/单位
|
||
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';
|
||
|
||
// 导入小地图：显示游戏世界的缩略图
|
||
import { MiniMap } from '../../ui/MiniMap.js';
|
||
|
||
// 定义SkillTestScene类，继承自Phaser.Scene（Phaser框架的场景类）
|
||
export default class SkillTestScene extends Phaser.Scene {
|
||
// 构造函数：初始化场景，设置场景的唯一键值
|
||
constructor() {
|
||
super({ key: 'SkillTestScene' });
|
||
|
||
// 角色相关变量
|
||
this.characters = [];
|
||
this.currentlyControlled = null; // 当前控制的角色
|
||
this.isControllingPuppet = false; // 是否正在控制傀儡
|
||
this.puppet = null; // 元歌的傀儡
|
||
|
||
// 技能相关变量
|
||
this.skills = {};
|
||
}
|
||
|
||
// create方法：当场景创建时自动调用，用于初始化游戏元素
|
||
create() {
|
||
// === 0. 添加窗口大小变化监听 ===
|
||
// 监听浏览器窗口大小变化事件，当窗口大小改变时调用resizeGame方法
|
||
window.addEventListener('resize', this.resizeGame.bind(this));
|
||
|
||
// === 1. 创建玩家纹理===
|
||
// 检查是否已经存在名为'player'的纹理，如果不存在则创建
|
||
if (!this.textures.exists('player')) {
|
||
// 创建一个32x32像素的HTML5 Canvas元素
|
||
const canvas = document.createElement('canvas');
|
||
canvas.width = 32; // 设置Canvas宽度
|
||
canvas.height = 32; // 设置Canvas高度
|
||
|
||
// 获取Canvas的2D绘图上下文
|
||
const ctx = canvas.getContext('2d');
|
||
ctx.fillStyle = '#000000ff'; // 设置填充颜色为完全不透明的黑色
|
||
ctx.beginPath(); // 开始绘制路径
|
||
// 绘制一个圆形：圆心(16,16)，半径14，从0到2π（完整圆形）
|
||
ctx.arc(16, 16, 14, 0, Math.PI * 2);
|
||
ctx.fill(); // 填充圆形
|
||
|
||
// 将创建的Canvas添加到Phaser的纹理管理器中，命名为'player'
|
||
this.textures.addCanvas('player', canvas);
|
||
}
|
||
|
||
// === 2. 物理世界和相机边界===
|
||
// 定义游戏世界的大小
|
||
const worldSize = 2000;
|
||
|
||
// 设置物理世界的边界：从(-worldSize,-worldSize)到(worldSize*2, worldSize*2)
|
||
// 这样游戏世界的中心就是(0,0)，范围是从-2000到2000，总共4000x4000大小
|
||
this.physics.world.setBounds(-worldSize, -worldSize, worldSize * 2, worldSize * 2);
|
||
|
||
// 设置相机的边界，与物理世界边界相同
|
||
this.cameras.main.setBounds(-worldSize, -worldSize, worldSize * 2, worldSize * 2);
|
||
|
||
// 设置相机起始位置在地图中心
|
||
// 使用centerOn方法将相机中心定位在地图坐标(0, 0)
|
||
this.cameras.main.centerOn(0, 0); // 地图中心坐标是(0, 0)
|
||
|
||
// 添加地图网格
|
||
this.createGrid();
|
||
|
||
// === 3. 初始化系统 ===
|
||
// 创建输入系统实例，禁用鼠标点击移动和框选功能
|
||
this.inputSystem = new InputSystem(this, {
|
||
mouse: false, // 禁用鼠标点击移动
|
||
selection: false // 禁用框选功能
|
||
});
|
||
// 创建选择系统实例
|
||
this.selectionSystem = new SelectionSystem(this);
|
||
// 创建命令系统实例
|
||
this.commandSystem = new CommandSystem(this);
|
||
|
||
// 禁用点击移动和框选功能
|
||
// 阻止选择单位事件触发移动
|
||
this.events.on('select-unit', (unit) => {
|
||
// 只允许单位选择，不执行任何移动操作
|
||
console.log('单位已选中:', unit.name);
|
||
});
|
||
|
||
// 阻止移动到指定点事件
|
||
this.events.on('move-to-point', (x, y) => {
|
||
// 不执行任何移动操作
|
||
return false;
|
||
});
|
||
|
||
// 阻止选择开始事件
|
||
this.events.on('selection-start', (pos) => {
|
||
// 不执行框选操作
|
||
return false;
|
||
});
|
||
|
||
// 阻止选择更新事件
|
||
this.events.on('selection-update', (rect) => {
|
||
// 不更新框选区域
|
||
return false;
|
||
});
|
||
|
||
// 阻止选择结束事件
|
||
this.events.on('selection-end', (rect) => {
|
||
// 不执行框选结束操作
|
||
return false;
|
||
});
|
||
// 创建虚拟摇杆实例
|
||
this.virtualJoystick = new VirtualJoystick(this);
|
||
|
||
// === 4. 创建角色 ===
|
||
// 创建一个单位组，用于管理游戏中的所有角色
|
||
this.unitGroup = this.add.group();
|
||
|
||
// 创建元歌
|
||
const yuange = new Unit(this, -500, 0, 'player');
|
||
yuange.name = 'yuange';
|
||
yuange.type = 'yuange';
|
||
this.unitGroup.add(yuange);
|
||
this.characters.push(yuange);
|
||
|
||
// 创建貂蝉
|
||
const diaochan = new Unit(this, 500, 0, 'player');
|
||
diaochan.name = 'diaochan';
|
||
diaochan.type = 'diaochan';
|
||
this.unitGroup.add(diaochan);
|
||
this.characters.push(diaochan);
|
||
|
||
// 默认控制元歌
|
||
this.currentlyControlled = yuange;
|
||
yuange.setSelected(true);
|
||
|
||
// 将默认角色添加到ControlMode的选中列表中，以便虚拟摇杆可以控制
|
||
import('../../systems/ControlMode.js').then(mod => {
|
||
mod.clearSelection();
|
||
mod.addToSelection(yuange);
|
||
mod.setActiveUnit(yuange);
|
||
// 默认锁定相机到元歌
|
||
mod.setCameraLocked(true);
|
||
});
|
||
|
||
// === 5. 添加角色之间的碰撞检测 ===
|
||
// 为单位组添加碰撞检测，使得角色之间可以相互碰撞
|
||
this.physics.add.collider(this.unitGroup, this.unitGroup);
|
||
|
||
// === 6. 创建技能轮盘 ===
|
||
// 创建技能轮盘实例
|
||
this.skillWheel = {
|
||
isActive: false,
|
||
base: null,
|
||
knob: null,
|
||
activePointer: null,
|
||
centerX: 0,
|
||
centerY: 0,
|
||
radius: 50,
|
||
enabled: true,
|
||
activeSkill: null,
|
||
skillButtons: [],
|
||
skillInfo: {
|
||
1: { key: 'Q', color: 0x00ff00 },
|
||
2: { key: 'W', color: 0x00ffff },
|
||
3: { key: 'E', color: 0xff00ff },
|
||
4: { key: 'R', color: 0xffff00 }
|
||
}
|
||
};
|
||
|
||
// 创建技能轮盘UI
|
||
this.createSkillWheel();
|
||
// 绑定技能轮盘事件
|
||
this.bindSkillWheelEvents();
|
||
|
||
// === 7. 添加角色切换按键 ===
|
||
const kb = this.input.keyboard;
|
||
this.switchKey = kb.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
|
||
kb.on('keydown-SPACE', () => this.switchCharacter());
|
||
|
||
// === 7. 添加技能UI提示 ===
|
||
this.createSkillUI();
|
||
|
||
// === 6. 创建小地图 ===
|
||
// 创建小地图实例，设置其位置和大小
|
||
this.miniMap = new MiniMap(this, {
|
||
worldSize: worldSize, // 游戏世界大小
|
||
mapSize: 200, // 小地图显示大小
|
||
x: this.sys.game.config.width - 200 - 10, // 小地图在屏幕上的x坐标
|
||
y: 10 // 小地图在屏幕上的y坐标
|
||
});
|
||
}
|
||
|
||
// 创建地图网格
|
||
createGrid() {
|
||
// 创建一个图形对象用于绘制网格
|
||
const graphics = this.add.graphics();
|
||
|
||
// 设置网格线样式
|
||
graphics.lineStyle(1, 0x555555, 0.3);
|
||
|
||
// 定义网格参数
|
||
const gridSize = 50; // 网格大小
|
||
const worldSize = 2000; // 世界大小，与物理世界边界一致
|
||
|
||
// 绘制垂直线
|
||
for (let x = -worldSize; x <= worldSize; x += gridSize) {
|
||
graphics.moveTo(x, -worldSize);
|
||
graphics.lineTo(x, worldSize);
|
||
}
|
||
|
||
// 绘制水平线
|
||
for (let y = -worldSize; y <= worldSize; y += gridSize) {
|
||
graphics.moveTo(-worldSize, y);
|
||
graphics.lineTo(worldSize, y);
|
||
}
|
||
|
||
// 绘制完成
|
||
graphics.strokePath();
|
||
|
||
// 确保网格在所有游戏对象之下
|
||
graphics.setDepth(-10);
|
||
|
||
// 让网格随相机移动
|
||
graphics.setScrollFactor(1);
|
||
}
|
||
|
||
// update方法：每帧自动调用（约60次/秒），用于更新游戏状态
|
||
update() {
|
||
// 更新输入系统，处理玩家的键盘和鼠标输入
|
||
this.inputSystem.update();
|
||
|
||
// 更新所有单位的移动逻辑和选中状态
|
||
// 获取单位组中的所有子元素（即所有单位）
|
||
this.unitGroup.getChildren().forEach(unit => {
|
||
// 如果单位有自己的update方法，则调用它
|
||
if (unit.update) {
|
||
unit.update();
|
||
}
|
||
// 调用单位的updateMovement方法，更新单位的移动状态
|
||
unit.updateMovement();
|
||
});
|
||
|
||
// 更新小地图显示
|
||
if (this.miniMap) {
|
||
this.miniMap.update();
|
||
}
|
||
|
||
// 更新虚拟摇杆状态
|
||
if (this.virtualJoystick) {
|
||
this.virtualJoystick.update();
|
||
}
|
||
|
||
// 相机锁定逻辑：如果有锁定状态且有当前控制的角色，则让相机跟随角色
|
||
import('../systems/ControlMode.js').then(mod => {
|
||
if (mod.cameraLocked && this.currentlyControlled) {
|
||
this.cameras.main.startFollow(this.currentlyControlled);
|
||
} else {
|
||
this.cameras.main.stopFollow();
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 创建技能UI提示
|
||
*/
|
||
createSkillUI() {
|
||
// 创建技能提示文本
|
||
this.skillInfoText = this.add.text(10, this.sys.game.config.height - 100,
|
||
'技能施法: 点击右侧技能轮盘拖放\n按空格键切换角色',
|
||
{ fontSize: '16px', fill: '#ffffff', fontFamily: 'Arial' })
|
||
.setScrollFactor(0) // 固定UI，不随滚动移动
|
||
.setDepth(100);
|
||
|
||
// 创建当前控制角色提示
|
||
this.controlInfoText = this.add.text(10, this.sys.game.config.height - 60,
|
||
`当前控制: ${this.currentlyControlled.name === 'yuange' ? '元歌' : '貂蝉'}`,
|
||
{ fontSize: '18px', fill: '#00ff00', fontFamily: 'Arial' })
|
||
.setScrollFactor(0)
|
||
.setDepth(100);
|
||
}
|
||
|
||
/**
|
||
* 创建技能轮盘
|
||
*/
|
||
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-4在右下角左上方，大半径扇形分布）
|
||
const skills = [1, 2, 3, 4];
|
||
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);
|
||
|
||
// 添加技能按键文本（使用数字1-4代替Q-W-E-R）
|
||
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) => {
|
||
// 只有在技能轮盘未激活时才开始技能施法
|
||
// 这样可以避免与移动轮盘的指针冲突
|
||
if (!this.skillWheel.isActive) {
|
||
// 选中技能后，将轮盘中心设置为技能按钮的中心位置
|
||
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();
|
||
});
|
||
|
||
// 处理指针离开屏幕的情况
|
||
this.input.on('pointerout', (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) {
|
||
return;
|
||
}
|
||
|
||
// 释放技能
|
||
this.castSkill(this.skillWheel.activeSkill);
|
||
|
||
// 重置技能轮盘状态
|
||
this.skillWheel.isActive = false;
|
||
this.skillWheel.activePointer = null;
|
||
this.skillWheel.activeSkill = null;
|
||
|
||
// 隐藏旋钮和轮盘基础
|
||
this.skillWheel.knob.setVisible(false);
|
||
this.skillWheel.base.setVisible(false);
|
||
|
||
// 将旋钮和基础重置到默认位置（技能按钮扇形区域的中心）
|
||
this.skillWheel.centerX = this.scale.width - 200;
|
||
this.skillWheel.centerY = this.scale.height - 200;
|
||
this.skillWheel.base.setPosition(this.skillWheel.centerX, this.skillWheel.centerY);
|
||
this.skillWheel.knob.setPosition(this.skillWheel.centerX, this.skillWheel.centerY);
|
||
}
|
||
|
||
/**
|
||
* 更新技能轮盘显示
|
||
*/
|
||
updateSkillWheelDisplay() {
|
||
// 根据当前控制的角色设置技能信息
|
||
if (this.isControllingPuppet) {
|
||
// 傀儡的技能设置
|
||
this.skillWheel.skillInfo = {
|
||
1: { key: 'Q', color: 0xff0000 }, // 收回傀儡
|
||
2: { key: 'W', color: 0x00ffff }, // 交换位置
|
||
3: { key: 'E', color: 0x0000ff }, // 占位
|
||
4: { key: 'R', color: 0xffff00 } // 快速移动
|
||
};
|
||
} else if (this.currentlyControlled && this.currentlyControlled.type === 'yuange') {
|
||
// 元歌本体的技能设置
|
||
this.skillWheel.skillInfo = {
|
||
1: { key: 'Q', color: 0x00ff00 }, // 扔出傀儡
|
||
2: { key: 'W', color: 0x00ffff }, // 占位
|
||
3: { key: 'E', color: 0xff00ff }, // 占位
|
||
4: { key: 'R', color: 0xffff00 } // 本体移动
|
||
};
|
||
} else if (this.currentlyControlled && this.currentlyControlled.type === 'diaochan') {
|
||
// 貂蝉的技能设置
|
||
this.skillWheel.skillInfo = {
|
||
1: { key: 'Q', color: 0x00ff00 }, // 占位
|
||
2: { key: 'W', color: 0x00ffff }, // 移动
|
||
3: { key: 'E', color: 0xff00ff }, // 占位
|
||
4: { key: 'R', color: 0xffff00 } // 占位
|
||
};
|
||
}
|
||
|
||
// 更新现有技能按钮的颜色，不重新创建
|
||
this.skillWheel.skillButtons.forEach(button => {
|
||
const skillIndex = button.skillIndex;
|
||
if (this.skillWheel.skillInfo[skillIndex]) {
|
||
button.fillColor = this.skillWheel.skillInfo[skillIndex].color;
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 切换控制的角色
|
||
*/
|
||
switchCharacter() {
|
||
if (this.isControllingPuppet) {
|
||
// 如果正在控制傀儡，先切换回本体
|
||
this.switchToYuange();
|
||
} else {
|
||
// 否则切换到另一个角色
|
||
const currentIndex = this.characters.indexOf(this.currentlyControlled);
|
||
const nextIndex = (currentIndex + 1) % this.characters.length;
|
||
|
||
// 取消当前角色的选中状态
|
||
this.currentlyControlled.setSelected(false);
|
||
|
||
// 切换到下一个角色
|
||
this.currentlyControlled = this.characters[nextIndex];
|
||
this.currentlyControlled.setSelected(true);
|
||
|
||
// 更新UI提示
|
||
this.controlInfoText.setText(`当前控制: ${this.currentlyControlled.name === 'yuange' ? '元歌' : '貂蝉'}`);
|
||
|
||
// 更新技能轮盘显示
|
||
this.updateSkillWheelDisplay();
|
||
|
||
// 更新ControlMode的选中列表
|
||
import('../../systems/ControlMode.js').then(mod => {
|
||
mod.clearSelection();
|
||
mod.addToSelection(this.currentlyControlled);
|
||
mod.setActiveUnit(this.currentlyControlled);
|
||
// 自动锁定相机到新角色
|
||
mod.setCameraLocked(true);
|
||
});
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 释放技能
|
||
* @param {number} skillIndex 技能索引（1-4）
|
||
*/
|
||
castSkill(skillIndex) {
|
||
// 检查是否有当前控制的角色
|
||
if (!this.currentlyControlled) return;
|
||
|
||
// 根据当前控制角色类型和技能索引释放对应技能
|
||
if (this.currentlyControlled.type === 'yuange' || this.currentlyControlled.type === 'yuange-puppet') {
|
||
this.castYuangeSkill(skillIndex);
|
||
} else if (this.currentlyControlled.type === 'diaochan') {
|
||
this.castDiaochanSkill(skillIndex);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 释放元歌技能
|
||
* @param {number} skillIndex 技能索引（1-4）
|
||
*/
|
||
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: // 技能1：收回傀儡
|
||
this.switchToYuange();
|
||
break;
|
||
case 2: // 技能2：本体拉近并交换位置
|
||
if (this.puppet) {
|
||
// 记录傀儡当前位置
|
||
const puppetX = this.puppet.x;
|
||
const puppetY = this.puppet.y;
|
||
|
||
// 获取本体拉近到傀儡一定范围内的坐标
|
||
const closeX = this.puppet.x - 50 * Math.sign(this.puppet.x - yuange.x);
|
||
const closeY = this.puppet.y - 50 * Math.sign(this.puppet.y - yuange.y);
|
||
|
||
// 傀儡移动到本体拉近后的位置
|
||
this.puppet.setPosition(closeX, closeY);
|
||
this.puppet.setVelocity(0, 0);
|
||
this.puppet.clearTarget();
|
||
|
||
// 直接设置本体位置到傀儡原本位置
|
||
yuange.setPosition(puppetX, puppetY);
|
||
yuange.setVelocity(0, 0);
|
||
|
||
}
|
||
break;
|
||
case 4: // 技能4：傀儡快速移动并拉本体
|
||
if (this.puppet && this.isControllingPuppet) {
|
||
// 使用轮盘相对方向计算目标位置
|
||
const maxDistance = 300;
|
||
const distance = Math.sqrt(directionX * directionX + directionY * directionY);
|
||
let ratio = maxDistance / distance;
|
||
if (isNaN(ratio) || ratio > 1) ratio = 1;
|
||
|
||
// 计算目标位置：傀儡当前位置 + 方向向量 * 最大距离
|
||
const targetX = this.puppet.x + directionX * ratio;
|
||
const targetY = this.puppet.y + directionY * ratio;
|
||
|
||
// 傀儡移动到目标位置
|
||
// this.puppet.setTarget(targetX, targetY);
|
||
this.puppet.setPosition(targetX, targetY);
|
||
this.puppet.setVelocity(0, 0);
|
||
this.puppet.clearTarget();
|
||
|
||
// 本体瞬间移动到傀儡附近
|
||
yuange.x = this.puppet.x - 50 * Math.sign(this.puppet.x - yuange.x);
|
||
yuange.y = this.puppet.y - 50 * Math.sign(this.puppet.y - yuange.y);
|
||
}
|
||
break;
|
||
}
|
||
} else {
|
||
// 控制本体时的技能
|
||
switch (skillIndex) {
|
||
case 1: // 技能1：扔出傀儡
|
||
if (!this.puppet) {
|
||
// 使用轮盘相对方向计算目标位置
|
||
const maxDistance = 300;
|
||
const distance = Math.sqrt(directionX * directionX + directionY * directionY);
|
||
let ratio = maxDistance / distance;
|
||
if (isNaN(ratio) || ratio > 1) ratio = 1;
|
||
|
||
// 计算目标位置：元歌当前位置 + 方向向量 * 最大距离
|
||
const targetX = yuange.x + directionX * ratio;
|
||
const targetY = yuange.y + directionY * ratio;
|
||
|
||
// 创建傀儡直接在指定位置生成，不需要从本体位置开始移动
|
||
this.puppet = new Unit(this, targetX, targetY, 'player');
|
||
this.puppet.name = 'yuange-puppet';
|
||
this.puppet.type = 'yuange-puppet';
|
||
this.puppet.setScale(0.8);
|
||
this.puppet.tint = 0x00ffff; // 用蓝色区分傀儡
|
||
this.unitGroup.add(this.puppet);
|
||
|
||
// 切换控制到傀儡
|
||
this.isControllingPuppet = true;
|
||
yuange.setSelected(false);
|
||
this.currentlyControlled = this.puppet;
|
||
this.controlInfoText.setText('当前控制: 元歌傀儡');
|
||
|
||
// 更新技能轮盘显示为傀儡的技能
|
||
this.updateSkillWheelDisplay();
|
||
|
||
// 更新ControlMode的选中列表，确保虚拟摇杆能控制傀儡
|
||
import('../../systems/ControlMode.js').then(mod => {
|
||
mod.clearSelection();
|
||
mod.addToSelection(this.puppet);
|
||
mod.setActiveUnit(this.puppet);
|
||
// 自动锁定相机到傀儡
|
||
mod.setCameraLocked(true);
|
||
});
|
||
}
|
||
break;
|
||
case 4: // 技能4：本体向技能指向方向移动
|
||
// 确保是本体在控制
|
||
if (!this.isControllingPuppet) {
|
||
// 使用轮盘相对方向计算目标位置
|
||
const maxDistance = 400;
|
||
const distance = Math.sqrt(directionX * directionX + directionY * directionY);
|
||
let ratio = maxDistance / distance;
|
||
if (isNaN(ratio) || ratio > 1) ratio = 1;
|
||
|
||
// 计算目标位置：元歌当前位置 + 方向向量 * 最大距离
|
||
const targetX = yuange.x + directionX * ratio;
|
||
const targetY = yuange.y + directionY * ratio;
|
||
|
||
// 短暂停顿（0.5秒）
|
||
yuange.setVelocity(0, 0);
|
||
|
||
// 延迟后直接传送，不需要移动过程
|
||
this.time.delayedCall(500, () => {
|
||
yuange.setPosition(targetX, targetY);
|
||
yuange.setVelocity(0, 0);
|
||
}, [], this);
|
||
}
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 释放貂蝉技能
|
||
* @param {number} skillIndex 技能索引（1-4）
|
||
*/
|
||
castDiaochanSkill(skillIndex) {
|
||
const diaochan = this.currentlyControlled;
|
||
|
||
// 计算技能释放方向（基于技能轮盘中心到指针的相对方向）
|
||
const pointer = this.input.activePointer;
|
||
// 计算轮盘中心到指针的方向向量
|
||
const directionX = pointer.x - this.skillWheel.centerX;
|
||
const directionY = pointer.y - this.skillWheel.centerY;
|
||
|
||
switch (skillIndex) {
|
||
case 2: // 技能2：向指定方向移动
|
||
// 使用轮盘相对方向计算移动方向
|
||
const maxDistance = 250;
|
||
const distance = Math.sqrt(directionX * directionX + directionY * directionY);
|
||
let ratio = maxDistance / distance;
|
||
if (isNaN(ratio) || ratio > 1) ratio = 1;
|
||
|
||
// 计算移动距离
|
||
const moveX = directionX * ratio;
|
||
const moveY = directionY * ratio;
|
||
|
||
// 立即向目标方向移动一定距离
|
||
diaochan.x += moveX;
|
||
diaochan.y += moveY;
|
||
break;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 切换回元歌本体
|
||
*/
|
||
switchToYuange() {
|
||
if (this.puppet) {
|
||
// 删除傀儡
|
||
this.puppet.destroy();
|
||
this.puppet = null;
|
||
}
|
||
|
||
// 切换回元歌本体控制
|
||
this.isControllingPuppet = false;
|
||
this.currentlyControlled = this.characters.find(char => char.name === 'yuange');
|
||
this.currentlyControlled.setSelected(true);
|
||
|
||
// 更新UI提示
|
||
this.controlInfoText.setText('当前控制: 元歌');
|
||
|
||
// 更新技能轮盘显示为元歌本体的技能
|
||
this.updateSkillWheelDisplay();
|
||
|
||
// 更新ControlMode的选中列表，确保虚拟摇杆能控制本体
|
||
import('../../systems/ControlMode.js').then(mod => {
|
||
mod.clearSelection();
|
||
mod.addToSelection(this.currentlyControlled);
|
||
mod.setActiveUnit(this.currentlyControlled);
|
||
// 自动锁定相机到本体
|
||
mod.setCameraLocked(true);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 窗口大小变化时的处理函数
|
||
* 当浏览器窗口大小改变时，调整游戏画布的大小以适应新窗口
|
||
*/
|
||
resizeGame() {
|
||
// 调用Phaser的scale.resize方法，将游戏画布大小调整为当前窗口大小
|
||
this.scale.resize(window.innerWidth, window.innerHeight);
|
||
|
||
// 更新UI位置
|
||
if (this.skillInfoText) {
|
||
this.skillInfoText.setPosition(10, window.innerHeight - 100);
|
||
}
|
||
if (this.controlInfoText) {
|
||
this.controlInfoText.setPosition(10, window.innerHeight - 60);
|
||
}
|
||
}
|
||
} |