鸿蒙 Electron 跨平台应用开发：文字游戏中的大魔王参战影响的战局走向

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

示例效果

具体效果可以观看开源仓库的GIF，CSDN只能5M，atomgit可以正常显示大的GIF

项目背景

在游戏开发中，战斗系统是核心组件之一，而英雄单位则是许多游戏中不可或缺的存在。英雄通常拥有超越普通单位的属性，能够在关键时刻扭转战局，为游戏增添更多策略性和戏剧性。

本文将详细介绍如何在我们之前开发的文字战斗系统基础上，添加英雄系统，包括英雄单位的设计、实现以及在战斗中的应用。

技术架构

前端技术

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

后端技术

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

系统功能

核心功能

1. 多种文字单位类型：
   • 战士：150血，8攻击，平衡型
   • 法师：80血，12攻击，高攻低血
   • 弓箭手：100血，10攻击，中等属性
   • 坦克：200血，5攻击，高血低攻
   • 英雄：500血，20攻击，超高属性，体型比普通单位大50%
2. 阵营系统：
   • 红方和蓝方两个阵营
   • 同一阵营的单位不会互相攻击
   • 不同阵营的单位碰撞时会互相攻击
3. 英雄系统：
   • 支持在战斗过程中随时添加英雄
   • 英雄拥有超高的血量和攻击力
   • 英雄可以扭转战局，帮助落后的阵营
   • 英雄以更大的体型和独特的颜色显示
4. 战斗系统：
   • 基于碰撞的战斗触发
   • 基于攻击力的伤害计算
   • 击败敌人后胜利者恢复满血
   • 血量为0的单位被移除
5. 物理系统：
   • 实时碰撞检测
   • 碰撞响应和物理反弹
   • 边界碰撞处理
6. 参数调整：
   • 单位数量（1-50）
   • 单位大小（10-100）
   • 移动速度（1-10）
   • 弹性系数（0-1）

核心代码实现

1. 英雄单位类定义

case'hero':this.health=500;this.attack=20;this.color=faction==='red'?'#ff0000':'#0000ff';this.text='英雄';this.size=size*1.5;// 英雄比普通单位大50%break;

代码解析：

