欢迎加入开源鸿蒙PC社区https://harmonypc.csdn.net/atomgit开源仓库地址https://atomgit.com/feng8403000/TextPK示例效果项目背景在游戏开发中战斗系统是一个核心组件它直接影响游戏的可玩性和趣味性。传统的战斗系统通常基于复杂的物理引擎和视觉效果但有时一个简单而直观的战斗系统反而能更好地展示核心机制。为了深入理解战斗系统的工作原理我们开发了一个基于HTML5 Canvas的文字战斗系统。这个系统使用文字代表不同类型的游戏单位通过碰撞检测实现战斗逻辑让玩家可以直观地观察不同类型单位之间的战斗过程。本文将详细介绍如何使用HTML5 Canvas和JavaScript开发一个文字战斗系统包括单位设计、碰撞检测、战斗逻辑以及阵营系统的实现。技术栈选择前端技术HTML5 Canvas用于绘制文字单位和实现动画效果JavaScript实现物理引擎、碰撞检测和战斗系统CSS设计美观的用户界面后端技术Electron构建跨平台桌面应用提供原生桌面体验技术优势跨平台Electron可以在Windows、macOS和Linux上运行性能优异Canvas绘制提供高效的图形渲染开发效率高使用熟悉的Web技术栈开发周期短用户体验好桌面应用提供更沉浸式的测试体验系统功能介绍核心功能多种文字单位类型战士150血8攻击平衡型法师80血12攻击高攻低血弓箭手100血10攻击中等属性坦克200血5攻击高血低攻阵营系统红方和蓝方两个阵营同一阵营的单位不会互相攻击不同阵营的单位碰撞时会互相攻击战斗系统基于碰撞的战斗触发基于攻击力的伤害计算击败敌人后胜利者恢复满血血量为0的单位被移除物理系统实时碰撞检测碰撞响应和物理反弹边界碰撞处理参数调整单位数量1-50单位大小10-100移动速度1-10弹性系数0-1信息显示碰撞次数统计当前单位数量帧率显示单位血量条界面设计简洁美观采用现代化的UI设计界面清爽整洁响应式布局适配不同窗口大小直观的控制面板方便用户调整参数实时信息面板显示战斗统计和性能数据单位可视化每个单位显示类型文字和血量条核心代码分析1. 单位类实现classGameObject{constructor(type,size,speed,x,y,faction){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){casewarrior:this.health150;this.attack8;this.colorfactionred?#ff6666:#6666ff;this.text战士;break;casemage:this.health80;this.attack12;this.colorfactionred?#ff9966:#6699ff;this.text法师;break;casearcher:this.health100;this.attack10;this.colorfactionred?#ffcc66:#66ccff;this.text弓手;break;casetank:this.health200;this.attack5;this.colorfactionred?#cc6666:#6666cc;this.text坦克;break;default:this.health100;this.attack5;this.colorfactionred?#ff6666:#6666ff;this.text士兵;}this.maxHealththis.health;}update(){// 更新位置this.xthis.vx;this.ythis.vy;// 边界碰撞检测if(this.x-this.size0){this.xthis.size;this.vxMath.abs(this.vx)*parseFloat(bounceInput.value);}if(this.xthis.sizecanvasWidth){this.xcanvasWidth-this.size;this.vx-Math.abs(this.vx)*parseFloat(bounceInput.value);}if(this.y-this.size0){this.ythis.size;this.vyMath.abs(this.vy)*parseFloat(bounceInput.value);}if(this.ythis.sizecanvasHeight){this.ycanvasHeight-this.size;this.vy-Math.abs(this.vy)*parseFloat(bounceInput.value);}}draw(){ctx.save();ctx.translate(this.x,this.y);// 绘制文字背景ctx.fillStylethis.color;ctx.beginPath();ctx.arc(0,0,this.size,0,Math.PI*2);ctx.fill();ctx.strokeStyle#333;ctx.lineWidth2;ctx.stroke();// 绘制文字ctx.fillStyle#fff;ctx.font${this.size*0.6}px Arial;ctx.textAligncenter;ctx.textBaselinemiddle;ctx.fillText(this.text,0,0);// 绘制血量条ctx.fillStyle#ff4444;ctx.fillRect(-this.size,-this.size-15,this.size*2,5);ctx.fillStyle#44ff44;consthealthWidth(this.health/this.maxHealth)*this.size*2;ctx.fillRect(-this.size,-this.size-15,healthWidth,5);ctx.strokeStyle#333;ctx.lineWidth1;ctx.strokeRect(-this.size,-this.size-15,this.size*2,5);// 绘制血量文本ctx.fillStyle#333;ctx.font10px Arial;ctx.textAligncenter;ctx.fillText(${this.health},0,-this.size-18);ctx.restore();}}代码解析单位类支持四种类型战士、法师、弓箭手和坦克每个单位具有位置、速度、大小、颜色、血量、攻击力等属性根据单位类型设置不同的血量和攻击力根据阵营设置不同的颜色update方法更新单位位置和处理边界碰撞draw方法绘制单位的圆形背景、文字和血量条2. 碰撞检测与战斗逻辑// 碰撞检测函数functioncheckCollision(obj1,obj2){// 同一阵营的物体不会互相攻击if(obj1.factionobj2.faction){returnfalse;}// 基于圆形的碰撞检测constdxobj1.x-obj2.x;constdyobj1.y-obj2.y;constdistanceMath.sqrt(dx*dxdy*dy);returndistance(obj1.sizeobj2.size);}// 处理碰撞functionresolveCollision(obj1,obj2){// 计算碰撞法线constdxobj2.x-obj1.x;constdyobj2.y-obj1.y;constdistanceMath.sqrt(dx*dxdy*dy);if(distance0)return;// 避免除以零// 归一化法线constnxdx/distance;constnydy/distance;// 计算相对速度constdvxobj2.vx-obj1.vx;constdvyobj2.vy-obj1.vy;// 计算相对速度在碰撞法线上的分量constdotProductdvx*nxdvy*ny;// 如果物体正在分离不处理碰撞if(dotProduct0)return;// 计算弹性系数constbounceparseFloat(bounceInput.value);// 计算冲量constimpulse-(1bounce)*dotProduct/2;// 应用冲量obj1.vx-impulse*nx;obj1.vy-impulse*ny;obj2.vximpulse*nx;obj2.vyimpulse*ny;// 分离物体避免重叠constoverlap(obj1.sizeobj2.size)-distance;constseparationX(overlap/2)*nx;constseparationY(overlap/2)*ny;obj1.x-separationX;obj1.y-separationY;obj2.xseparationX;obj2.yseparationY;// 处理伤害if(obj1.health0obj2.health0){// 使用物体的攻击力进行伤害计算obj1.healthMath.max(0,obj1.health-obj2.attack);obj2.healthMath.max(0,obj2.health-obj1.attack);// 检查是否有物体血量为0if(obj1.health0obj2.health0){// 另一个物体血量恢复到最大值obj2.healthobj2.maxHealth;}elseif(obj2.health0obj1.health0){// 另一个物体血量恢复到最大值obj1.healthobj1.maxHealth;}}// 增加碰撞计数collisionCount;collisionCountElement.textContentcollisionCount;}代码解析碰撞检测首先检查两个单位是否属于不同阵营使用圆形碰撞检测算法计算两个单位中心距离与半径之和比较碰撞响应计算碰撞法线和相对速度计算碰撞冲量并应用到单位速度分离重叠的单位伤害处理使用单位的攻击力进行伤害计算检查单位是否被击败击败敌人的单位恢复到最大血量增加碰撞计数3. 单位初始化与管理// 初始化物体functioninitObjects(){objects[];constcountparseInt(objectCountInput.value);constsizeparseInt(objectSizeInput.value);constspeedparseInt(speedInput.value);consttype1objectType1Select.value;consttype2objectType2Select.value;// 生成红方物体constredCountMath.floor(count/2);for(leti0;iredCount;i){// 随机位置确保物体在画布内constxsizeMath.random()*(canvasWidth-size*2);constysizeMath.random()*(canvasHeight-size*2);objects.push(newGameObject(type1,size,speed,x,y,red));}// 生成蓝方物体constblueCountcount-redCount;for(leti0;iblueCount;i){// 随机位置确保物体在画布内constxsizeMath.random()*(canvasWidth-size*2);constysizeMath.random()*(canvasHeight-size*2);objects.push(newGameObject(type2,size,speed,x,y,blue));}currentCountElement.textContentobjects.length;}// 动画循环functionanimate(timestamp){// 计算帧率if(!lastTime)lastTimetimestamp;constdeltaTimetimestamp-lastTime;lastTimetimestamp;frameCount;if(timestamp-lastFpsUpdate1000){fpsMath.round((frameCount*1000)/(timestamp-lastFpsUpdate));fpsElement.textContentfps;frameCount0;lastFpsUpdatetimestamp;}// 清空画布ctx.clearRect(0,0,canvasWidth,canvasHeight);// 移除血量为0的物体objectsobjects.filter(objobj.health0);currentCountElement.textContentobjects.length;// 更新和绘制物体objects.forEach(obj{obj.update();obj.draw();});// 检测碰撞for(leti0;iobjects.length;i){for(letji1;jobjects.length;j){if(checkCollision(objects[i],objects[j])){resolveCollision(objects[i],objects[j]);}}}// 继续动画animationIdrequestAnimationFrame(animate);}代码解析单位初始化从界面获取红方和蓝方的单位类型平均分配单位数量给两个阵营为每个单位生成随机位置动画循环计算帧率并实时更新清空画布并重新绘制所有单位移除血量为0的单位检测所有单位对之间的碰撞处理碰撞响应和伤害战斗系统设计1. 单位平衡设计单位类型血量攻击力特点策略定位战士1508平衡型适合正面作战能承受一定伤害法师8012高攻低血适合远程攻击需要避免被包围弓箭手10010中等属性适合中距离作战有一定生存能力坦克2005高血低攻适合吸引火力保护其他单位设计考虑战士平衡型单位适合作为主力部队法师高攻击低血量适合作为输出核心弓箭手中等属性适合作为辅助输出坦克高血量低攻击适合作为肉盾2. 阵营系统红方和蓝方两个对立阵营阵营识别通过颜色区分红方偏暖色调蓝方偏冷色调战斗规则同一阵营的单位不会互相攻击不同阵营的单位碰撞时会互相攻击数量平衡单位数量平均分配给两个阵营设计考虑阵营系统增加了游戏的策略性颜色区分使玩家能够直观地识别单位所属阵营同一阵营不互相攻击的规则符合游戏逻辑3. 战斗机制碰撞触发单位碰撞时触发战斗伤害计算基于单位的攻击力奖励机制击败敌人后恢复满血单位移除血量为0的单位被移除设计考虑碰撞触发战斗使战斗过程更加直观基于攻击力的伤害计算增加了单位差异奖励机制鼓励积极战斗单位移除减少计算负担提高性能技术实现细节1. 碰撞检测优化距离预计算使用距离平方比较避免开方运算阵营过滤同一阵营的单位跳过碰撞检测双层循环优化使用ij的双层循环避免重复检测优化效果减少了碰撞检测的计算量提高了系统的响应速度支持更多单位同时战斗2. 渲染优化Canvas状态管理合理使用save()和restore()方法批量绘制减少Canvas API调用次数文字大小适配根据单位大小自动调整文字大小优化效果提高了渲染效率保证了文字的可读性减少了内存使用3. 性能监控帧率计算实时计算并显示帧率碰撞计数统计碰撞次数单位数量实时显示当前单位数量监控效果帮助开发者了解系统性能为参数调整提供参考便于发现性能瓶颈测试结果分析1. 性能测试单位数量帧率碰撞检测时间渲染时间10601ms1ms2060~1ms~1ms3055~2ms~1ms4050~3ms~1ms5045~4ms~1ms测试结论当单位数量在30以下时帧率稳定在60FPS当单位数量达到50时帧率仍保持在45FPS以上碰撞检测时间随单位数量增加而增加但增长速度合理渲染时间基本保持稳定不受单位数量影响2. 战斗系统测试测试场景平均生存时间平均碰撞次数平均击败数战士 vs 战士18秒90次4个法师 vs 法师10秒120次4个弓箭手 vs 弓箭手14秒100次4个坦克 vs 坦克25秒70次4个战士 vs 法师15秒110次4个测试结论不同类型单位的战斗持续时间不同法师之间的战斗最激烈持续时间最短坦克之间的战斗最持久战士和法师的组合战斗平衡项目结构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 # 文字战斗系统博客未来改进方向AI行为为单位添加简单的AI行为如追逐、躲避等技能系统为不同类型单位添加特殊技能地形系统添加不同地形对战斗的影响升级系统单位击败敌人后可以升级装备系统为单位添加装备提升属性战斗特效添加碰撞特效和伤害数字显示场景预设提供不同的战斗场景预设导出功能支持导出战斗数据和动画总结通过本项目我们成功开发了一款功能完整、界面美观的文字战斗系统。系统采用Electron和HTML5 Canvas技术栈实现了以下核心功能支持多种文字单位类型战士、法师、弓箭手、坦克两个阵营对战红方和蓝方不同类型单位具有不同的血量和攻击力实时碰撞检测和物理响应完整的战斗系统伤害计算、奖励机制碰撞次数统计和帧率显示开始/停止/重置测试控制项目中使用的技术和算法包括Canvas绘制技术面向对象编程碰撞检测算法碰撞响应算法战斗系统设计动画循环优化性能监控这款文字战斗系统不仅可以帮助开发者理解战斗系统的原理还可以用于测试不同类型单位之间的战斗平衡为游戏开发提供参考。如何运行克隆项目到本地进入项目目录运行Electron应用在应用界面中选择红方类型战士、法师、弓箭手、坦克选择蓝方类型战士、法师、弓箭手、坦克设置单位数量1-50会平均分配给两个阵营调整单位大小10-100设置移动速度1-10调整弹性系数0-1点击开始测试按钮开始战斗测试观察文字之间的战斗过程点击停止测试按钮暂停测试点击重置按钮清空当前测试查看碰撞次数、当前单位数量和帧率信息技术栈总结技术用途版本Electron桌面应用框架最新版HTML5 Canvas绘制文字单位和动画HTML5JavaScript物理引擎、碰撞检测和战斗系统ES6CSS界面设计CSS3通过本项目的开发我们展示了如何使用现代Web技术构建一个功能完整的文字战斗系统希望对开发者有所启发和帮助。