鸿蒙 Electron 跨平台应用开发：文字战斗系统与英雄系统进阶开发详解——自定义英雄参战

欢迎加入开源鸿蒙PC社区：
https://harmonypc.csdn.net/
atomgit开源仓库地址：
https://atomgit.com/feng8403000/electron_TextGame_DIVBOSS

示例效果

项目背景

在游戏开发中，玩家对游戏的定制化需求越来越高。为了满足玩家的个性化需求，我们在文字战斗系统的基础上，进一步开发了自定义英雄系统，允许玩家自定义英雄的属性和添加数量，从而创造出更加多样化的战斗场景。

本文将详细介绍如何实现自定义英雄属性和添加英雄数量的功能，包括界面设计、代码实现以及使用方法。

技术架构

前端技术

• HTML5 Canvas：用于绘制文字单位和实现动画效果
• JavaScript：实现物理引擎、碰撞检测和战斗系统
• CSS：设计美观的用户界面

后端技术

• Electron：构建跨平台桌面应用

系统功能

核心功能

1. 多种文字单位类型：
   • 战士：150血，8攻击，平衡型
   • 法师：80血，12攻击，高攻低血
   • 弓箭手：100血，10攻击，中等属性
   • 坦克：200血，5攻击，高血低攻
   • 英雄：可自定义属性，体型比普通单位大
2. 阵营系统：
   • 红方和蓝方两个阵营
   • 同一阵营的单位不会互相攻击
   • 不同阵营的单位碰撞时会互相攻击
3. 自定义英雄系统：
   • 可自定义英雄血量：100-1000
   • 可自定义英雄攻击力：10-50
   • 可自定义英雄体型倍数：1.1-3.0
   • 可自定义一次添加英雄数量：1-10
4. 战斗系统：
   • 基于碰撞的战斗触发
   • 基于攻击力的伤害计算
   • 击败敌人后胜利者恢复满血
   • 血量为0的单位被移除
5. 物理系统：
   • 实时碰撞检测
   • 碰撞响应和物理反弹
   • 边界碰撞处理
6. 参数调整：
   • 单位数量（1-50）
   • 单位大小（10-100）
   • 移动速度（1-10）
   • 弹性系数（0-1）

核心代码实现

1. 界面控件添加

<divclass="control-group"><labelfor="heroHealth">英雄血量</label><inputtype="number"id="heroHealth"min="100"max="1000"step="50"value="500"></div><divclass="control-group"><labelfor="heroAttack">英雄攻击力</label><inputtype="number"id="heroAttack"min="10"max="50"step="2"value="20"></div><divclass="control-group"><labelfor="heroSize">英雄体型倍数</label><inputtype="number"id="heroSize"min="1.1"max="3"step="0.1"value="1.5"></div><divclass="control-group"><labelfor="heroCount">添加英雄数量</label><inputtype="number"id="heroCount"min="1"max="10"step="1"value="1"></div>

代码解析：

• 添加了四个新的输入控件，分别用于设置英雄的血量、攻击力、体型倍数和添加数量
• 设置了合理的取值范围和默认值
• 使用step属性控制输入的步长，提高用户体验

2. 控制元素引用

constheroHealthInput=document.getElementById('heroHealth');constheroAttackInput=document.getElementById('heroAttack');constheroSizeInput=document.getElementById('heroSize');constheroCountInput=document.getElementById('heroCount');

代码解析：

• 获取新添加的输入控件的引用，以便在JavaScript中读取其值

3. 物体类改进

