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

欢迎加入开源鸿蒙PC社区https://harmonypc.csdn.net/atomgit开源仓库地址https://atomgit.com/feng8403000/electron_TextGame_DIVBOSS示例效果项目背景在游戏开发中玩家对游戏的定制化需求越来越高。为了满足玩家的个性化需求我们在文字战斗系统的基础上进一步开发了自定义英雄系统允许玩家自定义英雄的属性和添加数量从而创造出更加多样化的战斗场景。本文将详细介绍如何实现自定义英雄属性和添加英雄数量的功能包括界面设计、代码实现以及使用方法。技术架构前端技术HTML5 Canvas用于绘制文字单位和实现动画效果JavaScript实现物理引擎、碰撞检测和战斗系统CSS设计美观的用户界面后端技术Electron构建跨平台桌面应用系统功能核心功能多种文字单位类型战士150血8攻击平衡型法师80血12攻击高攻低血弓箭手100血10攻击中等属性坦克200血5攻击高血低攻英雄可自定义属性体型比普通单位大阵营系统红方和蓝方两个阵营同一阵营的单位不会互相攻击不同阵营的单位碰撞时会互相攻击自定义英雄系统可自定义英雄血量100-1000可自定义英雄攻击力10-50可自定义英雄体型倍数1.1-3.0可自定义一次添加英雄数量1-10战斗系统基于碰撞的战斗触发基于攻击力的伤害计算击败敌人后胜利者恢复满血血量为0的单位被移除物理系统实时碰撞检测碰撞响应和物理反弹边界碰撞处理参数调整单位数量1-50单位大小10-100移动速度1-10弹性系数0-1核心代码实现1. 界面控件添加divclasscontrol-grouplabelforheroHealth英雄血量/labelinputtypenumberidheroHealthmin100max1000step50value500/divdivclasscontrol-grouplabelforheroAttack英雄攻击力/labelinputtypenumberidheroAttackmin10max50step2value20/divdivclasscontrol-grouplabelforheroSize英雄体型倍数/labelinputtypenumberidheroSizemin1.1max3step0.1value1.5/divdivclasscontrol-grouplabelforheroCount添加英雄数量/labelinputtypenumberidheroCountmin1max10step1value1/div代码解析添加了四个新的输入控件分别用于设置英雄的血量、攻击力、体型倍数和添加数量设置了合理的取值范围和默认值使用step属性控制输入的步长提高用户体验2. 控制元素引用constheroHealthInputdocument.getElementById(heroHealth);constheroAttackInputdocument.getElementById(heroAttack);constheroSizeInputdocument.getElementById(heroSize);constheroCountInputdocument.getElementById(heroCount);代码解析获取新添加的输入控件的引用以便在JavaScript中读取其值3. 物体类改进classGameObject{constructor(type,size,speed,x,y,faction,customProps{}){this.typetype;this.sizesize;this.speedspeed;this.xx;this.yy;this.vx(Math.random()-0.5)*speed*2;this.vy(Math.random()-0.5)*speed*2;this.factionfaction;this.rotationMath.random()*Math.PI*2;this.angularVelocity(Math.random()-0.5)*0.05;// 根据文字类型设置不同的血量和攻击力switch(type){// 其他类型...casehero:// 使用自定义属性或默认值this.healthcustomProps.health||500;this.attackcustomProps.attack||20;this.colorfactionred?#ff0000:#0000ff;this.text英雄;this.sizesize*(customProps.sizeMultiplier||1.5);// 英雄比普通单位大break;// 其他类型...}this.maxHealththis.health;}// 其他方法...}代码解析为GameObject类添加了customProps参数用于接收自定义英雄属性在处理英雄类型时使用自定义属性或默认值英雄的体型根据sizeMultiplier进行缩放4. 添加英雄函数改进// 添加红方英雄functionaddRedHero(){constsizeparseInt(objectSizeInput.value);constspeedparseInt(speedInput.value);constheroHealthparseInt(heroHealthInput.value);constheroAttackparseInt(heroAttackInput.value);constheroSizeparseFloat(heroSizeInput.value);constheroCountparseInt(heroCountInput.value);// 创建自定义属性对象constcustomProps{health:heroHealth,attack:heroAttack,sizeMultiplier:heroSize};// 添加指定数量的英雄for(leti0;iheroCount;i){constxsizeMath.random()*(canvasWidth-size*2);constysizeMath.random()*(canvasHeight-size*2);objects.push(newGameObject(hero,size,speed,x,y,red,customProps));}currentCountElement.textContentobjects.length;}// 添加蓝方英雄functionaddBlueHero(){// 类似实现...}代码解析读取用户设置的英雄属性值创建自定义属性对象根据用户设置的数量循环添加多个英雄每次添加时生成随机位置自定义英雄属性说明属性取值范围默认值说明英雄血量100-1000500英雄的生命值决定英雄的存活时间英雄攻击力10-5020英雄的攻击力决定英雄对敌人造成的伤害英雄体型倍数1.1-3.01.5英雄的体型相对于普通单位的倍数一次添加英雄数量1-101每次点击按钮添加的英雄数量英雄系统设计1. 设计理念自定义英雄系统的设计理念是提供高度的灵活性和可玩性个性化定制玩家可以根据自己的喜好调整英雄属性多样化策略不同的属性组合可以创造出不同的战术批量添加一次添加多个英雄可以快速改变战局视觉区分英雄以独特的颜色和体型显示便于识别2. 战术应用超级英雄策略设置高血量1000、高攻击力50、大体型3.0一次添加1个英雄英雄成为战场上的绝对主宰人海战术设置中等属性血量500、攻击20、体型1.5一次添加10个英雄依靠数量优势淹没敌人平衡策略设置平衡属性血量750、攻击30、体型2.0一次添加3-5个英雄在质量和数量之间取得平衡3. 平衡性考虑虽然英雄可以自定义属性但系统设计考虑了以下平衡性因素英雄属性有合理的取值范围避免属性过于极端英雄的体型越大越容易被包围一次添加英雄数量有上限避免瞬间改变战局英雄仍会受到伤害不是无敌的界面设计控件布局英雄属性控件采用与其他控件相同的布局风格每个属性有一个标签和一个输入框输入框有合理的取值范围和步长控件排列整齐便于用户操作英雄按钮使用醒目的颜色与普通按钮区分视觉反馈当用户添加英雄时系统会提供以下视觉反馈英雄以独特的颜色显示红方英雄为深红色蓝方英雄为深蓝色英雄体型比普通单位大根据设置的体型倍数缩放英雄的血量条更长显示更多的血量英雄的移动和碰撞效果与普通单位一致性能优化1. 批量添加优化当用户一次添加多个英雄时系统会进行以下优化一次性创建多个英雄对象减少重复操作批量更新单位数量显示避免频繁DOM操作英雄的碰撞检测和渲染与普通单位相同保持高性能2. 内存管理系统会定期清理死亡单位避免内存泄漏血量为0的单位会被自动移除不再引用的对象会被垃圾回收系统保持稳定的内存使用测试结果性能测试场景帧率碰撞检测时间10普通单位60 FPS1ms10普通单位 1英雄60 FPS~1ms20普通单位 5英雄55 FPS~2ms30普通单位 10英雄50 FPS~3ms战斗测试英雄配置存活时间击败普通单位数标准英雄500血20攻击~120秒~15个超级英雄1000血50攻击~300秒~30个快速英雄300血40攻击~60秒~12个巨型英雄800血15攻击3倍体型~240秒~20个测试结论不同属性的英雄表现差异明显高血量英雄存活时间更长高攻击力英雄击败敌人更快大体型英雄更容易被包围但视觉效果更震撼项目结构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 # 英雄战斗系统博客未来改进方向技能系统为英雄添加特殊技能如范围攻击、治疗等成长系统英雄击败敌人后可以升级提升属性装备系统为英雄添加装备进一步提升属性AI系统为英雄添加智能行为如追逐、躲避等预设系统保存英雄属性预设方便快速切换多人对战支持多人在线对战总结通过本项目我们成功实现了自定义英雄属性和添加英雄数量的功能为文字战斗系统增添了更多的可玩性和策略性。具体实现包括添加了自定义英雄属性的输入控件改进了GameObject类支持自定义属性优化了添加英雄的函数支持批量添加更新了README文件添加了新功能的说明自定义英雄系统的加入使得玩家可以根据自己的喜好创建不同类型的英雄体验不同的战斗策略为游戏增添了更多的乐趣。如何运行克隆项目到本地进入项目目录运行Electron应用在应用界面中选择红方类型战士、法师、弓箭手、坦克选择蓝方类型战士、法师、弓箭手、坦克设置单位数量1-50会平均分配给两个阵营调整单位大小10-100设置移动速度1-10调整弹性系数0-1自定义英雄属性英雄血量100-1000英雄攻击力10-50英雄体型倍数1.1-3.0一次添加英雄数量1-10点击开始测试按钮开始战斗测试在战斗过程中点击添加红方英雄或添加蓝方英雄按钮添加英雄观察英雄如何扭转战局点击停止测试按钮暂停测试点击重置按钮清空当前测试技术栈总结技术用途版本Electron桌面应用框架最新版HTML5 Canvas绘制文字单位和动画HTML5JavaScript物理引擎、碰撞检测和战斗系统ES6CSS界面设计CSS3通过本项目的开发我们展示了如何在现有战斗系统基础上扩展自定义功能希望对开发者有所启发和帮助。