本文通过一个实例描述了JS/HTML5游戏中常用的碰撞检测包围盒检测算法。分享给大家参考，如下：

事实上，检测物体是否相交是必要的，但在实际应用中，物体的形状和大小是不同的。如果直接在物体边缘进行碰撞检测，实际计算过程非常昂贵。如果对象太多，比如网游，通常只有几千个用户，同时在线的用户多达几万或者几十万，而这些碰撞都要被服务器检测到，所以即使是大型服务器也会因为计算的消耗而崩溃。因此，包围盒算法通常在没有非常精确的碰撞检测的情况下使用，即对象被放置在多边形中，这就是包围盒。

基于这样一个概念，我们通常使用最简单的多边形，如圆形和矩形。

首先，我们来看看如何使用圆形包围盒算法，它使用圆形作为包围盒来包围对象，只需要检测两个圆形是否碰撞。检测圆的碰撞很容易。假设圆A的坐标(x1，y1)，半径为r1，圆B的坐标(x2，y2)，半径为r2，如果满足不等式(Y2Y1) 2 (X2X1) 2 (R1R2) 2，则意味着两个圆发生碰撞。事实上，圆心之间的距离小于两个圆的半径之和。因为距离计算需要打开。

密钥代码：

函数hittest (source，target) {/*源对象和目标对象都包含x，y和宽度，高度*/return！(Math.pow((source.x - target.x)，2) Math.pow((source.y - target.y)，2) Math.pow((source.r target.r)，2))；}完整的示例代码：

！DOCTYPE html html lang=' en ' head meta name=' viewport ' content=' width=device-width，initial-scale=1.0，maximum-scale=1.0，user-scalable=0 ' meta charset=' UTF-8 ' title盒包围碰撞算法-圆形/title style # stage {边框： 1px纯色浅灰色；}/样式/标题dyh 1是否碰撞：span class='hitTest '否/span/h1 canvas id=' stage '/canvas/body脚本窗口。onload=function(){ var stage=document。queryselector(' stage ')，CTX=stage。get context(' 2d ')；舞台宽度=400舞台高度=400;文件。onkey down=function(event){ var e=event | | window。事件| |参数。打电话的人。打电话的人。参数[0]；//根据地图数组碰撞将测开关（例如键码){ case 37:控制台。日志('左')；if (balls[0]).x 0) { balls[0].x-=2；} breakcase 38:控制台。日志(“顶部”)；if (balls[0]).y ^ 0){ balls[0].y-=2；}休息案例39:控制台。日志('右')；if (balls[0]).x stage.width) { balls[0].x=2；} breakcase 40:控制台。原木(“底部”)；if (balls[0]).y stage.height) { balls[0].y=2；} breakdefault:返回false } }stage.addEventListener('click '，function(event){ var x=event。clientx-stage。getboundingclientrect().向左；var y=事件。客户阶段。getboundingclientrect().顶部；球[0]。x=x球[0]。r/2；球[0]。y=y球[0]。r/2；});var player={ x : stage。宽度/2-20，y: stage.height/2 - 20，r: 40，c: 'red' }，balls=[]；balls.push(玩家);for(var I=0；i 10i ) { var ball={ x: 60 * i，y: 60 * i，r: 40，c : ' blue ' }；球。推（球);}函数createBall(x，y，r，c){ CTX。begin path()；CTX。FillStyle=c；(x，y，r，0，数学.PI * 2)；CTX。fill()；}函数hitTest(源，目标){ /*源物体和目标物体都包含x，y以及宽度、高度*/返回！(Math.pow((source.x - target.x)，2) Math.pow((source.y - target.y)，2) Math.pow((source.r target.r)，2))；}函数更新(){ CTX。global AlPha=1；ctx.clearRect(0，0，400，400)；document.querySelector(' .hitTest ').innerHTML='否；for (var i=1，len=balls.length我透镜；i ) { createBall(balls[i]).x，balls[i].y，球[i].r，balls[i].c)；var flag=hitTest(balls[0]，balls[I])；if(flag){ document。' queryselector '。hitTest ').innerHTML='是；CTX . global alpha=0.5 } } createBall(balls[0]).x，balls[0].y，balls[0].r，balls[0].c)；requestAnimationFrame(更新);} update()；};/script/html这里使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码运行结果如下：

开源代码库地址：https://github。com/krapnikkk/JS-游戏数学

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript数学运算用法总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript数组操作技巧总结》 、 《JavaScript排序算法总结》 、 《JavaScript遍历算法与技巧总结》 、 《JavaScript查找算法技巧总结》 及《JavaScript错误与调试技巧总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。