classGameObject{constructor(type,size,speed,x,y,faction,customProps={}){this.type=type;this.size=size;this.speed=speed;this.x=x;this.y=y;this.vx=(Math.random()-0.5)*speed*2;this.vy=(Math.random()-0.5)*speed*2;this.faction=faction;this.rotation=Math.random()*Math.PI*2;this.angularVelocity=(Math.random()-0.5)*0.05;// 根据文字类型设置不同的血量和攻击力switch(type){// 其他类型...case'hero':// 使用自定义属性或默认值this.health=customProps.health||500;this.attack=customProps.attack||20;this.color=faction==='red'?'#ff0000':'#0000ff';this.text='英雄';this.size=size*(customProps.sizeMultiplier||1.5);// 英雄比普通单位大break;// 其他类型...}this.maxHealth=this.health;}// 其他方法...}

代码解析：

• 为GameObject类添加了customProps参数，用于接收自定义英雄属性
• 在处理英雄类型时，使用自定义属性或默认值
• 英雄的体型根据sizeMultiplier进行缩放

4. 添加英雄函数改进

// 添加红方英雄functionaddRedHero(){constsize=parseInt(objectSizeInput.value);constspeed=parseInt(speedInput.value);constheroHealth=parseInt(heroHealthInput.value);constheroAttack=parseInt(heroAttackInput.value);constheroSize=parseFloat(heroSizeInput.value);constheroCount=parseInt(heroCountInput.value);// 创建自定义属性对象constcustomProps={health:heroHealth,attack:heroAttack,sizeMultiplier:heroSize};// 添加指定数量的英雄for(leti=0;i<heroCount;i++){constx=size+Math.random()*(canvasWidth-size*2);consty=size+Math.random()*(canvasHeight-size*2);objects.push(newGameObject('hero',size,speed,x,y,'red',customProps));}currentCountElement.textContent=objects.length;}// 添加蓝方英雄functionaddBlueHero(){// 类似实现...}

代码解析：

• 读取用户设置的英雄属性值
• 创建自定义属性对象
• 根据用户设置的数量，循环添加多个英雄
• 每次添加时生成随机位置

自定义英雄属性说明

英雄系统设计

1. 设计理念

自定义英雄系统的设计理念是提供高度的灵活性和可玩性：

• 个性化定制：玩家可以根据自己的喜好调整英雄属性
• 多样化策略：不同的属性组合可以创造出不同的战术
• 批量添加：一次添加多个英雄可以快速改变战局
• 视觉区分：英雄以独特的颜色和体型显示，便于识别

2. 战术应用

超级英雄策略：

• 设置高血量（1000）、高攻击力（50）、大体型（3.0）
• 一次添加1个英雄
• 英雄成为战场上的绝对主宰

人海战术：

• 设置中等属性（血量500、攻击20、体型1.5）
• 一次添加10个英雄
• 依靠数量优势淹没敌人

平衡策略：

• 设置平衡属性（血量750、攻击30、体型2.0）
• 一次添加3-5个英雄
• 在质量和数量之间取得平衡

3. 平衡性考虑

虽然英雄可以自定义属性，但系统设计考虑了以下平衡性因素：

• 英雄属性有合理的取值范围，避免属性过于极端
• 英雄的体型越大，越容易被包围
• 一次添加英雄数量有上限，避免瞬间改变战局
• 英雄仍会受到伤害，不是无敌的

界面设计

控件布局

英雄属性控件采用与其他控件相同的布局风格：

• 每个属性有一个标签和一个输入框
• 输入框有合理的取值范围和步长
• 控件排列整齐，便于用户操作
• 英雄按钮使用醒目的颜色，与普通按钮区分

视觉反馈

当用户添加英雄时，系统会提供以下视觉反馈：

• 英雄以独特的颜色显示（红方英雄为深红色，蓝方英雄为深蓝色）
• 英雄体型比普通单位大，根据设置的体型倍数缩放
• 英雄的血量条更长，显示更多的血量
• 英雄的移动和碰撞效果与普通单位一致

性能优化

1. 批量添加优化

当用户一次添加多个英雄时，系统会进行以下优化：

• 一次性创建多个英雄对象，减少重复操作
• 批量更新单位数量显示，避免频繁DOM操作
• 英雄的碰撞检测和渲染与普通单位相同，保持高性能

2. 内存管理

系统会定期清理死亡单位，避免内存泄漏：

• 血量为0的单位会被自动移除
• 不再引用的对象会被垃圾回收
• 系统保持稳定的内存使用

测试结果

性能测试

战斗测试

测试结论：

• 不同属性的英雄表现差异明显
• 高血量英雄存活时间更长
• 高攻击力英雄击败敌人更快
• 大体型英雄更容易被包围，但视觉效果更震撼

项目结构

electron-openharmony-vue3/ ├── ohos_hap/ │ └── web_engine/ │ └── src/main/ │ └── resources/ │ └── resfile/ │ └── resources/ │ └── app/ │ ├── index.html # 文字战斗系统与英雄系统页面 │ ├── main.js # Electron主进程 │ └── preload.js # 预加载脚本 └── docs/ ├── COLLISION_TEST_BLOG.md # 碰撞效果测试博客 ├── COLLISION_BATTLE_BLOG.md # 碰撞战斗系统博客 ├── TEXT_BATTLE_SYSTEM_BLOG.md # 文字战斗系统博客 └── HERO_BATTLE_SYSTEM_BLOG.md # 英雄战斗系统博客

未来改进方向

1. 技能系统：为英雄添加特殊技能，如范围攻击、治疗等
2. 成长系统：英雄击败敌人后可以升级，提升属性
3. 装备系统：为英雄添加装备，进一步提升属性
4. AI系统：为英雄添加智能行为，如追逐、躲避等
5. 预设系统：保存英雄属性预设，方便快速切换
6. 多人对战：支持多人在线对战

总结

通过本项目，我们成功实现了自定义英雄属性和添加英雄数量的功能，为文字战斗系统增添了更多的可玩性和策略性。具体实现包括：

• 添加了自定义英雄属性的输入控件
• 改进了GameObject类，支持自定义属性
• 优化了添加英雄的函数，支持批量添加
• 更新了README文件，添加了新功能的说明

自定义英雄系统的加入，使得玩家可以根据自己的喜好创建不同类型的英雄，体验不同的战斗策略，为游戏增添了更多的乐趣。

如何运行

1. 克隆项目到本地
2. 进入项目目录
3. 运行Electron应用
4. 在应用界面中：
   • 选择红方类型（战士、法师、弓箭手、坦克）
   • 选择蓝方类型（战士、法师、弓箭手、坦克）
   • 设置单位数量（1-50，会平均分配给两个阵营）
   • 调整单位大小（10-100）
   • 设置移动速度（1-10）
   • 调整弹性系数（0-1）
   • 自定义英雄属性：
     • 英雄血量：100-1000
     • 英雄攻击力：10-50
     • 英雄体型倍数：1.1-3.0
     • 一次添加英雄数量：1-10
   • 点击"开始测试"按钮开始战斗测试
   • 在战斗过程中点击"添加红方英雄"或"添加蓝方英雄"按钮添加英雄
   • 观察英雄如何扭转战局
   • 点击"停止测试"按钮暂停测试
   • 点击"重置"按钮清空当前测试

技术栈总结

通过本项目的开发，我们展示了如何在现有战斗系统基础上扩展自定义功能，希望对开发者有所启发和帮助。