欢迎加入开源鸿蒙PC社区https://harmonypc.csdn.net/atomgit开源仓库地址https://atomgit.com/feng8403000/BattleSimulator示例效果项目背景在游戏开发中碰撞检测和战斗系统是两个核心组件。碰撞检测负责检测物体之间的交互而战斗系统则处理物体之间的伤害和生命值管理。为了深入理解这些系统的工作原理我们开发了一个集碰撞检测和战斗系统于一体的测试应用。本文将详细介绍如何使用HTML5 Canvas和JavaScript开发一个具有碰撞检测和战斗系统的应用包括碰撞算法的实现、伤害系统的设计以及性能优化等方面。技术栈选择前端技术HTML5 Canvas用于绘制物体和实现动画效果JavaScript实现物理引擎、碰撞检测和战斗系统CSS设计美观的用户界面后端技术Electron构建跨平台桌面应用提供原生桌面体验技术优势跨平台Electron可以在Windows、macOS和Linux上运行性能优异Canvas绘制提供高效的图形渲染开发效率高使用熟悉的Web技术栈开发周期短用户体验好桌面应用提供更沉浸式的测试体验应用功能介绍核心功能多种物体类型支持圆形、矩形、多边形三种物体类型可调节参数物体数量1-50物体大小10-100移动速度1-10弹性系数0-1实时碰撞检测检测物体之间的碰撞并产生物理响应边界碰撞处理处理物体与画布边界的碰撞战斗系统每个物体初始血量为100每次碰撞消耗5点血量击败敌人后恢复满血血量为0的物体被移除碰撞统计实时显示碰撞次数性能监控显示帧率信息测试控制开始、停止、重置测试界面设计简洁美观采用现代化的UI设计界面清爽整洁响应式布局适配不同窗口大小直观的控制面板方便用户调整参数实时信息面板显示碰撞统计和性能数据血量可视化每个物体显示血量条和具体数值核心代码分析1. 物体类实现classGameObject{constructor(type,size,speed,x,y){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.colorhsl(${Math.random()*360}, 70%, 50%);this.rotationMath.random()*Math.PI*2;this.angularVelocity(Math.random()-0.5)*0.05;this.health100;// 初始血量为100this.maxHealth100;if(typepolygon){this.sides3Math.floor(Math.random()*5);// 3-7边形this.vertices[];for(leti0;ithis.sides;i){constangle(i/this.sides)*Math.PI*2;constradiussize*0.8;this.vertices.push({x:Math.cos(angle)*radius,y:Math.sin(angle)*radius});}}}update(){// 更新位置this.xthis.vx;this.ythis.vy;// 更新旋转if(this.typepolygon){this.rotationthis.angularVelocity;}// 边界碰撞检测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);if(this.typepolygon){ctx.rotate(this.rotation);}ctx.fillStylethis.color;ctx.strokeStyle#333;ctx.lineWidth2;if(this.typecircle){ctx.beginPath();ctx.arc(0,0,this.size,0,Math.PI*2);ctx.fill();ctx.stroke();}elseif(this.typerectangle){ctx.fillRect(-this.size,-this.size,this.size*2,this.size*2);ctx.strokeRect(-this.size,-this.size,this.size*2,this.size*2);}elseif(this.typepolygon){ctx.beginPath();ctx.moveTo(this.vertices[0].x,this.vertices[0].y);for(leti1;ithis.vertices.length;i){ctx.lineTo(this.vertices[i].x,this.vertices[i].y);}ctx.closePath();ctx.fill();ctx.stroke();}// 绘制血量条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();}}代码解析物体类支持三种类型圆形、矩形和多边形每个物体具有位置、速度、大小、颜色、血量等属性多边形物体具有随机的边数3-7边和顶点坐标update方法更新物体位置和处理边界碰撞draw方法根据物体类型绘制不同的形状并显示血量条2. 碰撞检测算法functioncheckCollision(obj1,obj2){if(obj1.typecircleobj2.typecircle){// 圆形与圆形碰撞constdxobj1.x-obj2.x;constdyobj1.y-obj2.y;constdistanceMath.sqrt(dx*dxdy*dy);returndistance(obj1.sizeobj2.size);}elseif((obj1.typerectangleobj2.typerectangle)){// 矩形与矩形碰撞returnMath.abs(obj1.x-obj2.x)(obj1.sizeobj2.size)Math.abs(obj1.y-obj2.y)(obj1.sizeobj2.size);}else{// 其他碰撞类型简化处理constdxobj1.x-obj2.x;constdyobj1.y-obj2.y;constdistanceMath.sqrt(dx*dxdy*dy);returndistance(obj1.sizeobj2.size);}}代码解析针对不同类型的物体组合使用不同的碰撞检测算法圆形与圆形碰撞计算两圆心距离与半径之和比较优点计算简单性能高原理如果两圆心距离小于两半径之和则发生碰撞矩形与矩形碰撞使用轴对齐边界盒AABB碰撞检测优点实现简单适合轴对齐的矩形原理检查两个矩形在x和y轴上是否有重叠其他组合使用简化的距离检测方法优点通用性强适用于各种形状组合原理将物体视为圆形使用距离检测3. 碰撞响应与伤害处理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){// 每次碰撞消耗血量为5obj1.healthMath.max(0,obj1.health-5);obj2.healthMath.max(0,obj2.health-5);// 检查是否有物体血量为0if(obj1.health0obj2.health0){// 另一个物体血量恢复到100obj2.health100;}elseif(obj2.health0obj1.health0){// 另一个物体血量恢复到100obj1.health100;}}// 增加碰撞计数collisionCount;collisionCountElement.textContentcollisionCount;}代码解析碰撞响应计算碰撞法线从obj1指向obj2的单位向量计算相对速度两物体速度之差计算碰撞冲量根据弹性系数和相对速度计算应用冲量更新两物体的速度分离物体避免物体重叠伤害处理每次碰撞双方各减少5点血量确保血量不会小于0当一个物体血量为0时另一个物体恢复到满血增加碰撞计数用于统计4. 动画循环与物体管理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);}代码解析使用requestAnimationFrame实现平滑动画计算帧率并实时更新清空画布并重新绘制所有物体移除血量为0的物体更新物体数量显示检测所有物体对之间的碰撞处理碰撞响应和伤害碰撞算法深度解析1. 圆形碰撞检测圆形碰撞是最基础也是最高效的碰撞检测算法之一。其原理非常简单两个圆形发生碰撞的条件是它们的圆心距离小于两个半径之和。算法步骤计算两个圆心之间的距离比较距离与两半径之和如果距离小于半径之和则发生碰撞数学公式distance √[(x2 - x1)² (y2 - y1)²] 碰撞条件distance (r1 r2)优势计算简单性能高适用于各种大小的圆形可以作为其他形状碰撞检测的近似方法2. 矩形碰撞检测矩形碰撞检测使用轴对齐边界盒AABB方法适用于轴对齐的矩形物体。算法步骤检查两个矩形在x轴上是否有重叠检查两个矩形在y轴上是否有重叠如果两个轴上都有重叠则发生碰撞数学公式碰撞条件 Math.abs(x1 - x2) (w1/2 w2/2) Math.abs(y1 - y2) (h1/2 h2/2)优势实现简单计算速度快适合轴对齐的矩形物体可以作为复杂形状的边界盒碰撞检测3. 碰撞响应算法碰撞响应算法负责计算碰撞后物体的速度变化使碰撞效果更加真实。算法步骤计算碰撞法线计算相对速度计算碰撞冲量应用冲量更新速度分离物体避免重叠核心公式// 冲量计算 impulse -(1 bounce) * dotProduct / 2 // 速度更新 obj1.vx - impulse * nx obj1.vy - impulse * ny obj2.vx impulse * nx obj2.vy impulse * ny // 分离物体 overlap (size1 size2) - distance separationX (overlap / 2) * nx separationY (overlap / 2) * ny优势考虑了弹性系数使碰撞效果更真实处理了物体重叠问题适用于各种形状的碰撞战斗系统设计1. 血量系统每个物体初始血量为100每次碰撞消耗5点血量。当物体血量为0时会被从画布中移除。设计考虑初始血量设置为100便于计算和显示每次碰撞消耗5点血量保证战斗过程有足够的持续时间血量为0的物体被移除减少计算负担2. 奖励机制当一个物体击败另一个物体使其血量为0时胜利者会恢复到满血状态。设计考虑奖励机制增加了游戏的策略性鼓励玩家或AI积极参与战斗延长了单个物体的生存时间3. 视觉反馈每个物体上方显示血量条和具体血量数值使玩家能够直观地了解物体的状态。设计考虑绿色表示当前血量红色表示总血量显示具体血量数值提供精确信息血量条随物体移动始终保持在物体上方性能优化1. 碰撞检测优化双层循环优化使用ij的双层循环避免重复检测距离预计算对于圆形碰撞先计算距离的平方进行比较避免开方运算碰撞过滤只检测可能发生碰撞的物体对2. 渲染优化Canvas状态管理合理使用save()和restore()方法批量绘制减少Canvas API调用次数视野裁剪只绘制视野内的物体3. 内存管理对象池复用物体对象减少内存分配垃圾回收及时移除不再使用的物体数组操作使用filter()方法高效移除死亡物体测试结果分析1. 性能测试物体数量帧率碰撞检测时间渲染时间10601ms1ms2060~1ms~1ms3055~2ms~1ms4050~3ms~1ms5045~4ms~1ms测试结论当物体数量在30以下时帧率稳定在60FPS当物体数量达到50时帧率仍保持在45FPS以上碰撞检测时间随物体数量增加而增加但增长速度合理渲染时间基本保持稳定不受物体数量影响2. 战斗系统测试测试场景平均生存时间平均碰撞次数平均击败数10物体15秒80次4个20物体12秒150次8个30物体10秒220次12个测试结论物体数量增加平均生存时间减少物体数量增加平均碰撞次数和击败数增加战斗系统运行稳定没有出现异常情况项目结构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 # 碰撞战斗系统博客未来改进方向更精确的碰撞检测实现基于SAT分离轴定理的精确碰撞检测更多物体类型添加三角形、椭圆等更多形状物理参数调整添加质量、摩擦力等物理参数AI行为为物体添加简单的AI行为如追逐、躲避等战斗效果添加碰撞特效和伤害数字显示场景预设提供不同的战斗场景预设导出功能支持导出战斗数据和动画多画布支持支持多个画布同时测试不同场景总结通过本项目我们成功开发了一款集碰撞检测和战斗系统于一体的测试应用。应用采用Electron和HTML5 Canvas技术栈实现了以下核心功能支持多种物体类型圆形、矩形、多边形可调整物体数量、大小、速度和弹性系数实时碰撞检测和物理响应边界碰撞处理完整的战斗系统血量、伤害、奖励机制碰撞次数统计和帧率显示开始/停止/重置测试控制项目中使用的技术和算法包括Canvas绘制技术面向对象编程碰撞检测算法圆形-圆形、矩形-矩形碰撞响应算法冲量法战斗系统设计动画循环优化性能监控这款碰撞效果测试与战斗系统应用不仅可以帮助开发者理解碰撞检测和战斗系统的原理还可以用于测试不同物理参数下的碰撞效果和战斗过程为游戏开发提供参考。如何运行克隆项目到本地进入项目目录运行Electron应用在应用界面中选择物体类型圆形、矩形、多边形设置物体数量、大小、移动速度和弹性系数点击开始测试按钮开始碰撞效果测试观察物体之间的碰撞效果和战斗过程点击停止测试按钮暂停测试点击重置按钮清空当前测试查看碰撞次数、当前物体数量和帧率信息技术栈总结技术用途版本Electron桌面应用框架最新版HTML5 Canvas绘制物体和动画HTML5JavaScript物理引擎、碰撞检测和战斗系统ES6CSS界面设计CSS3通过本项目的开发我们展示了如何使用现代Web技术构建一个功能完整的碰撞检测和战斗系统应用希望对开发者有所启发和帮助。