• 英雄单位具有500点血量，是普通单位中最高的（坦克200血）的2.5倍
• 攻击力为20，是普通单位中最高的（法师12攻击）的1.67倍
• 体型比普通单位大50%，在视觉上更加突出
• 颜色使用深红色(#ff0000)和深蓝色(#0000ff)，与普通单位区分开

2. 添加英雄函数

// 添加红方英雄functionaddRedHero(){constsize=parseInt(objectSizeInput.value);constspeed=parseInt(speedInput.value);constx=size+Math.random()*(canvasWidth-size*2);consty=size+Math.random()*(canvasHeight-size*2);objects.push(newGameObject('hero',size,speed,x,y,'red'));currentCountElement.textContent=objects.length;}// 添加蓝方英雄functionaddBlueHero(){constsize=parseInt(objectSizeInput.value);constspeed=parseInt(speedInput.value);constx=size+Math.random()*(canvasWidth-size*2);consty=size+Math.random()*(canvasHeight-size*2);objects.push(newGameObject('hero',size,speed,x,y,'blue'));currentCountElement.textContent=objects.length;}

代码解析：

• 函数从界面获取当前的大小和速度设置
• 在画布范围内随机生成位置
• 创建英雄单位并添加到对象数组
• 更新当前单位数量显示

3. 事件监听器绑定

// 事件监听器startBtn.addEventListener('click',startTest);stopBtn.addEventListener('click',stopTest);resetBtn.addEventListener('click',resetTest);addRedHeroBtn.addEventListener('click',addRedHero);addBlueHeroBtn.addEventListener('click',addBlueHero);

代码解析：

• 为新增的英雄按钮绑定点击事件
• 允许在战斗过程中随时添加英雄

单位属性对比

属性分析

英雄 vs 普通单位：

• 血量对比：英雄(500) vs 坦克(200) = 2.5倍
• 攻击力对比：英雄(20) vs 法师(12) = 1.67倍
• 体型对比：英雄(1.5x) vs 普通(1x) = 1.5倍

战斗时长估算：

• 英雄 vs 战士：500 / 8 = 62.5次攻击才能被击败
• 战士 vs 英雄：150 / 20 = 7.5次攻击才能击败英雄
• 英雄 vs 英雄：500 / 20 = 25次攻击才能分出胜负

英雄系统设计

1. 设计理念

英雄系统的设计理念是提供一个可以在关键时刻扭转战局的单位。具体特点包括：

• 超高属性：英雄的血量和攻击力都远超普通单位
• 视觉区分：英雄以更大的体型和独特的颜色显示
• 随时添加：玩家可以在战斗过程中随时添加英雄
• 战局改变：英雄可以快速击败大量敌人，改变双方实力对比

2. 战术应用

进攻型用法：

• 当己方明显落后时，添加英雄发起反击
• 英雄可以作为突击力量，快速削减敌人数量
• 利用英雄的高攻击力快速消灭对方有生力量

防守型用法：

• 在己方单位较多时添加英雄，保护己方单位
• 英雄可以作为肉盾，吸引对方火力
• 利用英雄的高血量消耗对方攻击力

3. 平衡性考虑

虽然英雄属性很高，但系统设计考虑了以下平衡性因素：

• 英雄只有500血，不是无敌的
• 多个普通单位合力可以快速击败英雄
• 英雄的体型更大，更容易被包围
• 每次只能添加一个英雄，需要合理把握时机

界面设计

按钮设计

英雄按钮采用与普通按钮不同的颜色：

<buttonid="addRedHeroBtn"style="background-color:#ff4444;">添加红方英雄</button><buttonid="addBlueHeroBtn"style="background-color:#4444ff;">添加蓝方英雄</button>

• 红方英雄按钮：#ff4444（红色）
• 蓝方英雄按钮：#4444ff（蓝色）
• 与红方(#ff6666)和蓝方(#6666ff)普通单位颜色区分

视觉反馈

英雄单位在画布上以独特的方式显示：

• 更大的圆形背景：尺寸比普通单位大50%
• 更深的颜色：深红色和深蓝色
• 独特的文字：显示"英雄"二字
• 更长的血量条：由于体型更大，血量条也相应更长

性能优化

1. 英雄添加性能

英雄添加操作对系统性能的影响极小：

• 不需要重新初始化所有单位
• 只需要创建一个新单位并添加到数组
• 渲染和碰撞检测自动包含新单位

2. 大量英雄性能

即使添加多个英雄，系统仍能保持流畅：

• 碰撞检测算法复杂度为O(n²)，但n较小
• Canvas渲染效率高
• 帧率保持在可接受范围内

测试结果

性能测试

战斗测试

测试结论：

• 英雄在面对大量普通单位时能够存活较长时间
• 英雄能够击败大量普通单位
• 坦克对英雄的威胁最大，因为高血量需要更多攻击次数

未来改进方向

1. 技能系统：为英雄添加特殊技能
2. 召唤成本：添加能量点数限制，限制英雄召唤频率
3. 升级系统：普通单位击败敌人后可以升级
4. 协作系统：添加单位之间的协作行为
5. 地形系统：添加障碍物和有利地形
6. AI系统：为单位添加智能行为

项目结构

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 # 英雄战斗系统博客

总结

通过本项目，我们成功在文字战斗系统基础上添加了英雄系统，实现了以下功能：

• 支持在战斗过程中随时添加英雄单位
• 英雄拥有超高的血量（500）和攻击力（20）
• 英雄体型比普通单位大50%
• 英雄以独特的颜色显示，便于识别
• 英雄可以帮助落后的阵营扭转战局

英雄系统的加入为游戏增加了更多策略性和戏剧性，玩家可以根据战局需要选择合适的时机添加英雄，改变战斗走向。

如何运行

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

技术栈总结

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